How to Configure WooCommerce for Layers

How To  Layers User Guide  Last Updated: Time to Read: 3 minutes

WooCommerce defines a set of templates for displaying your products, including how the image, price, additional info and so on are arranged. Layers simply provides simple styling to help these layouts conform to the Layers theme and framework for a more unified look.

To learn how best to setup WooCommerce you can view this tutorial on Treehouse.

How you configure WooCommerce, and which WooCommerce extensions you use, can affect how your catalog and single products look in Layers, requiring specific settings and in some cases, additional custom styling to fit the overall design of your site. Below are some basic settings we recommend for WooCommerce to work best with your Layers setup.

These settings in the customizer allow you to choose whether to show or hide the Shop Sidebar on your catalog and product pages.

  1. Go to LayersCustomize
  2. Browse to your shop or product page in the preview panel.
  3. Click on WooCommerce to expand the panel
  4. Choose the Left, Right, both or no checkboxes to set the layout of the catalog and single product views
  5. If you enabled a sidebar: Click the Back arrow in the customizer nav
    • backarrow
  6. Click Edit Layout and expand the Shop Sidebar to add WooCommerce or standard sidebar widgets. Do not put Layers Builder widgets in this sidebar.
  7. Click Save & PUblish when done

Depending on the sidebar layout, you will notice the size of your images in the product column changes. The maximum width and the crop of these images is determined by your WooCommerce Product Image settings:

  1. Return to the WordPress admin and click WooCommerceSettings
  2. Click the Products tab, then click the Display link
  3. Scroll to the Products section at the bottom
  • Catalog Images: Refers to the size of images in your shop, product category archives and WooCommerce shortcodes.
  • Single Product Image: Refers to the size of the product image on the Product post
  • Product Thumbnails: Refers to the size of the product image in WooCommerce widgets and anywhere else the product thumb is specifically used.

Because Layers is a responsive theme that adapts to the size of the viewer’s browser window, the space for these images varies and is a specific percentage of the total width of the content area. The below values are based on the maximum width the image will display, depending on your sidebar layout choice. Enter the values corresponding to your chosen layout into the Width fields of your Product Image settings.

Product Lists

One Sidebar (Only Left or Right Selected)

  • Catalog Images  Width = 238

Both Sidebars

  • Catalog Images  Width = 157

No Sidebar

  • Catalog Images  Width = 320

Single Products

One Sidebar (Only Left or Right Selected)

  • Single Product Image Width = 365

Both Sidebars

  • Single Product Image Width = 240

No Sidebar on Single Product

  • Single Product Image Width = 490

Product Thumbnails

This setting can be set to 100 for any layout choice since it is not affected by the sidebars.

The height is up to you depending on the kind of product images you are using, as well as the crop.

Hard crop will crop the bottom off your image at the height you set. Unchecking hard crop will scale the image to the width entered above, regardless of the height.

We recommend using a uniform image size for all of your original product images and leaving the hard crop unchecked in these settings, especially for clothing shops. The subject should be centered and have some space around the edges of the photo to ensure it is not cut off by the crop or resizing.

Your originals must always be at least as wide as your single product image width setting.

Regenerate Your Images

If you had content in WooCommerce or WordPress previous to activating your theme, you must run the Regenerate Thumbnails plugin to re-create your theme images properly. See How to Regenerate Images to Fit Theme Templates

There are a ton of extensions out there that can enhance WooCommerce, from little things like cart labels to bigger things like product sliders.  We rolled the best of the most popular WooCommerce Customization Extensions into one Layers extension called StoreKit, which offers catalog and product layout customization, additional widgets, and a nifty menu cart. It is truly a must-have if you are serious about running a shop with WooCommerce+Layers, bringing the total cost of a site worth more than 1000$ to just $20!

Check out StoreKit here

To learn how best to setup WooCommerce take part in this online course on Treehouse.