[Top] 128 Build WooCommerce Shop Layout – Documentation

Learn how to build custom shop layout using Divi Builder, starting from WooCommerce Builder 2.1, you can customize the shop page like never before.

Before we get started, there is a very important note to keep in mind; the shop page – according to WooCommerce Docs – “is a placeholder for a post type archive for products. It may render differently than other pages in your install.”

Editing this page from the back-end will cause issues especially with the products search results page. So, to save you some time, keep this page empty, don’t add anything to the content area of the shop editing page in the backend.

Divi Library will be the place to build a custom layout for the shop page, – again – not the shop editing page.

Use a pre-built layout

1- We provide some free awesome layouts built to save you some time and get you started right away. You can download the free layouts from here.

2- To import the layouts, go to Divi Library -> click Import & Export at the top of the page -> Import tab and select the .json file you download it from the link above.

3- Now, Go to the plugin settings page “Wc Builder” -> Archive & Shop tab -> Shop Page Layout and select the layout you want to be used for the shop page.

Done!

Build a custom layout

Building your own layout is very simple just like any other Divi layout. If you don’t know how to use Divi Builder, read the official documentation here.

You can build the layout in Divi Library or the Archive Builder. If you want to build it from Divi Library, go to Divi -> Divi Library -> Add New -> Give it a name, let’s say “Shop Layout” and make the type as a layout. You can use the back-end builder or use the visual builder for a better experience.

If you want to build the layout from the Archive Builder, go to Wc Builder -> Archive Builder -> Add New.

Basic elements to add to your shop layout:

1- Woo Page title module.

Usually, the shop page’s title is “Shop”, no matter what you call your shop page, the Woo Page title module will display it as it is. You don’t have to use this module, you can use a text module and add a custom title to your page.

2- Woo Breadcrumb module.

The breadcrumb module indicates the current page’s location, usually, it’ll be something like that “Home / Shop”, this module is not required.

3- Woo Notices module.

This is a very important module to add to every WooCommerce layout you build using the WooCommerce Builder plugin. This module displays a variety of messages from WooCommerce like when a product is added to the cart or there is no enough stock of a specific product and so on.

You can place this module anywhere you want but it is recommended to add it to the top of the layout so it’s very obvious for your clients.

4- Woo Archive Products module.

The most important part of this shop layout is the products list! This Woo Archive module will take care of displaying your shop products with sorting options, pagination, columns number and more.

5- Woo Products Search module.

This is a pretty nice addition to the plugin in version 2.1, this module adds a search box to your page to search products, it’s very helpful if you have tons of products and want to make it easy for your clients to get what they want. It is not required to use this module but it is a nice feature to have.

After adding these modules, feel free to use any other Divi built-in module you want depending on your idea.

Finish building your layout and go to the plugin settings page “Wc Builder” -> Archive & Shop tab -> Shop Page Layout and select the layout you just built.

Done!