Layers has built-in styling to support the wildly popular WooCommerce plugin, which is a free and full-scale eCommerce solution for WordPress. Running your own store has several major benefits over a hosted service:

• Significantly Lower Cost and no extra transaction fees or commissions.
• Full Control of Your Data
• Language/Locale/ Currency options
• Complete Customization
• Unlimited products, product attributes, categories, types and sources
• Just about any payment option supported

This tutorial covers the basics of how to setup a shop using WooCommerce with Layers, and how to customize it even further with the Layers StoreKit extension for a grand total cost of $20.

Before you Continue, Install WooCommerce:

Download WooCommerce

Why WooCommerce?

• WooCommerce is free and extremely feature-rich.
• There is a huge selection of free and premium plugins to help you with shop customization
• WooCommerce is professionally developed and maintained by experienced industry leaders.
• WooCommerce has a thriving community support system, knowledgebase and dedicated support option if you need hands-on help.
• Need more convincing? See what these experts have to say about it.

Download and install WooCommerce under Plugins → Add New by searching for “WooCommerce”. It will appear as WooCommerce – Excelling eCommerce. You can also download the plugin for manual install from the WooCommerce homepage.

Why StoreKit?

StoreKit is not required to get a shop running with Layers, but it does enhance setup and customization to a huge degree.

• StoreKit extends both Layers and WooCommerce with additional template and styling, Layers builder widgets and a huge number of customization options other plugins charge you between $40-70 for
• StoreKit works great with official WooCommerce extensions and most free 3rd party WooCommerce plugins
• StoreKit is developed and maintained by the Layers team, so you can be sure it will always be tested and compatible.
• StoreKit comes with dedicated support and is backed by the Layers Help website and community.

Download StoreKit from Layers.

1. Once WooCommerce is installed and activated, you will be redirected to the WooCommerce welcome page and a purple notice asking if you want to install the WooCommerce pages. Click Yes.
2. Go to Pages and you will see this created several pages for you such as Shop, Checkout, Cart and My Account. You do not need to edit or configure these, but make sure they are set to the Default page template so they pick up your Sidebar choice in the Customizer.
3. Go through How to Configure WooCommerce for Layers to setup the basics
4. That’s all you need to work on site setup for now, but you will need to configure the finer points of your business, such as personal info, currencies, shipping and taxes.

Install and Activate StoreKit. This linked guide also provides the basics on all the StoreKit features, which we will use in the Customization part of this tutorial.

The two most important factors for achieving a visually stunning and professional-looking online store is image quality and consistency. Like Photography sites, performance is also key, especially since eCommerce sites attract more mobile traffic.

In addition to the set of image copies WordPress generates on upload which are defined in Settings→ Media, WooCommerce also creates a set, which are defined by the dimensions you set in WooCommerce settings. Before loading any image content into WordPress, or configuring the site with existing content, be sure to review your theme’s image size information or use the basic Layers settings in How to Configure WooCommerce for Layers.

The following tips will help strike a good balance between quality and performance:

1. Ensure the subject, model or important bits of the product are centered in the photo, with ample space around the edges. This ensures the product is always represented well in any orientation, crop or photo size.
2. If taking your own clothing shots, do not use fancy filters or allow your models to cross their arms or hide parts of the item as this can lead to misrepresentation of color, fit or detail which frustrates your customers. If using editorial shots with filters as featured images for aesthetic reasons, always include at least one clear image of the item in your product gallery that features a neautral white balance and no filter.
3. Use the Regenerate Thumbnails plugin to optimize images that already exist in your Media Library if installing a new theme, or if you have changed your WooCommerce image size settings.
4. Always optimize photos through a batch-conversion or image-editing program such as Photoshop or Gimp (free app) prior to putting them on the web. Optimization can be as simple as resizing the photo to no larger than 1000 pixels on the longest side (or 1920px for slider backgrounds), and saving it as a copy at a web-friendly compression rate (typically an “8” in Photoshop or 80% compression).
5. Give your photos semantic file names. For example, silk-stripe-jumper_SS2014.jpg has a lot more SEO value than IMG435657.jpg. Semantic filenames help you find photos easier using the media library search function, and make file maintenance on your computer easier, too.
6. Upload images directly to the products galleries they belong to, and fill in the “Title,” “Alt Text,” and “Description.” These values not only make your photos look better-maintained when viewed in lightboxes or browser plugins, but aid in SEO and accessibility.

