*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 the look lives](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#how-it-works) - [Step 1. Match your theme, or set colors and fonts](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#colors) - [Step 2. Product cards and columns](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#cards) - [Step 3. Product page and cart layout](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#page-layout) - [Step 4. The store page: sorting, pages and filters](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#lists) - [Step 5. Page sizes, price ranges and after Add to cart](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#sizes) - [Step 6. Change the wording](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#wording) - [Step 7. Tweak one page from the page itself](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#live-editor) - [Custom CSS and theme templates](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#code) - [If it does not work](https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/#troubleshooting) **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. ![Settings › Design, Store colors with Match my theme on.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/how-to-customize-your-stores-look-colors-607.jpg) ### 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. ![Settings › Design, Product listings with Card photo shape and Products per row.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/how-to-customize-your-stores-look-cards-607.jpg) > **💡 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](https://docs.wpeasycart.com/docs/how-to-guides/elementor-build-a-product-page-template/). ![The checkout details step with two columns: the order summary beside the form.](https://docs.wpeasycart.com/wp-content/uploads/2026/10/how-to-customize-your-stores-look-page-layout-checkout-606.jpg) ![The same step on a phone, set to one column: the closed Order Summary bar above the form.](https://docs.wpeasycart.com/wp-content/uploads/2026/10/how-to-customize-your-stores-look-page-layout-summary-bar-606.jpg) ![The Modern cart page on a phone: shorter item cards, the totals and Checkout, then the coupon, gift card and shipping estimate as one-line rows.](https://docs.wpeasycart.com/wp-content/uploads/2026/10/how-to-customize-your-stores-look-page-layout-cart-phone-606.jpg) ### 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. ![Settings › Products, the Store page card with its preview.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/how-to-customize-your-stores-look-lists-607.jpg) ### 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. ![Page sizes shoppers pick from, opened from the Store page card.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/how-to-customize-your-stores-look-sizes-607.jpg) ### 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. ![Settings › Language: the storefront language, installed translations and the phrases by area.](https://docs.wpeasycart.com/wp-content/uploads/2026/11/how-to-customize-your-stores-look-wording-607.jpg) ### 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. *Keep going* ## Related panels - [Design](https://docs.wpeasycart.com/docs/administrative-console-guide/design-settings/): Every Design setting. - [Products](https://docs.wpeasycart.com/docs/administrative-console-guide/product-settings/): Every Products setting, with page sizes and price ranges. - [Language](https://docs.wpeasycart.com/docs/administrative-console-guide/language-settings/): The language and phrase editor. ## 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. [Start your free trial](https://www.wpeasycart.com/wp-easycart-professional-14-no-risk-trial/) · [See what is included](https://www.wpeasycart.com/wordpress-shopping-cart-pricing/) ![The WP EasyCart admin: orders and offers](https://docs.wpeasycart.com/wp-content/uploads/2026/09/cta-wpeasycart-pro-v2.jpg) --- Source: https://docs.wpeasycart.com/docs/how-to-guides/how-to-customize-your-stores-look/ ( updated 2026-11-06 )