Designing in EasyCart is meant to be simple and intuitive.  The bulk of EasyCart design should look good in your existing theme by default.  We automatically adjust settings to try and fit as many themes as possible, but this section lets you take it one step further and really integrate colors, design, and layouts to fit your given wordpress theme.

Tutorial Video - Click Here!

Watch a short video on this section from our video library!

Design Settings

• Show Live Design Editor on Frontend:  If you have a theme conflict, this allows you to turn off the ‘white gear’ live design editor on the frontend.  By being logged into wordpress and visiting the front end of your store, many of these settings can be adjusted while you view your store pages, making for live easy editing of basic design features such as columns and colors.
• Use Theme Custom Post Template:  Many themes offer a custom post template, which can change the layout and look of your products and product details pages.  You can enable that here, but you should know if your theme supports this feature.
• Match Store Page Meta:  If you would like product details pages, which are custom posts, to look like your store page, which is a wordpress page, then you should enable this section and EasyCart will try to use the same Meta as the store.

 

Store Colors

• Main Color:  Select the main color you want EasyCart to utilize.
• Second Color:  Select the secondary color you want EasyCart to utilize.
• Theme Background Color:    This section lets you invert most of the text color easily and quickly from dark to light.  IF you have a dark background website, EasyCart will turn text white.  If you have a light background website, EasyCart can turn text dark.

 

Custom CSS

This section lets you add custom CSS to the EasyCart system and it will retain these changes even after an upgrade of the plugin.  This is the preferred place to save custom EasyCart CSS and not worry about losing all your work after an update.

 

Cart Design Options

The shopping cart display can appear in a 2 column or 1 column layout.  You can also decide which layout to appear based on the basic device (desktop, tablet, phone) being used.  We also find that many themes come with sidebars, which decrease the content space significantly, making it nice to adjust to a 1 column layout should you need the extra spacing.

 

 

Product Details Design Options

The product details display can appear in a 2 column or 1 column layout.  You can also decide which layout to appear based on the basic device (desktop, tablet, phone) being used.  We also find that many themes come with sidebars, which decrease the content space significantly, making it nice to adjust to a 1 column layout should you need the extra spacing.

 

Product Design Options

This section lets you choose from several pre-built template designs used to display products in the grid format of your store.

• Product Type:  Choose from several different display types here for your products.  These are prebuilt designs, and you can tweak them using CSS in the above custom CSS section should you choose.
• Image Hover Effect:    Choose what type of hover effect occurs on the product image.  Some effects require that 2 images be uploaded in order to cross fade between effects, while others require just 1 image to grow, shrink, lighten or darken.
• Image Effect:  This effect adds a border or shadow to the entire product when hovered over.
• Quick View:  This setting will turn on a quick view button that appears on the image when hovering.  The quick view will open a small dialog box on the product without the user having to go to the entire product details page.
• Use Dynamic Image Heights:  Image heights will adjust based on each product image uploaded.  Some images may be taller or shorter than others, and the product title and pricing will adjust automatically.  The only drawback is that the products may have a staggered look to them if image heights are vastly different… so we give you the option to enable or disable this feature.
• Columns:  Each major device can have different column and image heights based on your product needs.  Set between 1 and 5 column layouts depending on your themes content area provided and the product look you are going for.
• Image Height (pixels):  If you have dynamic image heights turned off, then the image section will set it’s height based on your setting here.  This makes for a consistent even grid look to your products when used.

 

 

Design Template System

For the most flexibility in design, web designers may need to customize layout files to their liking.  While you can always customize around the EasyCart shortcode for the store, cart, and account pages, sometimes you need maximum flexibility in design by using a child system similar to that found in WordPress.

What is a EasyCart Child Theme and Child Layout?

This is a great option to help developers keep their clients’ stores up to date and functional at a single click of the button. With this great new feature we know developers still need the ability to override certain files, images, css, etc… In order to make the store customized for their specific project (a great example of this is customizing the email receipt).

This is where a child layout becomes an extremely important feature! Child themes and layouts allow you to specify a child theme or layout folder in which you can place individual files to override a specific functionality of the store, while simultaneously allowing your theme and layout to keep the latest features for the rest of store.

How Does the Store Find a Layout or Theme File?

Every file loaded from the design folder of your shopping cart system goes through the following check to find the correct file:

1. Does the file exists in the plugins folder at wp-easycart-data/design/layout/{your selected child layout}/file.php?
2. If not, use the latest file in the wp-easycart/design/layout/base-reponsive-v3/file.php

This applies exactly the same to the theme folder and can be useful for specifying a custom image not found file.

How to Set Up and Specify a Child Design

Setting up and specifying a child theme or child layout is quick and easy! First, add a new folder in the wp-easycart-data/design/layout/ folder (something like my-custom-layout) and repeat this for the wp-easycart-data/design/theme/ folder. Next, go to the WordPress Admin -> WP EasyCart ->  Settings -> Design area and select your newly added custom theme and/or layout folders in the drop down boxes.

That is it! Your store will now look first in your custom child theme folder and next to the latest files in the main plugin. To override any files you should first copy the file you are editing to your custom theme folder and make your corrections there (custom changes should be in the wp-easycart-data folder).