Product Details

At a minimum, you will need the following types of  details for each product:

• Make or Brand
• Models or Fabrics
• Colors
• Sizes
• Prices
• Stock Quantity

Additional details (not required):

• Weight
• Length/height

To begin click on Products → Categories

1. Add a new category by typing the name into the Name field. Add all your top-level categories first.
2. If this will be a sub-category of another category (such as Tops under a top-level category like “Women’s”), select it from the Parent drop-down.
3. If you would like to add some flair to your Category pages, add a short description here, which appears under the Category title at the top of the page when this category is viewed.
4. The Display Type determines the kind of archive this page shows by default. If it is a top-loevel category that will have SubCategories, you may wish to set this to Sub-Categories so it displays image links to those categories first. Default will use whatever your global setting is for your catalog.
5. Click the Thumbnail link to add a category image. We recommend these be at least 1000px wide and 300px tall.

Click Add New Product Category when complete, then repeat to add more categories.

The Product post type allows you to list and categorize your products, and ties in with the WooCommerce shopping cart and review system. For best results, add at least three products to test the theme, or load the WooCommerce demo content file.

Begin by going to to Products → Add Product.

Quick Setup Of Simple Products

These steps outline basic setup of a simple product:

1. Add a Product Name
2. Add a short bit of text to the post editor describing the product, if you wish
3. Under the Product Data section, enter an SKU(if tracking stock) and Regular Price
4. Enter your Inventory, Shipping, Linked Products(Upsells) and Attributes where needed
5. If your main post entry is long, enter a Product Short Description, which is just like a post Excerpt.
6. Click Set Product Image to upload or select a featured image
   • To add additional images to the post to display as thumbnails under the main image click Add Product Gallery Images
7. Add some product tags and select or create a Product Category
8. ClickPublish

Detailed Overview

Title

Add the product name in the Title field. Try to keep this short and sweet, as Google will cut off anything after 80 characters.

Body

Enter any copy or product information into the post editor. For best results, keep this brief and do not insert images here (you can insert a WordPress gallery if displaying swatches as long as the thumbnails are small). Attributes such as color, size, etc have a separate place explained below.

Product Image (Aka Featured Image)

Over on the right side of the new product post page, click Set Product Image, then clickUpload Files and Select Files to browse to your image and upload it. When finished, select the image and click the Set Product Image button in the lower-right. For details on adding featured images, see this article, or continue below:

Product Galleries

You may have additional images for your products, such as photos showing a different angle or color. The Product Gallery box is available on the lower-right of the product editor screen allowing you to upload multiple images, which in turn attaches them to the product. These images will display in a thumbnail grid in the Product Gallery box and can be rearranged in the Media Library by selecting Images Uploaded to this Post from the Medial Library tab menu and dragging and dropping them in the desired order.

Uploading Additional Images Using The Product Gallery

1. Click on Add product gallery images images under the Product Gallery box on the right side of the product editor
2. Select images or click Upload Files/ Select Files to browse to your images and upload them OR click the Media Library tab to add pre-existing images.
3. When complete, click each image to view the image details on the right.
   • Edit the image Title
   • Ensure Media File is selected in the Link To menu
4. Click Add Gallery in the lower-right to close the Media Library

Product Data

Below the Theme Options panel is the Product Data panel, where you can configure the product:

Simple products have no variations such as size or color. These should have the SKU and Regular Price filled in at a minimum. Your SKU is a unique ID for the item that makes it easier to manage your catalog, such as A-1 A-2 and so on.

• Check the Virtual box if your product has no shipping (typically used for services or digital products)
• Select the Downloadable box if your product is digital. You will provide a file or download link later.
• At a minimum, enter the Regular Price
• Select the Tax Status and Class based on your preferences.

Variable Products have multiple sizes, colors or other differences to choose from, but share the same overall style. These are used to keep your catalog tidy, rather than entering a single product post for every variation. Most of your products are Variable products. When selecting Variable Product, the only thing you need to enter on the General tab is the SKU.

Grouped Products

These allow you to create a collection of products under one “parent” item. Grouped products are great for creating products such as a digital album that has several individual tracks for sale which also allows for the purchase of the full (parent) album. This is explained in detail here.

Inventory

Here you can manage stock on individual items and it is recommended you enable this on all physical products.

