Bonne nouvelle, et c’est un euphémisme ! Le Divi Builder intègre dorénavant la fonctionnalité de « WooCommerce Builder » !

Savez-vous ce que cette mise à jour majeure représente ?

Outre les mois de boulot pour les développeurs d’Elegantthemes, ce sont les créateurs de sites WordPress qui vont être contents !

Dès aujourd’hui, vous pouvez contrôler totalement la mise en page (layout) d’un produit e-commerce à l’aide de WooCommerce et de Divi.

Lire l’article officiel de Nick Roach sur le blog d’Elegantthemes

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 – Avec l’ancien Divi Builder

Pour information, voici comment se comportait la construction d’un produit WooCommerce avant la version 3.29.x du thème Divi :

Divi Builder sans WooCommerce Builder
Construction d’un produit e-commerce avec le Divi Builder sans la fonctionnalité de WooCommerce Builder

Comme vous pouvez le remarquer sur cette capture d’écran – ou comme vous l’avez remarqué par vous-même lors de vos créations de boutiques en ligne avec Divi – le Divi Builder agissait uniquement sur la partie « description » du produit.

C’était plutôt frustrant car tout le reste de la mise en page ne pouvait pas être modifié avec le constructeur.

On ne pouvait donc pas ajouter des modules Divi où on le souhaitait

2 – Divi Builder avec WooCommerce Builder

Ce temps est révolu !

Dès à présent, vous bénéficiez de 16 modules WooCommerce supplémentaires, disponibles directement depuis le Divi Builder.

Mais la vraie bonne nouvelle c’est de pouvoir agir à n’importe quel endroit de votre fiche produit.

Vous pouvez ajouter des sections, des lignes et y placer les divers modules nécessaires à la construction du layout produit.

WooCommerce Builder pour construire une fiche produit
WooCommerce Builder pour construire entièrement votre fiche produit

Sur cette capture d’écran, j’ai affiché le Divi Builder en mode « grille » afin que vous puissiez voir à quels endroits le WooCommerce Builder peut intervenir.

Comme vous le voyez, il peut être utilisé partout !

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

3 – Les 16 modules du WooCommerce Builder

16 nouveaux modules viennent s’ajouter aux 46 modules déjà présents au sein du Divi Builder (voir la liste complète).

Découvrons-les ici :

Les modules du Divi Builder pour WooCommerce
Les modules du Divi Builder pour WooCommerce
  1. Woo Add To Cart
  2. Woo Breadcrumb
  3. Woo Description
  4. Woo Images
  5. Woo Additional Info
  6. Woo Cart Notice
  7. Woo Gallery
  8. Woo Meta
  9. Woo Price
  10. Woo Related Product
  11. Woo Stock
  12. Woo Title
  13. Woo Rating
  14. Woo Reviews
  15. Woo Tabs
  16. Woo Upsell

3.1 – Woo Add To Cart

Woo Add to Cart
Module Woo Add to Cart

Ce module vous permet d’ajouter et de customiser intégralement le bouton « ajouter au panier ».

En insérant ce bouton et en le plaçant où vous le souhaitez, vous pourrez inciter les internautes à passer à l’action.

3.2 – Woo Breadcrumb

Woo Breadcrumbs
Module Woo Breadcrumbs

C’est le fil d’Ariane de votre produit WooCommerce. En montrant le chemin, l’internaute sait sur quel produit il se trouve et peut rapidement remonter dans les catégories de produits.

Vous pouvez placer ce module à n’importe quel endroit de votre mise en page.

3.3 – Woo Description

Woo Description
Module Woo Description

Dès que vous aurez saisi la description du produit (en back-office), vous pourrez la faire apparaitre au sein de votre layout, à l’endroit le plus propice.

3.4 – Woo Images

Woo Image module
Module Woo Image

Ce module sert à afficher l’image de mise en avant de votre produit.

Vous obtiendrez plein d’options pour ajouter une bordure, transformer l’image, arrondir les angles, changer la couleur du badge « promo », ajouter une animation, etc.

3.5 – Woo Additional Info

Woo Additional Info
Woo Additional Info

Ce module permet d’afficher la section « informations complémentaires ». c’est souvent dans cette partie que l’on trouve les variations de produits.

3.6 – Woo Cart Notice

Woo Cart Notice
Woo Cart Notice

