Divi is a great way to build websites visually without code. This is why a lot of people use it and why Divi has over 600,000 customers using its page builder and theme.
One of the cool things about Divi, is that you can use it to build a custom WooCommerce product page visually.
This is perfect for shop owners who want to be able to control the design of their product page, but aren’t coders. In this tutorial I will show you how to start building a custom WooCommerce product page with Divi, and walk you through step by step how to edit each part of the page.
Activate Divi Visual Builder on a product page
I’m going to assume you already have WooCommerce and Divi Builder installed on your website, if you don’t go ahead and do that before following along to this tutorial.
With that being said, the first thing you need to do is open up a product page then click enable Visual Builder.
Once you do this, you will be able to edit the WooCommerce single product template using the Divi Visual Builder.
Customizing the product page
Now that we have the Divi Visual Builder open on the WooCommerce product page, it’s time to customize it. Let’s start with the add to basket notice.
Divi refers to the different parts of the WooCommerce product template as modules, so to edit a particular part of the page you need to hover over it until you can access the Module Settings button, which will display a screen like the one shown below.
Once the module settings box is open, you are free to customize as you see fit. I would like the background color to be grey to match the rest of the starter theme I’m using. To do this, we need to click on the Content tab then background where it is possible to insert a new background color.
With a grey background we will need to change the text color, font size and font family which can be done by going to the Design tab and changing the color of the text. The button design styles are edited by scrolling down within the Design tab to the button section.
Altering the sale badge
Working logically down the page, next I will show you how to alter the Sale badge. Hover over the product image until you see the grey Module Settings option pop up. Click into the Module Settings then navigate to Design > Sale Badge Text.
In my design, I’ve set the background to black and changed the font of the text to Source Sans Pro to match the rest of my design.
Customizing the title, price and add to cart button
As before, to customize these parts of the single product template, hover over the part in question and wait for the Module Settings option to appear.
The title, price and add to basket sections each have their own Module Settings, so you will need to edit them each individually.
I changed the font family and font size for each block of text, altered the color of the Fields background and also changed the color of the button background, border and text.
Divi WooCommerce Tabs module
The Divi WooCommerce tabs module looks fine to me, so on this section I just decided to change the font family so it was using Source Sans pro like the rest of my starter design.
If you hover over the Module Settings (make sure you edit the module, not the row) you will have the option to enable or disable tab content and customize the design of most of what’s going on here.
Divi Related Products module
Finally let’s customize related products a little. Perhaps you stock a shop with luxury products and the focus is not on a lots of products, but highlighting a few key products.
In which case, you might want to only show 1 or 2 related products. To edit the amount of related products that show, open the Module Settings and within Content update Product Count and Column Layout to 2.
To ensure design consistency, you’ll also want to make sure the Sale badge matches the design of the badge customized earlier, so you can style that in the same way, by clicking on Design then Sale Badge Text.
Make sure to save your design to the Divi Library once you are complete so that you can apply it to your product pages.
