Creating a WooCommerce product sheet template with Divi is finally possible thanks to two features recently introduced: the WooCommerce Builder and the Theme Builder.

Thanks to these two features you will be able to create theme templates and assign them to page templates on your site.

So, in a few clicks, you will change the appearance of your product sheets, whether you have 1 or 1000!!!!

In this article, I'm not going to explain to you how to create an online store with WooCommercemy ebook-training "WooCommerce: the Guide". is here for that. I recommend it if you want to add a shop to your showcase site and you don't know how to do it...

So in this article, we will focus on the product sheet itself and see what possibilities Divi offers.

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Can we act on an existing WooCommerce store?

If you set up an online store on a site WordPress using Divi 4.0 today, the question does not arise....

On the other hand, if you already have a store with dozens or hundreds of products, I understand that you are reluctant to consider update Divi.

Don't worry, you can easily update Divi and start enjoying its new features.

And this is what we will see in the rest of this article....

2 - Create a WooCommerce product sheet

If you have just installed and configured WooCommerceyou can create your first product by going to the "Products" tab. All you have to do is click on "Create a Product".

fiche produit WooCommerce
Create a WooCommerce product sheet

If you already have a WooCommerce store, this tab will list all your existing products...

Also to be read: how to customize the WooCommerce shop page with the Divi Theme Builder?

2.1 - Product sheet with the default WordPress editor

This is what your product sheet looks like in the back office:

Fiche produit en back-office
Back office product sheet

In this editor (classic/default WordPress editor), you will need to fill in all the information for your product:

  1. Enter the title of your product.
  2. Write a so-called "long" description.
  3. Fill in all the fields necessary for the sale: price, product type, stock, taxes, etc.
  4. Write a so-called "short" description.
  5. Add the main product image.
  6. Add more images to create the product image gallery (optional).
  7. Assign a category to your product.
  8. Choose the page template: with or without sidebar. This action becomes optional because we will build the design of this sheet using the Builder Theme.
  9. Publish your product.

At this point, here is what your front-end product sheet looks like:

Apparence produit en front-end
Appearance of the product sheet (without customization)

This site is "blank", it has not been customized and the design presented is the basic one of Divi.

It's not very glamorous, is it?

2.2 - Product sheet with the Divi Builder

Still from the back office, if you click on the purple button "Use the Divi generator"here is what appears:

Produit back-office : Divi Builder actif
Back office product: Active Divi Builder

We then discover the former Divi Builder, the one who was available in the back office

By using the "drag & drop" (drag and drop), you can easily reorganize the structure of your WooCommerce product sheet.

You can also open the settings of each module in order to customize them...

Note: for now, the changes you make in this product sheet will only appear within it. If you use this method, you will then have to repeat the design for each of your product sheets. This would be counterproductive....

2.3 - Product sheet with the Visual Builder

If you click on the button "Building on the front-end"you will be able to edit your product sheet in visual mode.

Produit : Visual Builder actif
Product sheet : Active Visual Builder

It's still better, isn't it?

But this is not enough to assign this design to all your product sheets. With this method, again, you will always have to repeat the design for each product....

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

3 - The Divi modules used within a product sheet

A basic product sheet is composed of various "mandatory" - or rather necessary - elements such as the price or the add to basket button for example. Other elements may become optional if you decide to do so...

Divi modules constituant une fiche produit

In fact, as you can see from this capture, most of the WooCommerce Builder modules are used within a product sheet. In this one, we find:

  1. Woo Breadcrumb
  2. Woo Cart Notice Notice
  3. Woo Images
  4. Woo Title
  5. Woo Rating
  6. Woo Price
  7. Woo Description
  8. Woo Add To Cart
  9. Woo Meta
  10. Woo Tabs
  11. Woo Upsell
  12. Woo Related Product

Other modules exist but do not appear here because this sheet does not require it. This is often the case for dematerialized products (no stock) or for products that do not yet have an opinion (Woo Reviews) for example:

  • Woo Stock
  • Woo Reviews
  • Woo Additional Info
  • Woo Gallery

So if you are building the layout of your product sheet from scratch, be careful not to delete some important modules.

4 - Create a template for all your product sheets

This is a feature that will delight most owners of a WooCommerce site with Divi: the ability to create a template applicable to all (or not) of the store's products (those already published and those to come).

The idea is not to build the design, product by product, as seen in the previous chapters, but to build it once and for all and save it as a "model".

To do this, you just need to create a theme template from the Theme Builder tab.

Template de Theme "All Produits"
Template "All Products": applies to all product sheets in your shop

By clicking on the icon " + " Add New Templateyou will just have to assign it to the option "All Products".

This theme template will act by default on all the product sheets of your shop.

In absolute terms, the addition of a Global Header and a Global Footer is optional. What really interests us here is to add a "Custom Body" and configure it only once, so that it applies to all product sheets.

When you edit this Custom Body, you will be in the Visual Builder environment and you can add sections, lines and modules, as you would when building a page layout.

But there are several things to know:

4.1 - Using WooCommerce modules to build the model

You build your product sheet so you can use the WooCommerce modules provided by Divi....

Module Woo Price
Insertion of a "Woo Price" module but the procedure is similar for the other modules
  1. Insert a Woo module....
  2. In the case of the Woo Price module, a "fictitious" price appears.
  3. Choose "This Product": important!
  4. Change the style: color, text size, shadow, animation etc.
  5. Add advanced settings if necessary.
  6. Save.

When you insert the Woo modules, choose "This Product".

"This Product" allows you to call up the information of the displayed product. So no matter what product sheet you are on, the price will vary according to the information entered when it was created (chapter 2.1 of this article).

4.2 - Using dynamic content

In a product master record, you can also add other Divi modules Text, image, etc.

utiliser le contenu dynamique

Moreover, some modules become interesting if you use them to display "dynamic content".

  1. Add a Text module
  2. Click on the "Use dynamic content" icon
  3. Select the dynamic content you want to display. In the screenshot, this is the "Post Categories".
  4. This will display the categories assigned to each product.

Learn more about dynamic content.

4.3 - The role of the Post Content module in the product sheet

module Post Content dans la fiche produit WooCommerce

As you can see, most WooCommerce modules are essential. But what is the purpose of the Post Content modulethat has appeared since version 4.0 of Divi?

If you insert it, your product sheet will display the "long description" (tablet n°2 of chapter 2.1 of this article).

This long description uses a classic text editor in which you can add text and images.

5 - Create a model based on product categories

In the previous chapter, the design of all the product sheets in the shop was configured.

However, you are not required to use the same design for all your products. You could create several models (still from the Theme Builder) and assign them to certain product types.

You can create layouts based on product categories, for example.

Template "Produits in Specific Categories De Produits"
Template "Products in Specific Categories De Produits": only applies to product sheets in this category.

In the above capture, one design was assigned to the category named "Traditional Cooking" and another to the category "Light Cooking".

The choice of template assignment is made when creating it, but you can change this using the template settings (gearwheel icon).

custom Theme Builder Category
Different product sheet according to the selected category.

In this case, products classified in category "A" will look different from those classified in category "B".

6 - Other options are available

When creating theme templates for your product sheet, you have various options: not only "All Products" and "Products in Specific Product Categories"...

modèles de produits
Select product models to create the design

You will be able to create product sheet designs based on labels, specific (unique) products, product archive page etc.

To get started with Divi, discover all the articles to start serenely!

WooCommerce Fiche Produit
WooCommerce Produit

Pin It on Pinterest

Shares
Share This