For detailed help with managing stock, see WooCommerce: How to Manage Inventory and Stock

Shipping

Enter a weight, length and height for your item, if available. This is shown on the Product tabs when viewing products along with other attributes such as color, size, etc. If you are using a shipping method that looks at weight, a minimum value must be filled in on all products. You may change the weight unit on the Catalog tab in WooCommerce Options.

Linked Products

You can select specific products to appear on the related product section (Up-Sells) or Cart (Cross-Sells). This is helpful if you want to push special sales or promotions.

For detailed help with configuring upsells and cross-sells, see WooCommerce: Related Products, Upsells and Cross-sells

Attributes

This is where you select Color, Size an so on for the product if you have global attributes setup, or you can create a special attribute for just this product. Ensure Visible on Product Page and Used for Variations is checked if the user needs to be able to select these.

• If this is a variable product, separate each selection with the pipe | when adding new values. Example: Red | Blue | Black
• Check “Used for Variations” and then click Save attributes.
• To save some admin time, you can create these as Global attributes under Products →Attributes if you will be applying them to several products.

Variations

This is where the individual variation data is stored for each version of your product. To begin, select Create variations from all attributes and click Go

Each Variation can be edited separately to add things like stock amounts, sale prices and a variation image which is useful if you want the product featured image to change when the variation is selected. These images should also be added to the product image gallery if you also want them displayed as thumbnails below the featured image.

If all variations have the same retail price, you can select Set Regular Pricing from the main drop-down and add one price to be applied to all.

Advanced

Add specialized product notes (you would use this if an item has an especially long shipping time, for example) and to enable or disable reviews (enabled by default). Note that reviews can also be enabled or disabled using the traditional method just like enabling or disabling comments on posts.

Product Tags

This field is located on the right sidebar of the editor just above the Product Image (featured thumbnail). Tags are an alternative method of filtering or navigating products for your customers. You can preset tags under Products →Tags to help keep them consistent. Good examples of tags are colors in the product, materials or fabrics, make or manufacturer, style indicators (vintage, hip, modern, sleek etc), brands or cut (crew, boatneck, etc). Never duplicate your Product Categories as tags, you only need an identifier to be attached to the post one way.

You now have the foundations set for the structure of your shop and can begin planning out your navigation. For a detailed overview of creating custom menus in WordPress, see Layers: Create Your Menus. The following provides some advice on navigation structures that have been proven to work well.

Header Menus

Add Links to each of your main categories and then add each subcategory under them to create drop-down menus. If you have room, add the link for the My Account page to the bottom position and add View Order, Edit Profile and Logout links to the submenu position.

Footer Menus

Add links to a privacy policy or Terms page, your Contact page link, and My Account. If you prefer vertical menus, you can also add this to a Footer widget column using the Custom Menu widget and leave the Footer Menu position blank.

If you have an eCommerce child theme installed like Lace&Sole, you can skip this step by going to Layers → Add New Page and choosing the Preset layout to begin customization.

If you have StoreKit enabled with a different child theme or the Layers base theme, create a new Blank page and use the following recommended layout:

1. Slider : Full Width
2. Product Slider: 3 slides, one featured product each
3. Product Categories
4. Product List: Latest Products
5. Content Widget : Masonry images
6. Content Widget: Services blurbs
7. Contact Details & Maps

You can import this page using the StoreKit demo homepage file in the StoreKit Guide

Now for the fun part!

Go to Appearance→ Customize

1. Verify your desired menus are linked under the Site Settings → Navigation section
2. Configure StoreKit OR if you don’t have StoreKit, click on a shop page or category link in the preview pane, then expand the WooCommerce section and choose your Sidebar options
3. Click the back arrow in the Customizer menu and then expand Edit Layout
4. If you have enabled a Sidebar, you can expand its panel to add widgets. We recommend sticking to WooCommerce widgets here – do not add StoreKit or Layers widgets to this sidebar.

Recommended Sidebar Widgets:

• WooCommerce Product Categories
• WooCommerce Price Filter
• WooCommerce Product Search
• WooCommerce Recently Viewed

Positioning the Cart widget

If you are not using StoreKit, you should add the WooCommerce Cart to the shop Sidebar. If using StoreKit, add it to the “Mobile Sidebar”.

• WooCommerce Support
• Extending WooCommerce
• WooCommerce Tutorials