Le module Woo Cart Notice permet d’afficher la notification de « mise dans le panier ». Vous pourrez changer facilement les couleurs, le bouton etc.

3.7 – Woo Gallery

Si vous utilisez plusieurs images pour illustrer votre produit, le module Woo Gallery vous permettra de les afficher.

3.8 – Woo Meta

Woo Meta
Module Woo Meta

Le module Woo Meta affiche les informations du produit liées aux « balises Meta ». Dans ce cas, il s’agira de la catégorie associée au produit.

3.9 – Woo Price

Woo Price Module
Module Woo Price

Affichez et stylisez rapidement et facilement le prix de votre produit grâce au module Woo Price.

3.10 – Woo Related Product

Woo Related Product
Woo Related Product

Ce module permet d’afficher les autres produits liés par rapport au produit actuellement consulté.

Il suffit de remplir le champ « ventes croisées » de votre fiche produit WooCommerce pour que des produits en relation soient proposés à l’internaute.

3.11 – Woo Stock

Ce module sert tout simplement à afficher le stock restant de votre produit.

gestion des stock WooCommerce
Activez la gestion des stock WooCommerce pour afficher le nombre d’exemplaire restant.

Pour cela, vous devrez activer la gestion des stocks et renseigner le nombre d’exemplaires que vous avez en stock.

3.12 – Woo Title

Woo Title
Woo Title

Ce module vous permet d’afficher le titre de votre fiche produit.

Vous pourrez choisir sa balise de titre (H1, H2, H3 etc.), ajouter une couleur de fond, changer la taille de la police, ajouter un lien, changer la couleur du titre, ajouter une ombre/animation etc.

3.13 – Woo Rating

activer les avis WooCommerce
Pour utiliser le module Woo Rating, vous devez activer les avis WooCommerce

Ce module permet d’afficher le nombre d’étoiles (avis étoile). Pour cela, vous devez activer les avis depuis votre fiche WooCommerce.

3.14 – Woo Reviews

Woo Reviews
Woo Reviews

Avec le module Woo Reviews, vous pourrez afficher les avis « texte » qui ont été laissés par vos clients.

3.15 – Woo Tabs

Woo Tabs
Woo Tabs

Le module Woo Tabs permet d’afficher le tableau d’onglets qui contient des informations supplémentaires comme la « description longue », les avis clients ou les infos du produit.

3.16 – Woo Upsell

Le module Woo Upsell permet d’afficher les produits de « montée en gamme » (ou Upsell) afin de faire des ventes additionnelles.

Woo Upsell

Vous devrez d’abord renseigner les produits upsell lors de la création de votre fiche produit.

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

4 – Divi WooCommerce Builder : comment ça marche ?

C’est très simple : les modules WooCommerce sont intégrés au Divi Builder, donc son fonctionnement reste le même.

Pour pouvoir les utiliser, votre site doit-être doté du plugin WooCommerce.

Vous créez vos fiches produits depuis le back-office de votre site, comme à votre habitude, depuis l’onglet Produits > Ajouter.

Dès que tous les champs nécessaires sont remplis (prix, description, image etc.), vous pouvez enregistrer votre fiche produit puis activer le Visual Builder.

À ce moment-là vous pourrez commencer le design/layout de la page produit, ajouter ou supprimer des modules.

Chaque module est entièrement paramétrable et offre de nombreuses options (couleurs, animations, typographies, effets, transformations, ombres, backgrounds etc.)

5 – Le WooCommerce Builder en action (vidéo)

Rien de mieux qu’une petite vidéo pour mieux comprendre la puissance de cette nouvelle fonctionnalité « WooCommerce Builder » :

6 – Exemples de design de fiches produits

Avec les modules WooCommerce du nouveau Divi Builder, votre imagination n’aura plus de limite !

Vous pouvez à présent construire les plus belles mises en page pour les produits de votre boutique en ligne, celles qui font vendre !

Voici 4 inspirations de layout-produit :

Mise en page produit avec Divi et WooCommerce Builder
Mise en page produit avec Divi et WooCommerce Builder
Mise en page produit macaron
Mise en page produit : allez jusqu’au bout de votre imagination
Mise en page produit sobre
Mise en page produit originale et sobre
Layout Produit Divi
Construire le Layout d’un produit avec le Divi Builder

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

layout WooCommerce Divi
WooCommerce Builder Divi

Pin It on Pinterest

Shares
Share This