Le WooCommerce Builder est enfin disponible avec la sortie de Divi 3.29.
Cette fonctionnalité permettant d’utiliser le Divi Builder pour mettre en forme les pages produits de WooCommerce est la plus grosse évolution du thème depuis la version 3.0 et l’arrivée du Visual Builder.
Voyons donc maintenant en détails ce qu’apporte cette mise à jour…

Soyez prudent avant de mettre à jour votre site Divi en version 3.29.x, notamment si votre site utilise WooCommerce.
Faites des essais sur un site de test pour éviter les problèmes.
Et si vous utilisez un plugin de personnalisation des pages WooCommerce tel que BodyCommerce et consorts, alors redoublez de prudence car la compatibilité n’est clairement pas encore garantie.

Qu’apporte le WooCommerce Builder à Divi ?

Comme je l’expliquais en introduction, cette nouvelle fonctionnalité permet d’utiliser le Divi Builder pour construire l’intégralité d’une fiche produit WooCommerce.

Notez bien que tant que le Theme Builder de Divi (qui permettra de créer des modèles pour les différentes catégories des pages de WordPress) n’est pas disponible, il vous faudra construire vos pages produits une par une ou enregistrer un modèle dans la bibliothèque de Divi que vous chargerez pour chaque produit.

Le Divi Builder pour mettre en forme vos produits WooCommerce

Si vous mettez à jour Divi sur un site sur lequel avez déjà WooCommerce d’installé avec des produits configurés, alors vos fiches produits ressembleront à ça :

Le contenu de vos fiches produits aura automatiquement été converti pour être utilisable dans le Divi Builder avec les modules ad hoc.
Je précise que la capture ci-dessus a été faite dans le backend de WordPress, mais le produit est modifiable sans problème en frontend dans le Divi Visual Builder.

Petite astuce, si vous cliquez sur l’icône de roue dentée pour afficher les paramètres de la page dans le Divi Builder, sachez que les champs “Titre”, “Extrait” et “Image présentée” correspondent respectivement au nom du produit, à sa description courte et à son image principale.

Les particularités des nouveaux modules WooCommerce

Avant de vous présenter l’ensemble des modules dédiés à WooCommerce que cette mise à jour à apporté à Divi, voici quelques précisions qui sont valables pour l’ensemble d’entre eux.

Comme vous pouvez le voir sur la capture d’écran ci-dessus, les rubriques “Contenu” et “Éléments” apportent des réglages importants pour configurer l’affichage du produit.

• Contenu : sélectionnez le produit pour lequel vous avez besoin d’afficher des informations (titre, prix, image, etc.)
  Ça peut être un produit en particulier ou simplement le dernier ajouté chronologiquement à votre liste de produits
• Éléments : le contenu de cette rubrique sera variable selon le type de module sélectionné. Vous pourrez (dés)activer différents sous-éléments qui composent l’élément principal, par exemple pour le module “Woo Tabs” : n’affichez que l’onglet “Description” et l’onglet “Avis” mais pas l’onglet “Informations complémentaires”.

Le WooCommerce Builder ajoute 16 nouveaux modules à Divi

Ces 16 nouveaux modules correspondent aux différents éléments qui composent une fiche produit WooCommerce.
Le principe est donc de construire bloc par bloc la fiche produit qui correspond à vos attentes, en insérant uniquement les modules dont vous avez besoin et en les configurant comme vous le désirez.

Ou alors, selon vos besoins, vous pouvez également créer des landing pages en utilisant par exemple qu’un module “Prix” et “Ajouter au panier” au sein d’une mise en page recherchée.
Tout ceci apporte une souplesse d’utilisation plutôt appréciable pour développer le e-commerce avec Divi.

Le module “Ajouter au panier”

Le module “Ajouter au panier” inclut plusieurs sous-éléments que vous pourrez bien sûr configurer individuellement.

• Le sélecteur de variation (si votre produit contient des variations)
• L’état du stock (si vous l’avez activé dans les options de WooCommerce)
• Le sélecteur de quantité
• Le bouton d’ajout au panier

Le module “Informations complémentaires”

Ce module permet d’afficher les informations complémentaires de votre produit (les variations).
Cet élément est un des composants des onglets de WooCommerce.

Le module “Fil d’Ariane”

