fbpx
customize the woocommerce product page in divi

How to Customize the WooCommerce Product Page in Divi

Do you use Divi and want to edit your product page to increase your conversion rates? You’ve come to the right place! In this guide, we’ll show you different ways to customize the WooCommerce product page in Divi.

WooCommerce is the best eCommerce tool out there. The right plugins and an optimized WordPress theme is the first step to having a successful WooCommerce shop. But that’s not enough to have a successful business. To take your store to the next level, you should customize the most important sections. We’ve already seen how to edit the shop page and the checkout page, so today we’ll show you how to customize the WooCommerce product page in Divi.

Why Customize the WooCommerce Product Page?

The product page is where you display the items you sell in your store. It can make or break your business so you must take the time to optimize it to increase your conversion rates.

By default, the WooCommerce plugin comes with a custom product page template. So whether you are using a simple theme like GeneratePress or a complex one like Avada, the elements and the design of the product page will be the same. That’s why if you want to make an impression on your customers, you should customize the default WooCommerce product page.

Changing the colors and the elements of the product page is a good start but there’s a lot more you can do. One option is to create a new product page template with a custom design. With a bit of PHP, HTML, and CSS you can completely redesign your product page. However, if you use Divi, there’s a much better option.

The Divi theme comes with its own custom page builder called Divi Builder. It allows you to easily customize the WooCommerce product page and every inch of your site without writing a single line of code. Let’s have a closer look at how to do it.

How to Customize the WooCommerce Product Page in Divi

For this demonstration, we’ll use the Divi Builder plugin to make all the changes to our product page. Before you start, make sure you have Divi with the Divi Builder installed on your site. 

customize the woocommerce product page in divi - divi shop

Enable the Visual Editor

To start customizing your WooCommerce product page in Divi with Divi Builder, open any product page that you want to edit. Once the page opens, you will see a button called Enable Visual Editor on the admin bar. Click it to turn on the Divi Builder.

enable divi builder plugin

Now that you have enabled Divi’s visual editor, you will be able to select any module on that page and edit it. To customize your current template, you can simply edit the existing modules or add new ones. In the modules section, you will see the WooCommerce based modules such as:

  • Add to cart
  • Additional info
  • Breadcrumb
  • Cart notice
  • Description
  • Gallery
  • Images
  • Meta
  • Price
  • Rating
  • Related Product
  • Reviews
  • Stock
  • Tabs
  • Title
  • Upsell

WooCommerce modules

You can add any of these modules to your page and make it more user-friendly by simply clicking it. On top of that, the latest version of the Divi builder works extremely well with WooCommerce so you can customize any modules with ease. Let’s have a look at some of the things you can edit.

1. Display or Hide Reviews

Remove star rating from divi shop

Let’s start with something simple. As you can see above, you can easily display or hide the star rating feature and turn off the customer review count. Simply click the review element and then press the Settings icon. Then go to the Elements section and you’ll have the option to display or hide the star rating and the customer reviews count.

To create trust among your online customers, we recommend you display both the star rating and the reviews on the product page. 

2. Gallery Modification

It’s no secret that a picture is worth a thousand words. That’s why to boost your conversion rates, it’s a good idea to add a product gallery to your product pages. WooCommerce includes this feature by default, so all you need to do is upload the images to the product page or choose them from the media page.

WooCommerce product gallery

Once you have updated the product page with your images, it will look like this:

woocommerce gallery

If for some reason you only want to display one image of each product, with the Divi Builder you can hide the gallery of any product. Simply click on the gallery, press the Settings icon, go to Elements and you’ll have the option to disable the gallery.

customize the woocommerce product page in divi - disable gallery

Additionally, you can hide the featured image and the sales badge. Considering how important images are when selling, we recommend you add at least 3-4 pictures of each of your products.

3. Featured Image Modification

Another interesting way to customize the WooCommerce product page in Divi is to edit the featured image. First impressions matter so you should choose an attractive feature image for your product. This image will also be visible on the shop archive page. 

When you open the featured image options using the Divi builder, you will be able to change the featured image and the sale badge.

customize the woocommerce product page in divi - featured image

As we mentioned before, we recommend you display attractive featured images as they can have a great impact on your conversion rates.

