The shop page is the page that displays your recent products from all of the product categories. When you install WooCommerce for the first time, WooCommerce creates that page under the admin dashboard -> Pages.
Before you start
According to WooCommerce’s documentation, this page is “a placeholder for a post type archive for products” and “it does not require any content“.
So, before we start here, make sure you have the following:
1- An empty page ( has no content at all ) and don’t even activate Divi Builder on it in the back-end, keep the WordPress default editor active whether it is the classic editor or Gutenberg.
2- Select that page as the “Shop page” under WooCommerce -> Products tab -> Shop page.
Now, you are ready to build a layout for this page.
Remember! Keep the page empty on the back-end and don’t even activate Divi builder on the page because this will hide all the products. Divi Library is the place to build a layout for the shop page.
This is just how WooCommerce works with Divi.
Build the layout
Before that, you must know the basics of using Divi Builder, you can read this article as a start and you can always read Divi’s own documentation then, follow this post.
Get started
1- Go to your admin dashboard -> Divi -> Divi Library.
2- At the very top, click “Add new,” a new layout popup will open. Here you can set the layout name and the layout type.
You can name the layout whatever you want but make sure you select “Layout” as the layout type. And then, click the “Submit” button.
3- Divi Builder will open, you can use the back-end builder or the front-end build, it’s completely up to you.
Now, you have access to all Divi’s own modules and our custom modules for WooCommerce. Design your page with the sections and columns structure as you desire just like building any other Divi layout.
But for the shop products and other data like the page title and the breadcrumb to be displayed on the front-end, you will need to add some of our custom modules.
The shop modules
The Shop modules are the same as the archive modules because the shop page is basically another archive page just like categories and tags.
This is a list of the most important modules you need to use on shop layout.
1- Woo Notices
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.
2- Woo Page Title
This module will display the page title. You don’t have to use this module, you can use a text module and add a custom title to your page.
3- Woo Breadcrumb
The breadcrumb module indicates the current page’s location, usually, it’ll be something like that “Home / Current Page”, this module is not required.
4- Woo Archive Products
The most important part of the shop layout is the products list! This Woo Archive module will take care of displaying the current products with sorting options, pagination, columns number and more.
5- Woo Products Search
The module adds a search box to your page to search for products, it’s very helpful if you have a lot 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.
Apply the layout to the shop page
After finishing the layout, you will need to apply it to your shop page. To do that, go to your WordPress admin dashboard -> Wc Builder -> Shop & Archive tab -> Shop Page Layout.
Select the layout you just created from the drop-down menu and save the changes.