WooCommerce

Make and Make Builder has been designed to integrate smoothly with WooCommerce’s default shop and product templates, enabling you to create a website with a consistent design and an online shopping experience your customers will love.

With Make Plus, the integration is even deeper, with a dedicated section in the page builder, new style and layout options in the Customizer, and more.

Page builder section

When WooCommerce is enabled, you will see a brand new section available in the page builder called Products. This section will output a grid of products according to the criteria you specify. Check out the Products section documentation for more information.

Column widget areas

Besides the Products section, you can create other dynamic product layouts using another feature exclusive to Make Plus: Column widget areas.

WooCommerce comes with several widgets that will output lists of products, reviews, categories, or other features of the plugin. By converting one or more of a Columns section’s columns to widget areas, you can mix these features with text and image content to create an unlimited variety of dynamic shop layouts.

Layout settings

In Make, the visibility of the site header, site footer, left, and right sidebars is controlled on a per-view basis in the Customizer’s Content & Layout panel.

Normally, the WooCommerce shop page and product archives would be Archive views, individual products would be Posts, and utility pages like cart and checkout would be Pages.

With Make Plus, however, WooCommerce gets its own view sections. The Shop section controls the shop page, product archives, and utility pages, while the Products section controls individual products.

Shop sidebar

In addition to the more granular sidebar control, you can also choose to replace one of the sidebars in the Shop and/or Product views with a separate Shop sidebar. Once enabled, this sidebar can be customized with widgets the same as any other, via the Customizer.

To enable the Shop sidebar:

Navigate to the Customizer, Appearance → Customize.
Click on the Content & Layout panel, and find the Shop or Layout section in the left column.
Find the Shop sidebar location option. Choose Left sidebar or Right sidebar to use the Shop sidebar in its place, or Neither to disable the Shop sidebar for that view.
Make sure that the appropriate sidebar location is also enabled for that view (e.g. if Left sidebar is chosen, the Show left sidebar box under the Header, Footer, Sidebars heading should also be checked).
Click Save & Publish.

Image sizes

WooCommerce provides image dimension settings for catalog images, single product images, and product thumbnails. There are no hard and fast rules for what these should be set to for Make or Make Builder. A lot depends on how many sidebars you’re using and how many columns your products are displaying in.

Here are some suggested dimensions, as provided by a David, a Make Plus user:

Catalog Images for the Products section (full-width) – 500×500, hard crop. Exact sizes:

464×464 for 2 columns
279×279 for 3 columns
216×216 for 4 columns

Catalog Images for the WooCommerce Shop page and product archives, 4 columns by default:

137×137 – with sidebar
212×212 – without sidebar

Single Product Image – 500×500 (or 500×9999 for tall images). Exact sizes:

298×298 – with sidebar (or 298×9999 for tall images)
461×461 – without sidebar (or 461×9999 for tall images)

Product Thumbnails – 150×150, hard crop. Exact sizes:

92×92 – with sidebar
142×142 – without sidebar