Ce module sert à afficher le chemin d’accès au produit, en précisant toute l’arborescence concernée et ce, depuis la page d’accueil jusqu’à la page du produit.

Le module “Notification panier”

Ce module correspond à la notification de confirmation qui s’affiche sur la fiche produit lorsque l’utilisateur a cliqué sur le bouton “Ajouter au panier”.

Le module “Description”

Intitulé explicite pour ce module qui affiche la description du produit.
Dans les options, vous pouvez choisir entre la description courte ou la description longue du produit.

Le module “Galerie”

Si vous avez choisi d’ajouter plusieurs images pour illustrer votre produit, utilisez le module “Galerie” pour les afficher sur sa fiche.
Il est préconisé si vous avez besoin de différencier dans votre mise en page l’image principale du produit de ses autres images.
Les paramètres de ce module sont très semblables à ceux du module “Galerie” standard déjà présent dans Divi.

Le module “Images”

Avec ce module vous pouvez d’afficher ou masquer les éléments suivants :

• l’image principale du produit
• la galerie d’images du produit
• le badge de soldes

Le module “Meta”

Ce module permet d’afficher ou masquer les éléments suivants :

• l’UGS du produit
• les catégories auxquelles il appartient
• les tags qui lui sont attribués

Le module “Prix”

Insérez le prix de votre produit : prix actuel et prix barré le cas échéant.

Le module “Évaluation”

Si vous avez activé les avis dans les paramètres de votre produit, ce module affichera les notes laissées par vos clients avec un barème composé d’étoiles.

Vous pouvez choisir ou non d’afficher :

• la notation avec les étoiles
• le nombre de clients ayant laissé leurs avis

Le module “Produits similaires”

Si, dans les paramètres de votre produit, vous avez précisé des références dans le champ “Ventes croisées”, ces produits similaires s’afficheront sur votre fiche produit.

Le module “Avis”

Complémentaire au module “Notation”, ce module affichera les avis laissés par vos clients sur vos produits.

Vous pouvez choisir de faire apparaitre ou non :

• l’avatar de l’auteur de l’avis
• le nombre de commentaires

Le module “Stock”

Ce module affichera l’état du stock du produit choisi si vous avez coché la case “Activer la gestion de stock au niveau produit” dans ses paramètres.

Le module “Onglets”

Grâce à ce module, insérez sur votre fiche produit, sous la forme d’onglets les informations suivantes (vous pouvez les (dés)activer individuellement dans les réglages du module) :

• description longue
• informations complémentaires
• avis

Le module “Titre”

Ce module permet tout simplement d’afficher le nom du produit en bénéficiant des mêmes possibilités de personnalisation que celles présentes dans un module “Texte” standard.

Le module “Montée en gamme”

Afin de vous aider à réaliser des ventes incitatives, ce module affichera les produits complémentaires que vous aurez sélectionnés.
Pour ce faire, dans les paramètres de votre produit, ajoutez des références dans le champ “Montée en gamme”.

Notre avis sur le WooCommerce Builder de Divi

Maintenant que vous connaissez un peu mieux le contenu de cette tant attendue mise à jour de Divi, il est temps de faire un point sur ses qualités et ses défauts.

Bien sûr il est appréciable d’avoir enfin obtenu une réelle intégration de WooCommerce au sein de Divi. Chose qui lui faisait cruellement défaut et le plaçait clairement en retard par rapport à ses concurrents.

Mais, comme je l’expliquais dans le premier chapitre de cet article, sans le Theme Builder, cette avancée ne vaut pas grand chose. Un peu à l’instar du contenu dynamique que nous vous avions présenté en octobre 2018.
Sans un système de templates permettant de définir des modèles à attribuer aux divers post types de WordPress, ces fonctionnalités ne sont que des demi-fonctionnalités…

D’autre part, si le WooCommerce Builder permet de configurer assez finement les fiches produits, il ne faut pas oublier que les pages “Mon compte”, “Commande” et “Panier” ne sont pas éditables avec le Divi Builder.
Ce qui laisse certainement de beaux jours devant eux aux divers plugins tiers permettant une personnalisation poussée de WooCommerce avec Divi, tels que BodyCommerce, WooLayoutInjector, etc.

Avez-vous déjà testé cette nouvelle version de Divi ? Faites-nous part de vos impressions en commentaires.

Partager