C’est une question qui revient assez souvent sur notre groupe Facebook et dans les mails que l’on reçoit :

Comment personnaliser facilement mes pages WooCommerce avec Divi ?

Le problème, c’est que ce n’est pas prévu en natif avec Divi et malgré la dernière mise à jour activant le Visual Builder dans la partie “description” du produit, les possibilités restent limitées.

Heureusement, il existe différents plugins permettant de modifier plus ou moins ce comportement :

  • WC Product Builder
  • WooCommerce Layout Injector
  • BodyCommerce

Tous ces plugins étant payants, ce n’est pas forcément simple de faire son choix en déboursant 20 € sans être sûr du résultat.

Nous allons donc tester chacun d’eux pour vous permettre de vous orienter sur celui qui vous conviendra le mieux.

Commençons de suite avec…

WC Product Builder

WC Product Builder est un plugin de Divi Kingdom.

Il est disponible à partir de 19 $ pour un site, avec pour avantage d’avoir les mises à jour à vie. Pas besoin de payer tous les ans donc.

Voici les différentes offres :

Passons maintenant à son utilisation.

Après son installation, il faut commencer par ajouter un nouveau modèle de page dans la bibliothèque Divi (si vous ne savez pas comment faire, lisez notre article sur l’utilisation de la bibliothèque Divi et des modèles de pages).

Ajoutez ensuite une rangée et lorsque vous avez la possibilité d’insérer un module, vous en avez maintenant 20 nouveaux à disposition :

Regardez tous les modules commençant par “Woo…”

Vous pouvez donc maintenant avoir accès globalement à des modules Divi pour afficher :

  • le fil d’ariane WooCommerce
  • un bouton d’ajout au panier
  • l’image à la une du produit
  • la galerie photo du produit
  • la description du produit
  • le description brève du produit
  • des flèches de défilement pour passer d’un produit à un autre
  • les produits en rapport
  • les avis clients

Vous l’aurez compris, vous avez en fait accès à tous les éléments présents sur une page produit WooCommerce avec la possibilité de les agencer comme vous voulez dans le Divi Builder.

Cerise sur le gateau, plusieurs options sont disponibles dans chaque module pour :

  • modifier les différents libellés
  • modifier la taille et couleur de la police de chaque élément
  • modifier le position et l’alignement des textes
  • ajouter des couleurs ou images de fond
  • afficher ou masquer certaines informations suivant vos produits

Il suffit ensuite d’ajouter et d’imbriquer les différents éléments comme vous voulez sur votre modèle de page :

Construisez votre page comme bon vous semble

Une fois votre design terminé, rendez-vous dans l’administration du site, dans Réglages -> WC Product Builder

Dans l’onglet Default Product Page Layout, sélectionnez le modèle de page que vous venez de créer (“Produit personnalisé” pour moi) et enregistrez.

Affichez maintenant n’importe quel produit et votre nouveau design sera actif sur toute votre boutique.

Bonus : le plugin vous permet également d’afficher n’importe quel élément WooCommerce dans vos pages ou articles à l’aide de shortcodes que vous pouvez trouver dans l’onglet Shortcodes :

Si vous souhaitez vous le procurer, rendez-vous ici :

Passons maintenant à…

Woo Layout Injector

Probablement le plus connu de tous, ce plugin est développé par l’excellent Sean Barton et est en vente sur Elegant MarketPlace à partir de 28 $ / an pour un site.

Basé sur le même principe – la création de layout à assigner à vos pages produits – il propose également de personnaliser les autres pages WooCommerce à l’aide du Divi Builder :

  • la page boutique
  • les pages d’archives produits
  • la page “Mon compte”
  • la page de commande
  • le panier

Petit plus, il permet également de modifier quelques options de WooCommerce :

  • modifier l’apparence et le libellé du badge de promotion de WooCommerce
  • désactiver le zoom sur les images des produits
  • modifier le libellé du bouton d’ajout au panier
  • activer le “Mini-Panier WooCommerce” (cela affiche son contenu lorsque vous passez la souris sur l’icône panier)

Lors de la création de votre modèle, vous aurez accès à 39 nouveaux modules permettant d’ajouter n’importe quelle information WooCommerce.
En voici quelques-uns :

Comme pour WC Product Builder, chaque module propose de nombreuses options de personnalisation : taille de police, couleurs, modification de libellé, alignement…

Woo Layout Injector propose également l’ajout d’onglets supplémentaires dans le tableau d’information du produit via le Divi Builder. Pratique si vous avez des spécificités à ajouter que WooCommerce ne propose pas.

Vous pourrez ensuite éditer le contenu de vos onglets directement dans les pages produits :

Si vous souhaitez en savoir plus sur Woo Layout Injector, rendez-vous ici:

Divi BodyCommerce

Je ne sais pas si vous connaissez ce plugin, mais c’est probablement celui qui vous conviendra le mieux tant ses personnalisations sont poussées.

Il est édité par le site DiviEngine et est disponible à partir de 15 £ (environ 16,50 €) pour un site et par an.

Après avoir testé les deux précédents, c’est probablement celui qui propose le meilleur rapport qualité/prix.

D’une part c’est le moins cher de tous, d’autre part c’est aussi celui qui pousse la personnalisation de WooCommerce à son apogée.

L’interface des options est vraiment très agréable à parcourir et propose une tonne de choix :

Concrètement vous avez accès à tout.

Beaucoup de choix n’est-ce pas?

Vous pouvez créer des templates personnalisés avec le Divi Builder pour les pages :

  • produits
  • d’archives
  • boutique
  • mon compte
  • de connexion
  • panier
  • commande

Mais là ou ça devient vraiment intéressant, c’est que le plugin nous donne la possibilité de modifier l’aspect de l’e-mail de notification d’achat via plusieurs paramètres :

  • les couleurs
  • les marges
  • le texte du footer
  • le logo du header et du footer
  • les alignements des éléments
  • la taille de l’image produit
  • les couleurs de fond de l’e-mail et du tableau récapitulatif

Et vous pouvez bien sur contrôler l’aspect de vos changements via une prévisualisation de l’e-mail en bas de page.

BodyCommerce offre également la possibilité d’activer le “Mini Panier”, permettant d’afficher le nombre d’articles ajoutés ainsi que le prix total à coté de l’icône. Vous pouvez d’ailleurs choisir une icône personnalisée parmi 7 images.

Cerise sur le gâteau :

  • tous les libellés de WooCommerce sont éditables (y compris ceux du dropdown d’affichage des produits)
  • les badges de promotions, de nouveaux produits et les variations de couleurs des produits sont modifiables et personnalisables.

Si vous voulez en savoir plus sur Divi BodyCommerce, rendez-vous ici :

Conclusion

Vous l’aurez compris, la plupart des options proposées par ces plugins sont similaires.

Pour tout vous dire, le premier que j’ai acheté il y a déjà quelques mois était WC Product Builder notamment parce qu’il convenait à mon utilisation basique et que la licence était illimitée à vie.

En ayant maintenant fait le tour des autres, je peux vous affirmer que c’est probablement Divi BodyCommerce que j’utiliserais sur tous mes futurs projets. Les options qu’il propose permettent de modifier tellement de détails facilement pour se démarquer d’une boutique WooCommerce standard que c’est le plus avantageux de tous.

Et vous, en avez-vous testé ? Allez-vous vous laisser tenter ?

Dites-nous tout en commentaires 😉

D'autres tutoriels pouvant vous intéresser: