Designing in EasyCart is meant to be simple and intuitive via the design settings. 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.

 

Video Guide – Basic Customization with EasyCart

Learn to add basic customization such as font changes, color changes, and custom CSS changes as well as column and design template choices in this basic customization demonstration.
View All Videos Here

 

Design Settings

Font Selection
You can choose from a wide variety of google fonts to match your sites look and need. These will apply to EasyCart pages.

Display Rounded Corners
Displaying rounded corners on buttons and text items, or disable for a more square appearance.

Enable Live Design Editor
If you have a theme conflict, this allows you to turn off the ‘white gear’ live design editor on the front end. 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.

Enable 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.

Enable Match Store 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.

Admin Color
Select what color you wish for the WordPress admin area. This option is also available in the top right corner when you are working within the WordPress administrative tool.

Invert Colors
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 & checkout 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 Display 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.

Product Hover Type
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.

Product Image Style
This effect adds a border or shadow to the entire product when hovered over.

Enable 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.

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.

Use Dynamic Image Heights (Recommended in most situations)
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.

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.

Special Tip
We recommend users always pre-process images and their heights/widths to a uniform and consistent size. Whether you choose a nice clear image size of 1000×1000 pixels or 800×900 pixels, we recommend you stay consistent and crop all images to the same proportions and sizes using a photo editor. This will provide a consistent product grid and a consistent product details image display effect.

Advanced 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).