Upon installation, WooCommerce creates some necessary pages, including the Shop page which you can access by going to yoursite.com/shop. The page is used to display your product feed. Divi Builder allows you to create a custom WooCommerce Shop page whereby you can add elements to your liking, other than the product feed. This post will show you how.
In case you are new to Divi Builder. It is the default page builder of the Divi theme. Divi Builder is also available as a standalone plugin. In other words, you can also install Divi Builder on other themes outside the Divi theme if you want it. Divi Builder comes with a WooCommerce builder that allows you to create custom WooCommerce pages, including the Shop. No need to deal with code. You can create the custom Shop page using the visual editor of Divi Builder.
How to Create a Custom WooCommerce Shop Page Using Divi Builder
Before getting started, make sure you have installed the Divi theme (or Divi Builder plugin if you prefer to use it on another theme). You can get Divi on the official website of Elegant Themes (the developer of Divi).
Once you are ready, go to Divi -> Theme Builder on your WordPress dashboard. Add a new template by clicking the plus button. Select Shop on the WooCommerce Pages block and click the Create Template button.
Once the template is added, click Add Custom Body and select Build Custom Body.
On the appearing dialog, you can select the leftmost option (BUILD FROM SCRATCH). Click the Start Building button to start creating the shop page.
Before adding a module, you will be asked to add a row. Simply select a row and then select the Shop module. You can read our previous article to learn more about how to work with a row in Divi Builder.
As you can see, the Shop module will automatically display your products. By default, it displays the latest products. You can change the default feed from the Content block under the Content tab on the settings panel. From this block, you can also set the number of products to be displayed on the feed, the number of columns, and product order. One thing. Since you want to create a custom Shop page, you don’t need to enable the Use Current Page option. Just leave it default.
If you want to enable the pagination, you can open the Elements block under the Content tab on the settings panel. Simply enable the Show Pagination option.
Customizing the Shop Module
Once you are done making the basic settings on the Content tab on the settings panel, you can go to the Design tab to further customize the Shop module. From this tab, you can style up every single component of the Shop module such as star rating, price, sale badge, and so on. From this tab, you can also set the product image size, border radius of the product image, entrance animation, and so on. You can simply open each block on the tab and play around with the available options. Make sure to click the green checklist button every time you are done making new changes.
Once you are done working with the Shop module, you can add other modules. There about 38 modules offered by Divi Builder in total. You can either add other modules to the same column as the Shop module above or to the different columns according to your design concept. It’s totally your choice.
Once you are done editing the page, you can click the Save button on the bottom-right corner to save the changes, followed by the X button on the top-right corner to exit the Divi Builder editor.
After exiting the Divi Builder, you will be taken back to the Theme Builder page. Click the Save Changes button to apply the custom Shop page you have just created.
To edit the custom shop page, you can simply click the pencil icon on the custom shop page.
Creating a Custom Shop Page from a Premade Template
If you want to save time, you can create a custom Shop page from a premade layout instead of from scratch. Divi Builder offers some premade Shop page layouts you can make use of. Creating a custom Shop page from a premade layout can also be a great option if you have no idea about the design of the shop page you want to create.
First, you can go to the Divi -> Theme Builder on your WordPress dashboard and add a new template by clicking the plus button. Select Shop on the WooCommerce Pages block and click the Create Template button to start creating the template. Once the template is added, click the Add Custom Body button and select Add From Library.
Select a layout pack that has a Shop page layout. One of the layout packs that has a Shop page layout is Coffee Shop. Click the layout pack to view the page layouts and click the Shop page. Click the Use This Layout button to import it to the Divi Builder editor.
Click the Save Changes button to apply the custom Shop page. To edit the Shop page, you can click the pencil button to open the page in the Divi Builder editor.
The Bottom Line
WooCommerce is the first option to create an e-commerce website with WordPress. It is free and fully customizable. Even if you have no programming skills, you can create a fully customized e-commerce website using WooCommerce thanks to plugins like Divi Builder. You can use Divi Builder to create a custom WooCommerce Shop page using its visual editor. In addition, you can also use Divi Builder to create other custom WooCommerce pages like checkout page, cart page, single product page, and so on.
2 thoughts on “How to Create a Custom WooCommerce Shop Page Using Divi Builder”
Yes, I agree with you Robert. I need to completely customise how categories and products display, where the variants show and the additional information is displayed (different order than what WordPress throws).
One of the main issues with these Shop tutorials is the very basic limitations of the modules. At best you can only show the title, an image and some sort of description. .But what if you need to display more information such as might be found in a custom field or taxonomy such a brand or a musicians name?