Settings › Appearance
Design Settings
Match your theme in one switch, or set your own colours and font, then decide how products are laid out in listings and on their own pages, and how far you go with your own CSS and templates. 10 sections, with every setting named in plain language and its factory default shown beside it.
Quick links
Where to find it:WP Admin › EasyCart › Settings › Appearance › Design
Brand
Colours and type
Match my theme, or the colours and font you choose, so the store looks like the rest of your site.
Store colors
Match your theme, brand colors, text on dark sites and corner style
6 settingsMatch my theme
Store pages take your theme’s colours and fonts. Product cards, prices, buttons, titles, labels and the checkout follow the theme, and every pair of colours is kept readable. Where the theme does not say which colour to use, your Main color and Second color below fill in. While it is on, the store uses your theme’s fonts, so the Store font under Typography is not loaded. Under the switch, What your theme gives names your theme and lists what the store takes from it: Accent, Text, Headings, Background, Buttons, Text font and Headings font. New stores start with it on; a store set up before keeps its own look until you turn it on. Try it first: it is the quickest way to make the store look like the rest of your site.
Main color
The colour used for buttons, links and highlights across the store, and in your order emails too. This is the single most visible setting on the page, so set it to your actual brand colour before anything else. Remember it has to carry white button text legibly: a pale brand colour that looks right on a logo often fails as a button.
Second color
Hover states and secondary accents. A slightly darker or lighter version of the main colour is the safe choice. Picking something unrelated makes every hover feel like a different website.
Text color
Tells the store whether it is sitting on a light or a dark page. Choose white text only if your theme genuinely has a dark background, because this flips the text colour on store elements wholesale rather than per element. Getting it wrong produces white text on white, which looks like the store failed to load.
Square corners
Removes rounded corners from buttons, images and boxes across the store. Worth turning on if your theme is squared off, because the mismatch between a sharp theme and rounded store elements is one of the things that makes a store look bolted on rather than built in.
Admin accent color
The colour of the EasyCart admin menu, buttons and dashboard charts. It changes nothing a customer ever sees. Useful if you run several stores and want to tell at a glance which admin you are looking at.
💡 Note: The main colour also appears in your order emails, so pick something that reads well on white in a mail client as well as on your site. Email clients do not run your stylesheet, and they will not rescue a low-contrast choice. For a step by step walkthrough, see How to Customize Your Store’s Look.
Typography
The font used on every store element
2 settingsStore font
A Google font, loaded on store pages and applied to every EasyCart element. It is not used while Match my theme is on, because the store then takes your theme’s fonts. Theme default leaves your theme’s own font alone, which is usually the right answer: matching your theme costs nothing and loading a second font family costs page speed. Reach for this when the store visibly does not match the rest of the site.
Custom font family
A CSS font-family name to use instead of a Google font. The font itself must already be loaded by your theme or another plugin, since this only names it. If the name is wrong or the font is not loaded, browsers fall back silently and you will not get an error to tell you.
The grid
How products look in a listing
Card style, photo shape, what appears on each card, hover behaviour, and how many fit across each screen size.
Product listings
How products look on store and category pages
24 settingsProduct layout
The card style used for each product in a listing. The styles differ in where the image, title, price and button sit relative to each other rather than in colour, so pick on layout and let the colour settings above do the branding. Individual store pages can override this in the live editor.
Card photo shape
Puts every product card’s photo in the same frame, filled edge to edge: Square, Portrait ( 4:5 ) or Landscape ( 4:3 ). This is the quick fix for a ragged grid made by photos of different shapes. Original keeps each photo’s own shape and uses the image height settings further down.
Content alignment
Aligns the title, price and buttons inside each card. Centre suits sparse cards with short titles; left is easier to scan down a long grid, because the eye has a consistent starting edge.
Parts shown on each product
Which parts appear on a product card: title, price, star rating, Add to cart button and quick view button. Dropping the rating on a new store is sensible, since empty star rows suggest nobody has bought anything. Dropping the price is only right for catalogue and quote-based stores.
Image hover effect
What the product image does when a shopper hovers over it. Flip, crossfade, slide and flipbook all swap in the product’s extra images, which is genuinely useful for clothing and anything with a back view, but only if your products actually have extra images. Lighten, grow and shrink work with a single image. None of this happens on a touch screen.
Image frame
A thin border or a drop shadow around each product image. Helpful when your photography has a white background and would otherwise dissolve into the page. Unnecessary when products are shot on a coloured or textured backdrop.
Quick view popup
Shoppers can open a product summary in a popup straight from the listing. It shortens the path to the cart for simple products. For products with several options to choose, the full page is usually the better experience, and a popup that cannot show everything just adds a step.
Border around each product
Draws a box around every product card. Gives a grid structure when products have varying image sizes or ragged text lengths; adds visual noise when the grid is already tidy.
Round the border corners
Rounds the corners of that border. Only does anything when the border above is on. The four corners are then controlled individually below, which is how you get shapes like a card rounded at the top and square at the bottom.
Top-left corner
Rounds the top-left corner of the product card.
Top-right corner
Rounds the top-right corner of the product card.
Bottom-left corner
Rounds the bottom-left corner of the product card.
Bottom-right corner
Rounds the bottom-right corner of the product card.
Columns on desktop
Products per row on wide screens. Three or four suits most catalogues. More columns means smaller images, and past about five the photography stops doing any selling.
Columns on tablet ( landscape )
Products per row on a sideways tablet or a small laptop.
Columns on tablet ( portrait )
Products per row on an upright tablet.
Columns on phone ( landscape )
Products per row on a sideways phone.
Columns on phone
Products per row on an upright phone, which for most stores is the majority of visits. One column gives each product a usable image; two fits more on screen but makes everything small. Look at your own store on a phone before deciding.
Automatic image height
Listing images keep their natural proportions. Leave it on if your product photos are consistently shaped. Turn it off to crop every image to a fixed height instead, which is the fix for a ragged grid caused by mixed portrait and landscape photography.
Image height on desktop
The fixed height listing images are cropped to on wide screens, in pixels. Only used when automatic image height is off.
Image height on tablet ( landscape )
The cropped image height on a sideways tablet or small laptop.
Image height on tablet ( portrait )
The cropped image height on an upright tablet.
Image height on phone ( landscape )
The cropped image height on a sideways phone.
Image height on phone
The cropped image height on an upright phone.
💡 Note: Products per row is one row with a box for each of the five screen sizes. Set desktop and phone deliberately, since those cover most visits, and leave the three in between on their defaults unless you have a reason. Page sizes, how many products a page shows, are set on Settings › Store › Products.
The pages
Product, cart and checkout layout
Whether the gallery sits beside the details and the summary beside the form, decided per screen size, the cart page’s modern or table look, and a cart that fits a narrow theme column.
Product page
Gallery beside or above the details, per screen size
5 settingsColumns on desktop
Two columns puts the image gallery beside the product details; one column stacks the gallery above them. Two is the norm on desktop, because it keeps the price and the Add to cart button visible without scrolling.
Columns on tablet ( landscape )
Gallery beside the details, or above them, on a sideways tablet or small laptop.
Columns on tablet ( portrait )
Gallery beside the details, or above them, on an upright tablet.
Columns on phone ( landscape )
Gallery beside the details, or above them, on a sideways phone.
Columns on phone
Gallery beside the details, or above them, on an upright phone. One column is almost always right here; two columns on a phone leaves both halves too narrow to be useful.
Cart & checkout look
The cart page’s look, fitting the cart to your theme, and the order summary beside or below the cart and checkout form per screen size
7 settingsCart page look
How the cart page looks with the classic checkout. Modern shows each item as a card with its picture, a − / + quantity stepper and Remove, the coupon, gift card and shipping estimate under the items, and a summary box beside them with the totals, a large Checkout button, the express buttons under or pay with, and Continue Shopping. On a phone the items are shorter, the coupon, gift card and estimate fold into one-line rows that open when tapped, and a bar with the total and Checkout stays at the bottom of the screen while the summary’s own button is out of view. Classic table keeps the columns and Update buttons. The one-page checkout always uses the modern cart, and Elementor’s Cart widget has a Look setting of its own. A store that keeps its own copy of the cart template ( ec_cart.php ) or of the stylesheet from before the modern cart keeps the table whatever you choose, and a note under this row says which file to update or remove.
Fit the cart to your theme’s content area
For themes that give the cart less room than the screen: a page with a sidebar, or a narrow content column. On, the cart and checkout use the layout made for the width they actually get, so a cart 830px wide looks the way it would on an 830px screen instead of squeezing the desktop columns and the order summary. The column settings below then follow the cart’s width. Under the switch, Check my theme opens your cart page out of sight, measures the room your theme gives it and says whether you need this; when a theme measures too narrow, the EasyCart screens recommend it with a Fit the cart button. New stores start with it on; a store set up before keeps its layout until you turn it on. Elementor’s Cart and Checkout widgets are left alone: set their layout per device in Elementor.
Columns on desktop
Two columns shows the order summary beside the cart and the checkout form; one column puts it below. Beside is better: a shopper who can see the total while filling in the form is less likely to abandon at the last step because something surprised them.
Columns on tablet ( landscape )
Summary beside the form, or below it, on a sideways tablet or small laptop.
Columns on tablet ( portrait )
Summary beside the form, or below it, on an upright tablet.
Columns on phone ( landscape )
Summary beside the form, or below it, on a sideways phone.
Columns on phone
Summary beside the form, or below it, on an upright phone. One column is the practical choice. On the checkout steps a screen size set to one column shows the summary as a closed bar above the form, with the item count and the total, that opens in place when tapped; on the payment step it stays open above Place order.
Around the store
Cart icon and sign-ups
The cart icon added to your navigation, and where the newsletter popup went.
Cart icon
The cart icon and item count added to your navigation menus
2 settingsMenus that show the cart icon
Adds a cart icon with a live item count to each menu you choose. Worth doing: shoppers expect a persistent cart in the navigation, and without one they have to remember what they added. Clear every menu to remove the icon again.
Hide the icon when the cart is empty
The icon only appears once something is in the cart. Keeps the navigation clean for browsers who have not started shopping, at the cost of the cart being somewhere shoppers have not already learned to look.
Newsletter popup
Now on Settings › Email marketing, with the other places shoppers sign up
no stored settingsThe newsletter popup is no longer set here. This section says whether the popup is on or off, and Open Email marketing takes you to Settings › Marketing › Email marketing, where the popup sits with every other place shoppers sign up.
Going further
CSS, themes and templates
Your own rules, the switches that resolve theme conflicts, and the folders that let a developer replace the built-in design outright.
Custom CSS
Your own rules, printed on every store page after the store stylesheet
1 settingCSS rules
Your own CSS rules, printed on every store page after the store stylesheet, which is what lets them win. Plain CSS only, with no style tags around it. The important part: this survives plugin updates, whereas edits to the plugin’s own stylesheets do not, so this is where store tweaks belong.
💡 Note: Rules added here survive plugin updates. Editing the plugin’s own stylesheets does not, so anything you want to keep belongs in this box rather than in a file.
Theme integration
The on-page editor, and switches for theme conflicts and performance
6 settingsHide the live design editor
Removes the on-page design toolbar that administrators and store managers see while browsing the store. Useful when you are recording a demo, or when staff keep changing things by accident.
Use the theme\’s post template for products
Product pages render with your theme’s single-post template, or a single-ec_store.php file if you have one, instead of being treated as pages. Reach for this when product pages are missing theme furniture such as a sidebar or breadcrumb that posts get. It can equally introduce post elements you do not want, like author bylines and comment forms, so check a product page after switching.
Match store page meta on product pages
A legacy option for older layouts that copied the store page’s meta onto product pages. The current design does not use it, so leave it off unless you are maintaining a store built years ago that depends on it.
Load minified store CSS and JavaScript
Serves the compressed store CSS and JavaScript for faster loading. Worth turning on, with one caveat: if the store breaks immediately after a plugin update, this is the first thing to switch off, because a stale minified file is a common cause. It is ignored when a custom theme folder supplies its own files.
Skip the jQuery UI accordion script
Stops the jQuery UI accordion script loading with the store. This exists purely to resolve a conflict with a theme that loads its own copy. It is not a performance setting, and switching it on can stop collapsible store panels working, so only use it when you have an actual conflict to fix.
Skip the jQuery UI datepicker script
Stops the jQuery UI datepicker loading. Same purpose and same warning as the accordion above: date fields on product options and pickup dates may stop working, so only reach for it when a theme conflict leaves you no choice.
⚠️ Careful: The two jQuery UI switches are conflict fixes, not speed settings. Turning them on without an actual theme conflict will quietly break collapsible panels, product date options and pickup date pickers.
Template system
For developers: override the built-in CSS, images and PHP templates from wp-easycart-data
2 settingsCustom theme folder
A folder under wp-easycart-data holding CSS, images and scripts that replace the built-in ones. Only folders that actually exist are listed. This is the developer route to a fully custom store appearance, and because it lives in the data directory it survives plugin updates.
Custom layout folder
A folder under wp-easycart-data holding PHP templates that replace the built-in store, cart and account templates. The deepest level of customisation available, and correspondingly the one most likely to need attention when the plugin changes, since your copies do not gain upstream fixes.
⚠️ Careful: A custom layout folder takes over the PHP templates completely, which means your copies stop receiving upstream fixes and changes. Expect to re-check them after plugin updates, and prefer the custom CSS box above for anything that is only cosmetic.
Keep going
Related panels
Product pages and lists, and what appears on them.
The cart and checkout this page lays out.
The wording, where this page handles the look.
Storefront link style and the live editor visibility.
Email branding, which uses the main colour set here.
The newsletter popup and every other place shoppers sign up.
Product, category, cart and account pages designed in Elementor.
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.
