Créer un modèle de fiche produit WooCommerce avec Divi est enfin possible grâce à deux fonctionnalités introduites dernièrement : le WooCommerce Builder et le Theme Builder.

Grâce à ces deux fonctionnalités vous allez pouvoir créer des templates de thème et les assigner à des modèles de page de votre site.

Donc, en quelques clics, vous allez changer l’apparence de vos fiches produit, que vous en ayez 1 ou 1000 !!!

Dans cet article, je ne vais pas vous expliquer comment créer une boutique en ligne avec WooCommerce, mon ebook-formation « WooCommerce : le Guide » est là pour ça. Je vous le conseille si vous souhaitez ajouter une boutique à votre site vitrine et que vous ne savez pas comment faire…

Donc dans cet article, on va se concentrer sur la fiche-produit elle-même et on va voir quelles sont les possibilités offertes par Divi.

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Peut-on agir sur une boutique WooCommerce déjà existante ?

Si vous installez une boutique en ligne sur un site WordPress utilisant Divi 4.0 aujourd’hui, la question ne se pose pas…

Par contre, si vous détenez déjà une boutique avec des dizaines ou des centaines de produits, je comprends que vous soyez réticent à l’idée de mettre à jour Divi.

Rassurez-vous, vous pouvez sans problème mettre à jour Divi et commencer à profiter de ses nouvelles fonctionnalités.

Et c’est ce que nous allons voir dans la suite de cet article…

2 – Créer une fiche produit WooCommerce

Si vous venez d’installer et de paramétrer WooCommerce, vous pourrez créer votre premier produit en vous rendant à l’onglet « Produits ». Il vous suffira alors de cliquer sur « Créer un Produit ».

fiche produit WooCommerce
Créer une fiche produit WooCommerce

Si vous possédez une déjà boutique WooCommerce, cet onglet listera tous vos produits existants…

À lire aussi : comment personnaliser la page boutique WooCommerce avec le Divi Thème Builder ?

2.1 – Fiche produit avec l’éditeur par défaut de WordPress

Voilà à quoi ressemble votre fiche produit en back-office :

Fiche produit en back-office
Fiche produit en back-office

Dans cet éditeur (éditeur classique/par défaut de WordPress), vous devrez renseigner toutes les informations pour votre produit :

  1. Saisissez le titre de votre produit.
  2. Rédigez une description dite « longue ».
  3. Remplissez tous les champs nécessaires à la vente : prix, type de produit, stock, taxes, etc.
  4. Rédigez une description dite « courte ».
  5. Ajoutez l’image principale du produit.
  6. Ajoutez d’autres images pour constituer la galerie d’images du produit (facultatif).
  7. Affectez une catégorie à votre produit.
  8. Choisissez le modèle de page : avec ou sans sidebar. Cette action devient facultative car nous allons construire le design de cette fiche à l’aide du Thème Builder.
  9. Publiez votre produit.

À ce stade, voici à quoi ressemble votre fiche produit en front-end :

Apparence produit en front-end
Apparence de la fiche produit (sans customisation)

Ce site est « vierge », il n’a pas été customisé et le design présenté est celui de base de Divi.

C’est pas très glamour, n’est-ce pas ?

2.2 – Fiche produit avec le Divi Builder

Toujours depuis le back-office, si vous cliquez sur le bouton violet « Utiliser le générateur Divi », voici ce qui apparaît :

Produit back-office : Divi Builder actif
Produit back-office : Divi Builder actif

On découvre alors l’ancien Divi Builder, celui qui était disponible en back-office

En utilisant le « drag & drop » (glisser-déposer), vous pourrez facilement réorganiser la structure de votre fiche produit WooCommerce.

Vous pourrez aussi ouvrir les réglages de chaque module afin de les customiser…

Notez : pour l’instant, les changements que vous effectuez dans cette fiche produit n’apparaîtront qu’au sein de celle-ci. Si vous utilisez cette méthode, vous devrez alors recommencer le design pour chacune de vos fiches produit. Ce qui serait contre-productif…

2.3 – Fiche produit avec le Visual Builder

Si vous cliquez sur le bouton « Construire sur le front-end », vous passerez à l’édition de votre fiche produit, en mode visuel.

Produit : Visual Builder actif
Fiche produit : Visual Builder actif

C’est quand même mieux, non ?

Mais cela ne suffit pas pour assigner ce design à l’ensemble de vos fiches produit. Avec cette méthode, encore, vous devrez toujours recommencer le design pour chaque produit…

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

3 – Les modules Divi utilisés au sein d’une fiche produit

Une fiche produit basique est composée de divers éléments « obligatoires » – ou plutôt nécessaires – comme le prix ou le bouton d’ajout au panier par exemple. D’autres éléments peuvent devenir facultatifs si vous le décidez…

Divi modules constituant une fiche produit

En fait, comme vous pouvez le voir sur cette capture, la plupart des modules du WooCommerce Builder sont utilisés au sein d’une fiche produit. Dans celle-ci, nous trouvons :

  1. Woo Breadcrumb
  2. Woo Cart 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

D’autres modules existent mais n’apparaissent pas ici car cette fiche ne le nécessite pas. C’est souvent le cas pour les produits dématérialisés (pas de stock) ou pour des produits qui n’ont pas encore d’avis (Woo Reviews) par exemple :

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

