How to create a Divi WooCommerce product page template

If you want to add an online store on your Divi website, then going with WooCommerce is your best bet. It is a WordPress plugin that adds all the necessary bells and whistles to turn your website into a full-fledged eStore. It supports a custom post type for creating products, and also adds custom pages like – Cart, Checkout, Shop, and My Account, which are necessary for any online store.

The WooCommerce plugin is also compatible with almost every single WordPress theme out there – including Divi. As such, your theme’s design and styling seamlessly blend into the default WooCommerce pages.

But that being said, the default page layouts that you get with WooCommerce are very simplistic and lackluster, especially the product pages.

If you install WooCommerce on your Divi website, this is how your product page will look like by default:

Default Product Page Layout

As you can see, the product page looks very bland. And if you have a highly customized Divi website with complex layouts, lots of graphics, and animation effects, then this product page will look extremely out of place.

As such, for the purpose of this tutorial, we have put together a step-by-step guide on how to create a WooCommerce product page template in Divi. Using the Divi builder, you will get full control over the layout, allowing you to create a modern and captivating design for your product page. You will also be able to add tons of advanced modules, tweak the color scheme, change typography, and much more.

Create a WooCommerce product page template with Divi (From Scratch)

One of the best things about Divi is that it comes with literally hundreds of premade website demos and page layout templates. But unfortunately, there’s not even a single product page layout in the Divi layout library.

As such, in this guide, we will be creating a WooCommerce product page template using Divi from Scratch.

Now, if you have experience creating a single post layout using the Divi builder, then creating a product page template won’t be something foreign. In fact, it’s exactly like creating any regular single post layout with the main difference being that you will be using WooCommerce modules instead of regular ones.

Here’s a quick look at the product page template we will create in this tutorial:

Custom WooCommerce product page layout using Divi

As you can see, the product page template can be divided into three sections.

The first section is a simple title image welcoming users to the product page.

The second section uses a two-column layout to show the product image on the left side and all the product details and the “add to cart” button on the right side.

And finally, we have the third section which just shows an array of related products the customer might want to purchase.

As you can see, it’s still a simple product page but a lot more fancy-looking than what you get by default. If you have experience building single post layouts, then you should be able to create this page in no time. But in case you aren’t, don’t worry, as here is a detailed step-by-step guide on how to create a WooCommerce product page template using Divi:

Step 1: Set up a product page template

The first thing we need to do is create a new product page template in the Divi Theme Builder. By doing this, Divi will automatically know to apply this template design and layout for all your products – specific to the criteria you define.

To do this, log in to your WordPress backend dashboard, and from the lefthand sidebar, head to Divi>Theme Builder. Next, click on the “Add New Template” button.

Create a new theme template

Now, scroll down, and select what type of product page template you want to create.

Select Template Type

For the sake of this tutorial, we are going to select “All Products.” This means that the product page template we are designing here will apply to all products on our website.

However, as you can see from the available options, you can choose to create different templates specific to product categories and tags. You can even create separate page templates for “individual products” or the “product archive page.”

Now, after selecting the template type, click the “Add Custom Body” button to create the template body. Next, select the option – “Build Custom Body.” This is going to load the Divi Builder. Select the option “Build from scratch” and let’s create a WooCommerce product page template.

Add a custom body for the template

Step 2: Build the first section

For the first row, we are going to create a new title to welcome customers to the product page.

To do this, we are first going to need a one-column row. Next, we are going to add the “Woo Title” Divi module.

Create a Woo Title section

Now head into the Woo Title module settings, go to the Content tab, and set the Product option to “This Product.” That way, the product name will automatically update for whatever product is being viewed on the page.

Next, we want to add a header image. To do this, select the Section settings and go to the Background options. From here, click on the Add Background Image button. Now select the image you want to add from your Media Library.

Once done, head back into the Woo Title module settings and go to the Design tab, and then to Title Text. Here we are going to fix the Title Alignment to “Center” and then select a Title Text Color to match the background.

Here’s a GIF walkthrough of everything we have done:

Setup of product page title section

Once you are done here, it’s time to move on to the next step.

Step 3: Build the second section

Right below the right title row, we have a two-column row showcasing information about the products.

To do this, click on the “Add New Section” button, select “Regular” as the section type, and then select a “two-column” row.

Making the Second Section

Now, we are going to populate both columns with a lot of modules. As such, we have created a dedicated section showcasing how to add and tweak each module.

1. Set the product image

First, we want to set the product image module for the template.

To do this, we select the “Add New Module” button on the left column and search for “Woo Images.”

Now head into the Woo Images settings and under Product, set it to “This Product” so that it dynamically updates with the images of the product the page is showing.

Set the product image

And that’s it! On to the next module.

2. Add a cart notice

Next, we are going to add a “cart notice” to the product page. That way, when a customer adds the product to the cart, they are going to get a notice telling them that the product has been successfully added to the cart. It also gives them a button to “view cart.”

Now, to add this feature, we select the “Add New Module” button and search for “Woo Cart Notice.”

