How to create a WooCommerce product sheet template with Divi?

Updated on 12/11/2019 | Published on 26/10/2019 | 30 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

1,580 words

6

You should like it too:

Formation Divi PDF : un guide pas à pas

Divi PDF training: a step-by-step guide

What better than a Divi PDF training to master this WordPress Theme, its Visual Builder and its Theme Builder? It's as if a trainer invited himself in your home... Discover its content!

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!

30 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.

  12. Haga Raza

    Bonjour,
    Je suis artisan pâtissier, et je suis en train de créer un site pour vendre des gâteaux d’anniversaire.
    Comment pourrais-je faire en sorte que lors du passage de la commande, le client puisse indiquer le prénom et l’âge de la personne (pour personnaliser le gâteau).
    J’avais pensé à créer un attribut sur la fiche produit, mais en fait ce n’est pas un champ Texte libre…
    Merci de votre aide.

  13. GAM

    Bonjour Lycia,
    Dans l’onglet Thème Builder – corps personnalisé – Tous les Produits, j’ai voulu personnaliser d’un coup toutes mes fiches-produits.

    Si c’est bon sur certaines fiches :
    https://graphic-international.fr/produit/rollup-classic-en-85×200-cm-100-et-120-avec-visuel/
    (mise à part le texte qui vient se rajouter tout en bas)
    Ce n’est pas bon sur d’autres
    https://graphic-international.fr/produit/rollup-design-85×200/
    Le texte de la description longue est déstructuré.
    Il me signal : Module de contenu ( Post Content) Post manquant (« Publier le contenu »)
    En ajoutant ce module j’ai plein de doublons.
    Impossible d’arranger les choses « manuellement ».
    Comment faut-il procéder pour que tout rentre dans l’ordre ?
    Merci d’avance pour ton aide.
    Belle journée.

  14. Lycia Diaz

    Salut GAM, en fait, je pense que tu as dû écrire du texte en dur directement dans ton modèle de fiche produit créé avec le thème builder. Comme expliqué dans cet article, tu dois créer un template avec seulement le modules WOO. Par exemple Woo Prix, Woo Titre etc. Sans rien saisir comme texte. Si tu mets le module Woo Description + le module publier un contenu alors tu auras des doublons. Ensuite, tu crées tes fiches produits depuis le back office de WordPress, mais tu ne les édites pas avec le Visual Builder. Alors, la mise en forme héritera du modèle créé avec le thème Builder, mais les données sont bien saisies depuis WooCommerce.

  15. Cuesta Christian

    Bonjour Lycia,

    J’ai fait une page produit avec le Thème Builder et cela fonctionne parfaitement. Toutefois, j’ai un besoin particulier. Il faudrait que je propose de télécharger des produits en pdf qui sont gratuits. Je dois le faire sans passer par ajouter au panier. Je ne trouve pas de solution. J’ai bien renseigné le produit comme téléchargeable et j’ai « Ajouter un fichier », mais je ne sais pas récupérer ces données pour télécharger le fichier directement. Existe-t-il une solution? Faut-il utiliser un plugin de gestion de téléchargement pour ces produits?

    Merci pour ton aide, bonne journée.

  16. Annabelle Vauvrecy

    Bonjour Lycia,

    J’avais commencé par copier la première fiche produit que j’avais crée directement dans Woo dans le thème pour ne pas refaire toute la mise en page. Je me suis aperçue en relisant ton article plus les commentaires, qu’il fallait absolument que je rajoute « publier le contenu » mais quand je l’ai fait je me suis retrouvée avec des doublons. Je l’ai enlevé et maintenant c’est ok (???) par contre je ne peux rien modifier directement sur mes fiches produits.

    Autre souci : je ne trouve pas où insérer les informations complémentaires quand je crée la fiche produit avec Woocommerce.

    D’avance MERCI pour tes réponses et bonne journée 🙂

  17. Lycia Diaz

    Salut Annabelle.
    Le module Publier un Contenu fait doublon avec la Woo Description. Donc, c’est soit l’un soit l’autre. Pour modifier tes produits, il faut passer par la fiche produit de WooCommerce, en back-office. Évite d’activer le Visual Builder sur les produits si tu as créé une fiche produit via le Theme Builder.

  18. Cuesta Christian

    Bonjour Lycia,

    Merci pour ta réponse. Je vais essayer, mais je ne suis pas certain du résultat. Je voudrais pouvoir télécharger un produit, que j’ai rendu téléchargeable en sélectionnant l’option, puis en indiquant le nom du fichier et l’URL du fichier. Je n’arrive pas à récupérer cette donnée et la positionner sur un bouton pour faire un lien.
    Merci encore.

  19. Lycia Diaz

    C’est bizarre, les produits téléchargeables sont natif dans WooCommerce. C’est quoi qui marche pas ? Il suffit de télécharger le fichier ou d’attribuer son URL.

  20. Annabelle Vauvrecy

    Merci pour ta réponse Lycia mais je ne trouve toujours pas, via l’éditeur de Woocommerce où insérer les informations complémentaires, qui ensuite se trouvent dans le module Tab avec la description longue et les avis. Je peux juste renseigner les descriptions et les données du produit. Ça m’embête beaucoup parce que je ne peux pas les rajouter avec Divi, je ne peux plus rien modifier avec Divi depuis que mes pages produits sont soumises au thème.
    Tu aurais une idée ?

    D’avance Merci 🙂

  21. Cuesta Christian

    Je ne peux qu’ajouter le produit dans le panier. Je voudrais le télécharger directement, sans utiliser le panier, en bénéficiant des avantages des modules du WooCommerce Builder, mais aucun ne permet le téléchargement. Je ne peux pas utiliser l’aspect dynamique des modules (Titre, prix, description, etc.), mais pas URL.

  22. Cuesta Christian

    Re-bonjour Lycia,
    Je récupère le lien du fichier à télécharger unique dans le mail que reçoit le client. Je voudrais télécharger le fichier en cliquant sur son image ou sur un bouton. J’ai plusieurs produits gratuits qui doivent être téléchargeables. La difficulté est que l’URL est variable en fonction du produit. Si je n’arrive pas à le faire avec WooCommerce, je vais créer une page par produit et faire un lien avec le fichier, ce qui fonctionne.
    Merci encore

  23. Lycia Diaz

    Oui Christian tu dois créer un produit par fichier téléchargeable ou un produit variable avec plusieurs options de téléchargement. Ou bien, tu utilises une extension du genre DDownload qui évite de passer par WooCommerce.

  24. Lycia Diaz

    Salut Annabelle, normalement, l’éditeur de WooCommerce te donne 2 champs pour les descriptions : 1 en haut de la fiche produit et l’autre tout en bas de la fiche produit. As-tu rempli les 2 ?

  25. ASCIONE

    Bonjour Lycia,
    Merci pour toutes ces infos très utiles. J’ai créé mes modèles de fiches produits et mon client souhaite pouvoir imprimer les fiches produits.
    Y a t’il un plugin qui le permet ? et qui permet de choisir les blocs à faire apparaître. (même payant)
    Merci bien de votre aide,
    Delphine

  26. Lycia Diaz

    Bonjour Delphine. Je ne connais pas de tel plugin. Peut-être que ça existe ?

  27. val_01

    Bonjour Lycia,

    J’ai un problème lorsque je crée un modèle pour une catégorie de produit. En effet le visuel sur la catégorie principale ne correspond pas à celui que j’ai crée mais se répercute bien sur les sous catégories. Et quand je construis un modèle pour les sous catégories, les modifications ne sont pas prises en compte… Une idée de ce qui peut poser problème ?

  28. Lycia Diaz

    Salut Val. C’est bizarre. Je vois pas. Tu es sûre que tout est bien paramétré ?

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