Donc si vous construisez de toute pièce le layout de votre fiche produit, faites attention à ne pas supprimer certains modules importants.

4 – Créer un modèle pour l’ensemble de vos fiches produit

Voilà une fonctionnalité qui va ravir la plupart des propriétaires d’un site WooCommerce avec Divi : la possibilité de créer un modèle applicable à l’ensemble (ou non) des produits de la boutique (ceux déjà publiés comme ceux à venir).

L’idée est de ne pas construire le design, produit par produit, comme vu dans les précédents chapitres, mais de le construire une fois pour toute et de l’enregistrer comme « modèle ».

Pour cela, il vous suffira de créer une template de thème depuis l’onglet Theme Builder.

Template de Theme "All Produits"
Template « All Produits » : s’applique à toutes les fiches produit de votre boutique

En cliquant sur l’icône « + » Add New Template, il vous suffira de l’assigner à l’option « All Produits ».

Cette template de thème va agir par défaut sur toutes les fiches produit de votre boutique.

Dans l’absolu, l’ajout d’un Global Header et d’un Global Footer est facultatif. Ce qui nous intéresse vraiment ici, c’est d’ajouter un « Custom Body » et de le configurer 1 seule fois, pour qu’il s’applique à l’ensemble des fiches produit.

Lorsque vous éditerez ce Custom Body, vous vous retrouverez dans l’environnement du Visual Builder et vous pourrez ajouter des sections, des lignes et des modules, comme vous le feriez lors de la construction d’un layout de page.

Mais il y a plusieurs choses à savoir :

4.1 – Utiliser des modules WooCommerce pour construire le modèle

Vous construisez votre fiche produit donc autant utiliser les modules WooCommerce mis à disposition par Divi…

Module Woo Price
Insertion d’un module « Woo Price » mais la procédure est similaire pour les autres modules
  1. Insérez un module Woo…
  2. Dans le cas du module Woo Price, un prix « fictif » apparaît.
  3. Choisir « This Produit » : important !
  4. Changez le style : couleur, taille du texte, ombre, animation etc.
  5. Ajoutez des paramètres avancés si besoin.
  6. Sauvegardez.

Lorsque vous insérez les modules Woo, choisissez « This Produit ».

« This Produit » permet de faire appel aux infos du produit affiché. Donc peu importe sur quelle fiche produit on se trouve, le prix variera en fonction des informations saisies lors de sa création (chapitre 2.1 de cet article).

4.2 – Utiliser le contenu dynamique

Dans une fiche produit, vous pouvez également ajouter d’autres modules Divi : texte, image etc.

utiliser le contenu dynamique

D’ailleurs, certains modules deviennent intéressants si vous les utilisez pour afficher du « contenu dynamique ».

  1. Ajouter un module Texte
  2. Cliquez sur l’icône « Utiliser le contenu dynamique »
  3. Sélectionnez le contenu dynamique que vous voulez afficher. Dans la capture d’écran, il s’agit du « Post Categories ».
  4. Cela affichera les catégories assignées à chaque produit.

En savoir plus au sujet du contenu dynamique.

4.3 – Le rôle du module Post Content dans la fiche produit

module Post Content dans la fiche produit WooCommerce

Vous l’avez compris, la plupart des modules WooCommerce sont indispensables. Mais à quoi sert le module Post Content, apparu depuis la version 4.0 de Divi ?

Si vous l’insérez, votre fiche produit affichera la « longue description » (pastille n°2 du chapitre 2.1 de cet article).

Cette longue description utilise un éditeur de texte classique dans lequel vous pourrez ajouter du texte et des images.

5 – Créer un modèle en fonction des catégories de produits

Dans le chapitre précédent, on a paramétré le design de l’ensemble des fiches produit de la boutique.

Toutefois, vous n’êtes pas obligé d’utiliser le même design pour l’ensemble de vos produits. Vous pourriez créer plusieurs modèles (toujours depuis le Theme Builder) et les assigner à certains types de produit.

Vous pouvez créer des dispositions en fonction des catégories de produits par exemple.

Template "Produits in Specific Categories De Produits"
Template « Produits in Specific Categories De Produits » : s’applique seulement aux fiches produit de cette catégorie.

Dans la capture ci-dessus, un design a été attribué à la catégorie nommée « Cuisine Traditionnelle » et un autre à la catégorie « Cuisine Légère ».

Le choix de l’affectation de template se décide lors de sa création mais vous pouvez changer cela grâce aux paramètres de la template (icône de la roue dentée).

custom Theme Builder Category
Fiche produit différente en fonction de la catégorie sélectionnée.

Dans ce cas, les produits classés dans la catégorie « A » auront une apparence différente de ceux classés dans la catégorie « B ».

6 – D’autres options sont disponibles

Lors de la création de template de thème pour votre fiche produit, vous avez diverses options : pas seulement « All Produits » et « Produits in Specific Categories De Produits »…

modèles de produits
Sélectionner les modèles de produits pour créer le design

Vous pourrez créer des designs de fiches produit en fonction des étiquettes, de produits spécifiques (uniques), de la page d’archive de produits etc.

Pour bien débuter avec Divi, découvrez tous les articles pour commencer sereinement !

WooCommerce Fiche Produit
WooCommerce Produit

Pin It on Pinterest

Shares
Share This