How to create a WooCommerce product sheet template with Divi?

Updated on 12/11/2019 | Published on 26/10/2019 | 11 comments

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
WooCommerce Product Template Divi

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

11 Commentaires

  1. LC

    Mille merci encore pour ce tuto.
    J’ai suivi les étapes mais après je me suis rendu compte que (a priori, sauf erreur) je ne peux pas passer par le Theme Builder car sur chacune de mes pages, j’ai des trailers différents, des « vous aimerez peut-être » différents etc. Donc, en faisant le modèle, cela ne colle plus. J’ai l’impression qu’en chargeant mon modèle de page depuis la bibliothèque DIVI, je vais aussi vite.
    Par contre, j’ai hâte de voir vos astuces pour la page « boutique » ! (je patiente 🙂 )

  2. Lycia Diaz

    Merci LC !
    Effectivement, il faut que tu voies ce qui colle le mieux à ton projet. Enregistrer le layout est une bonne solution aussi, sauf si tu as beaucoup de produits et qu’un jour tu veux modifier un élément, tu devras rééditer chaque produit. L’avantage avec le template de thème c’est que tu peux modifier un petit élément sur toutes tes pages/produits à la fois. C’est un vrai gain de temps.
    Je ne veux pas dire de bêtises mais est-ce que les « vous aimerez peut-être » ne dépendent-ils pas de la fiche produit que tu crées dans le back-office ? Ce sont les related et upsell non ? Donc a priori, ils devraient être suivis avec la création du modèle dans le thème builder ??? Je ne suis pas sûre, à voir…
    Oui, la page boutique : semaine prochaine 😉
    Bon week-end 😉

  3. Jean-Luc

    Hello Lycia
    Merci pour ce tuto.
    Mais j’ai une question, si on crée un modèle pour l’ensemble des fiches produit, est-ce que je doit aussi utiliser le générateur DIVI dans chaque fiche ?
    Merci d’avance

  4. Lycia Diaz

    Salut Jean-Luc.
    Comme expliqué dans mon article, si tu crées un modèle de fiche produit via le thème builder, celui-ci récupèrera le contenu de tes fiches produit, peu importe avec quoi elles ont été faites : en natif ou avec le Visual Builder. Donc, c’est toi qui choisi.
    😉

  5. NERAUD

    Bonjour Lycia !
    Merci pour tout vos tutos…
    Existe t’il une possibilité « simple » d’afficher les produits dans la boutique selon un ordre précis, dériré… J’ai utilsé plusieurs méthode sans résultats…
    J’ai les dernières versions : WP / Divi / Woo
    Bien cordialement,

    Philippe

  6. Lycia Diaz

    Salut Neraud, je ne connais pas tes besoins exacts mais peut-être que tu as besoin d’une recherche à facette ? Regarde ça : https://wpgridbuilder.com/

  7. Eric Raymond

    Merci pour ce tuto !

    Je suis entrain de créer une boutique avec Woo pour la première fois. J’avais déjà une dizaine de produits avant de voir ton articles.

    Quand je crée un layout pour ma page produit et que je l’applique aux thème builder pour tous les produits bien je perds le contenu existant de mes pages.

    Même chose pour mes pages. J’ai déjà une dizaine de page créer et quand j’applique le layout au theme builder et que je sélection Pages bien tout le contenu de mes pages disparaîts.

    Comment fais-tu pour lui dire de garder le contenu ?

    Ensuite comment il faut faire pour éditer la page Catégorie des produits ? J’ai créé le layout pour la page produit mais j’aimerais créer un layout identique pour la page catégorie mais l’option visuel Builder n’est pas disponible.

    Merci pour ton aide !

  8. Lycia Diaz

    Salut Eric.
    Alors, si tu perds le contenu de tes pages, c’est certainement parce que tu as oublié d’insérer le module Publier un contenu : https://astucesdivi.com/module-post-content/
    Concernant la page de catégorie de produits, tu ne peux pas activer le visual Builder, c’est normal… par contre, tu peux créer le design de tes catégories directement dans le thème Builder ! Comme tu as fait pour le reste 😉

  9. Isableue

    Bonjour Lycia,
    Merci pour tous tes tutos !
    J’ai créé plusieurs templates pour mon site (articles, archives…) mais je bloque pour le template des produits. Chacune de mes fiches produit affiche une couleur différente en fonction de la couleur principale du produit.
    J’aimerais pouvoir choisir la couleur de la fiche lors de sa création (en ajoutant un champ avec ACF par exemple ?) puis répercuter cette couleur sur le titre du produit, les encadrés, le prix, les dividers… ou tout autre élément finalement.
    Existe-t-il une astuce me permettant de réaliser cela ?

  10. Lycia Diaz

    Salut Isableue,
    Houla, ce que tu demandes est peut-être faisable avec un développement sur-mesure (????) mais pas avec Divi. Disons pas en automatique… Tu devras décliner ta fiche manuellement avec la nouvelle couleur, je suppose que ce n’est pas ce que tu recherches ?

  11. Isableue

    Salut Lycia,
    De fait, toutes mes fiches produit sont déjà déclinées manuellement selon une couleur spécifique… et je cherche une façon plus efficace de les gérer.
    Je repars en quête de solution 🙂 !
    Merci de ta réponse.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This