4. Add to Cart Button Modification

To add products to the cart, users need to click the Add to cart button. WooCommerce comes with a quantity field with the Add to cart button by default so you don’t need to create a button manually. In this section, we are going to show you how you can modify the Add to cart button with the Divi builder.

Under the Elements section, you will see two main options.

  • Quantity field
  • Stock

If you want to give the user the choice to select the product quantity leave the quantity field as it is. However, if you sell online courses, for example, you may want to disable the quantity option to remove noise from the product page.

customize the woocommerce product page in divi - add to cart

As you can see, once we have turned off the quantity field, the field will disappear. On this product page, we don’t have an option to see the stock option but if you display the stock on your site, you can enable or disable it in the same way.

5. Apply changes to related Products

Showing shoppers related products is a great way to increase your sales. Usually, WooCommerce displays related products based on the item’s primary category by default. However, if your theme or template doesn’t display related products, we have a solution for you. Let’s see how you can customize the product page and add a new row with related elements with Divi.

First, add a new row to the page. For this tutorial, we’ll add a single row but you can choose the style that better suits your store.

customize the woocommerce product page in divi - add a new row

After that, add the WooCommerce related product module to the row as shown below.

add related products

You will see that a related product section will be added to the page. Then, you can customize the layout and color.

If you’re not displaying related products, we recommend you try it out. They’re easy to set up and can help you boost your sales.

6. Add a Toggle

Toggles are an excellent way to display information on your product page while keeping it clean. In Divi, you can add a toggle using the Toggle module. In this section, we will show how to add a toggle module below the product description.

Let’s start by hovering over the product description and clicking the + button. Then, look for Toggle in the search bar and open the toggle module.

add divi module

To add the toggle, you need two main things.

  • Title
  • Body

For this demonstration, we will use the product name as the toggle title and the product description as the toggle body. To do this, simply click on the database icon on the right and you will see different types of content in the database. For the title, we’ll choose the Product/Archive title as the heading but you can select the type of content that best matches your needs.

add product title using divi

Now let’s do the same for the body. Press the database icon and choose the Product Description option from the menu.

edit product body

Once you save this, you will see a simple toggle module on your product page that users can press to see more information about the product.

toggle option

Divi also allows you to add other custom elements such as headings and descriptions as well as fonts, colors, and so on. We recommend you play around and customize your product page with the toggles.

WooCommerce Product Page Pro-Tip

Before concluding this guide, we have a quick tip for you.

Update The Theme And Plugin Regularly

To make sure you always have access to the latest features that Divi has to offer, we highly recommend you keep your Divi theme, Divi builder plugin, and WordPress core updated to the latest stable version available.

The easiest way to do that is to turn on the automatic updates from the Divi theme panel.

divi theme pupdates

All you need to enter is your Elegant Themes Username and the API key that you can find in your Elegant Themes account’s dashboard. Once you have entered those, save the changes and you will receive automatic updates.

Site-wide Usage

With the new Divi Builder modules, you will be able to add sections and customize any of your pages or posts. All you need to do is enable the visual editor, add the elements you want, and select the modules you want to use. For example, if you are writing a custom review of your product, consider adding an Add to cart button to the review post so that users can access it straight away.

Bonus: Other methods to edit WooCommerce product page

If you’re looking for other ways to customize your product page, have a look at this guide where you’ll learn how to use plugins, page builders, and code snippets to edit your product page.  

Conclusion

In summary, customizing the WooCommerce product page with Divi can help you boost your sales and increase your conversion rates. The good news is that you can do it without writing a single line of code.

With Divi Builder, you can easily edit the product page on your store without any additional page builder plugins. In this guide, we’ve shown you how to display or hide reviews, featured images, and image galleries, and how to customize the Add to cart button and the related products section. These are just some of the things you can do so we encourage you to play around with the Divi Builder and make other modifications.

The drag and drop page building experience will help you easily customize every inch of your store even if you don’t have coding skills.

What changes have you made to your store using Divi? Did you have any issues following our tutorial? Let us know in the comments section below!

Hello!

Click one of our representatives below to chat on Telegram or send us an email to [email protected]

How can I help you?