Add a cart notice

Remember: This area will only show up for users when they add the product to their cart.

3. Add breadcrumbs

Next, we want to add Breadcrumbs to our product page. This will help the users know how they ended up on the product page, and make the site more easily navigable.

To add breadcrumbs, select the “Add New Module” button and search for “Woo Breadcrumbs.” After adding it, go into the Woo Breadcrumbs module settings, move to the Design tab, and “Center” align it. You can also tweak its size if it looks a bit too small to read.

Add breadcrumbs

4. Add the product name

Right below the breadcrumbs, we want to show the name of the product.

To do this, we will need to add the “Woo Title” module here.

Once you have added the module, go into its settings, and then from the Design tab, change its alignment to “Center” and also tweak the text size to appear a bit bigger and easily visible.

Add product name

After doing this, we recommend adding a divider between the product name and breadcrumbs. This will give a cleaner appearance to your product page.

Now, to add a divider, hover your mouse over the “Woo Breadcrumbs” module and select the “Add New Module” button. Now search for the “Divider” module and click it. Once the divider is added, you need to tweak it.

To do this, open the Divider module settings, go into the Design tab, and from there change the divider size. We also changed its color to “black” to make it look a bit more professional.

Add a divider

5. Showcase product ratings

Next, we are going to show the product ratings right below the product name. To do this, we need to search and add the “Woo Rating” module like before.

Once done, go into the Woo Rating module settings and head into the Design tab. From there, go into “Star Rating” and pick the Star Rating color as purple. This will blend in with the Title image color, building a more consistent design. Next, change the Star Rating Alignment to “Center.”

After that, move to the “Text” section, and switch the text color to “purple” for consistency.

Showcase product ratings

Note: Ratings will only display if there are ratings available for the product.

6. Add product pricing

Under the ratings, we want to show the product pricing.

To do this, just select the “Woo Price” module and add it. Next, open the module settings, go to the Design tab, and then into the “Price Text” section. From here, change the color to “Purple” and the alignment to “Center.”

Add product pricing

And we are done.

7. Add product description

Now it’s time to add the product description.

You can do this by adding the “Woo Description” module. By default, it will show you the placeholder “Lorem ipsum” text, but it will dynamically update to the specific description of the product the page is showing. However, just to make sure, go to the Woo Description module settings and to the Content tab. From here, under Content, select Product as “The Product” and Description Type as “Description.”

Once done, head into the Design tab, select Text, and set the alignment to “Center.”

Add Product Description

And that completes setting up all the product information. As such, we will add a Divider module here. To do this, just duplicate the Divider module we created earlier and place it below the description text.

Add a divider

8. Add “Add to Cart” button

Finally, it’s now time to include the “Add to Cart” button on the product page.

For this, we have the “Woo Add to Cart” module. Add it into the layout and then head into its settings. Now go into the Design tab, and from there select the Text option, and fix it to “Center” Alignment. You can also change the text color, size, and style, but we will avoid that for this template.

Next, under the Design tab, go into the “Button” segment. From here we want to enable “Use Custom Style for Button.” Next, we are going to select “Purple” as the Button Text Color, just for the sake of design consistency.

Add “Add to Cart” button

And that’s it, we are done setting up the second section of our WooCommerce product page template.

Step 4: Build the third row

The third row of the product page is simply to hold a tray of related products.

To do this, hover your mouse over the “blue ‘+’ plus” button to add a new section. Select section style as “Regular” and select a single column-row. Once done, add the “Woo Related Product” module.

Now head into its settings, go to the “Content” tab, and then under the “Content” section, select the option “This Product” for Product and then set a “Column Layout.” This number indicates how many related products will show up in the area. For this tutorial, we are going to stick with “4 Columns.”

Next, heading into the “Design” tab, and select “Star Rating.” We will change its color to “purple.”

Add WooCommerce related products

And that’s it!

Step 5: Test your product page template

You have now successfully created a WooCommerce product page using Divi. It’s now time to test it out and see if everything is working correctly. But first, we need to save our template.

To do this, click on the “Purple 3-dot button” at the bottom center of the screen. Now, click the “Save” button inside the Divi editor. Once done, exit the Divi builder and you should land inside the Divi Theme Builder area in your WordPress Backend. Again click on the “Save Changes” button.

Your new product page template is now set up.

Save your product page template

Now it’s time to see if our new product page template is working.

Visit your website shop page, and open a product. See if it’s opening up in the new product page template we just designed. Also, add a product to your cart and see if you get the notification.

Product Page Preview

If everything checks out, then good job! You have successfully created your custom WooCommerce product page template using Divi.

Wrapping up

So this was our guide on how to create a WooCommerce product page template with Divi. We hope you found this useful and that it helped you in creating a better WooCommerce product page for your eStore.

As you can see, with Divi’s powerful modules and intuitive UI, it’s super easy to create a professional-looking design in no time. Furthermore, to keep the tutorial short, we only focused on particular settings. With the tons of different design settings and options, you get with each module, the possibilities are endless.