How-to › Design your store › Look and feel
How to Customize Your Store’s Look
Match your theme in one switch, then change product cards, columns, the store page, page sizes and wording without a page builder. 10 parts.
Quick links
Where to find it:WP Admin › EasyCart › Settings › Design
Before you start
Where the look lives
What you need and which settings pages to use.
Where the look lives
Settings › Appearance and Settings › Products
What you need. WP EasyCart, free. Nothing here needs a page builder. Three small items are marked PRO.
Most of your store’s look is settings. Under EasyCart › Settings the Appearance group holds Design ( colors, fonts, product cards and layout ), Elementor and Language ( the wording ). In the Store group, Products holds what a product page shows, how the store page lists, sorts and filters, its page sizes and price ranges, and what happens after Add to cart.
The steps: match your theme or set colors and fonts, product cards, product page and cart layout, the store page, after Add to cart, wording, then per-page tweaks and custom CSS.
Change it
Seven steps
Your theme’s look, cards, layout, the store page, sizes, wording and per-page tweaks.
Step 1. Match your theme, or set colors and fonts
Design › Store colors and Typography
Open Settings › Design. The first switch under Store colors is Match my theme. On, store pages take your theme’s colors and fonts: product cards, prices, buttons, titles, labels and the checkout follow it and stay readable. Under the switch, What your theme gives names your theme and lists what the store takes from it. New stores start with it on; a store set up before keeps its own look until you turn it on. Try it first.
The colors below still count. With Match my theme on they fill in wherever your theme sets nothing; with it off they are the store’s look:
Main color: buttons, links and highlights across the store and in order emails.
Second color: hover states and secondary accents.
Text color: Dark text or White text. Choose white only for a dark site.
Square corners: removes rounded corners from buttons, images and boxes.
Admin accent color: colors the WP EasyCart admin, not your storefront.
Under Typography, Store font loads a Google font on store pages and applies it to all EasyCart elements, unless Match my theme is on: then your theme’s fonts win. Theme default keeps your theme’s font. Choose Custom font and enter a name in Custom font family to use a font your theme already loads. WP EasyCart does not load that font for you.
Step 2. Product cards and columns
Design › Product listings
Under Product listings choose how each product looks in a list:
Product layout: Grid style 1 to 5, or List.
Card photo shape: Original, or every photo in the same Square, Portrait ( 4:5 ) or Landscape ( 4:3 ) frame, filled edge to edge. The quick fix for a ragged grid.
Content alignment: Default, Left, Centre or Right.
Parts shown on each product: title, price, star rating, add to cart button, quick view button and short description.
Image hover effect: flip or crossfade to the second image, lighten, grow, shrink, grey to color, brighten, slide, flipbook or no effect.
Image frame: None, Border or Shadow.
Quick view popup, Border around each product and Round the border corners, with a switch for each corner.
Products per row has a box for each screen size: desktop, tablet ( landscape ), tablet ( portrait ), phone ( landscape ) and phone. More columns means smaller pictures. Automatic image height keeps natural proportions. Turn it off to crop images to a fixed height per screen size.
💡 Note: A shortcode can override any of these per page, such as columns or the card style. Settings are the defaults.
Step 3. Product page and cart layout
Design columns, and Products › Product page
In Design, Product page sets columns per screen size. Two columns puts the gallery beside the details, one stacks them. Cart & checkout look does the same for the order summary beside or below the cart and the checkout form. On a screen size set to one column, the checkout steps show the summary as a closed Order Summary bar with the item count and total, which opens in place.
In the same card, Cart page look picks the cart page: Modern (the default) shows each item as a card with a − / + stepper, and the totals, Checkout and the express buttons beside them; Classic table keeps the older table with Update buttons.
Then open Settings › Products. The Product page card draws a product page beside its switches: click a part to show or hide it and the page changes as you go. Under What the page shows: Breadcrumbs, Model number, Categories, Manufacturer, Zoom on hover ( off on phones and tablets ), Opens large and the Share links ( Facebook, X, Pinterest, Email, LinkedIn ). Picture for products without a photo replaces the grey box a product without a photo shows.
These shape WP EasyCart’s standard product layout. If you assign an Elementor product template, the template takes over the layout. See Elementor: Build a Product Page Template.
Step 4. The store page: sorting, pages and filters
Products › Store page
The Store page card on Settings › Products shows a store page as it will look, and changes with each switch:
Lists open sorted by: the first order shoppers see, such as your own order, price or newest first.
Sort menu: shoppers can change the order themselves, from the Sort choices shoppers get.
Short description on product cards and Featured categories first ( categories you mark as featured show above the products ).
Split products into pages and Let shoppers pick a page size.
Filter sidebar: Off, Left, Right or Slides in. This is EasyCart’s own column of filters beside the products, not your theme’s sidebar. Under What the sidebar offers, pick its parts: Search box, Category links, Manufacturer links, Price, Options such as size ( PRO ), Category groups and a Clear filters link. The Pickup location filter is PRO.
Step 5. Page sizes, price ranges and after Add to cart
Products › Store page and After Add to cart
Under the page size switches, the Store page card reads Page sizes: with the sizes you offer and the one shoppers start on. Change opens Page sizes shoppers pick from: add a number, remove one, and star the size shoppers start on. Once Price is picked under What the sidebar offers, a Price ranges line appears: its Change button opens the ranges the Price filter offers, with how many products are in each. With no ranges yet it reads No price ranges yet, so the Price filter is empty, with Add price ranges.
The After Add to cart card decides where shoppers land: From a product page ( Go to the cart or Stay on the page ) and From the store page ( Stay on the list or Go to the cart ). Under Buying more than one, A quantity box beside list buttons is PRO, and One subscription per purchase keeps each subscription checkout to one.
Step 6. Change the wording
Settings › Language
Set the Storefront language shoppers read, and add or remove installed translations. Under Storefront phrases, every phrase the store says is listed by area. Search them, tick Changed only to see your edits, edit a phrase and it saves when you leave the box. Reset one phrase, or press Reset area to return an area to the shipped wording.
The order receipt wording is edited under Settings › Emails & Documents › Email, and the phrase editor links there.
Step 7. Tweak one page from the page itself
The on-page design editor
While you are signed in as an administrator, a store page shows a small gear. It opens a panel of Page Product Options: Product Type, Quick View, Colorize EasyCart, Dynamic Image Height, and columns and image height for each screen size. Show Device Preview opens a preview at iPad and iPhone sizes.
SAVE keeps the choices for that page. SET AS DEFAULT saves them as the store defaults, the same settings you found in Design. To remove the gear, turn on Hide the live design editor in Design › Theme integration (advanced).
⚠️ Careful: SET AS DEFAULT changes the whole store, not just the page you are on.
Good to know
Code and fixes
Custom CSS, theme templates and the usual reasons a change does not show.
Custom CSS and theme templates
For what settings cannot reach
Custom CSS. Settings › Design › Custom CSS takes plain CSS, with no style tags. It prints on every store page and survives plugin updates.
Template system (developers). Custom theme folder and Custom layout folder name folders you create under wp-easycart-data/design/theme and wp-easycart-data/design/layout. A file in the layout folder replaces the built-in template of the same name, and a theme folder replaces CSS, images and scripts. The data folder sits beside the plugin folder, so updates do not overwrite it.
If it does not work
The usual reasons a change does not show
A change does nothing on my product page. An Elementor product template is in use. Change the layout there.
Colors did not change. Clear your page cache, and check that a theme rule is not overriding them.
My font does not show. A custom font family must already be loaded by your theme.
The price filter is empty. Add price ranges from the Store page card in Settings › Products, and pick Price under What the sidebar offers.
The page-size menu is missing. Turn on Split products into pages and Let shoppers pick a page size in the Store page card of Settings › Products.
My store still looks the same after Match my theme. Clear your page cache. If your theme does not say which colors and fonts it uses, the note under the switch says so, and the store takes your Main and Second colors with your theme’s fonts.
Ready to run your store on WP EasyCart?
Everything in this guide works with the free plugin. PRO and Premium add subscriptions, memberships, wholesale pricing and more. Try every PRO feature free for 14 days.
