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 29$/an pour un site, et propose également la possibilité d’acheter une licence à vie (à partir de 79$).
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 :
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 :
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.
Il est le seul de ce classement à proposer une licence à vie ( 76£ pour un site, 298£ pour un nombre de sites illimités)
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.
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. D’autant plus qu’il est également possible d’obtenir une licence à vie.
Et vous, en avez-vous testé ? Allez-vous vous laisser tenter ?
Dites-nous tout en commentaires 😉
Et au delà de ces 3 add-ons, la question est aussi de savoir quand Elegant Themes va nous permettre de faire tout ça nativement (pas jusqu’à la personnalisation des e-mails WooCommerce bien entendu, c’est hors-champ).
Avec l’arrivée de Divi 4.x avant la fin de l’année, il y a fort à parier qu’après le Dynamic Content et le Theme Builder, ils s’attaquent à une grosse compatibilité avec WooCommerce.
Et là, attention aux conflits qui pourraient arriver entre ces add-ons et les nouvelles fonctionnalités !
Du coup, en cette période d’incertitude (et les Sneak Peeks n’aident pas), il est intéressant de se demander si on a besoin de personnaliser toute notre e-boutique maintenant ou s’il ne faut pas attendre quelques semaines/mois pour voir ce que nous réserve Divi.
Autant en début d’année ou les années précédentes, je recommandais fortement les Injectors, autant maintenant on constate que l’écosystème est en train de se faire écraser lentement mais sûrement par les mises à jour de Divi.
Il devient très compliqué pour les développeurs de l’écosystème de savoir sur quel pied danser : s’ils ne proposent que le strict minimum ils seront vite obsolètes alors mieux vaut en faire trop que pas assez… Mais à vouloir trop en faire, on peut aussi produire des usines à gaz.
Lorsque je vois tes captures d’écran de Divi BodyCommerce, je me dis qu’on a une nouvelle interface qui ne ressemble ni à WordPress, ni à Divi et qui est étonnamment complexe avec presque trop d’options. Ça rajoute donc un sacré temps d’apprentissage et de tâtonnement avant d’obtenir le résultat qu’on a en tête !
En fait, plus on avance dans le temps et plus les add-ons répondent aux besoins des intégrateurs et des développeurs de niveau avancé… tandis que Divi propose plus lentement les mêmes choses mais plus simplement et plus joliment afin de s’adresser au plus grand nombre.
Alors est-ce le bon moment pour se procurer un de ces add-ons et personnaliser sa e-boutique ? Personnellement, j’attendrais un peu.
Salut Nicolas,
Effectivement tu as sûrement raison sur certains points.
Elementor ayant commencé à intégrer cette fonctionnalité nativement, il y a fort à parier qu’Elegant Thèmes suivra.
Malheureusement on ne sait pas quand et si ça finira par arriver.
Pour ce qui est de la difficulté à les utiliser, ça n’est vraiment pas un problème si on a quelques bases d’anglais.
Les options sont nombreuses mais assez basiques tout de même pour les comprendre facilement.
Quand à savoir si c’est le bon moment ou pas, si on a un site à faire en ce moment je pense qu’il faut les envisager si on a quelque chose de poussé et un peu désigné à mettre en place.
Vaste débat que la venue prochaine du Theme Builder… Sean Barton lui-même disait attendre de voir comment tournerait le vent avant de décider s’il se penchait ou non sur la compatibilité avec le Visual Builder pour Woo Layout Injector.
Le Theme Builder sera une grosse avancée pour Divi, mais donnera un gros coup de pied dans l’éco-système Divi… et c’est paradoxal, mais si Divi est si populaire, c’est aussi parce qu’il a des faiblesses qui ont été comblées par des plugins tiers.
Wait and see… 😉
Salut Julien !
Le destin t’a mis sur mon chemin 😀 J’étais justement en train de chercher un remplaçant à un de mes plugins Divi quand j’ai vu ton tweet.
Pour la petite histoire, j’utilisais depuis peu le plugin Divi Shop Extended Plugin (édité par TantoMarketing) qui a été racheté à l’instant par Elegantmarketplace… du coup, le plugin est planté sur les dernières versions de Divi/WooCommerce. Elegantmarketplace a promis qu’ils reprendraient les updates ASAP (un jour, peut-être…).
Je l’utilisais pour personnaliser les fiches de produits, comme dans tes présentations, mais AUSSI pour intégrer des produits sur des pages quelconques. Par exemple : affichage de 2 produits particuliers dans un carousel en page d’accueil ; ou création d’une page WordPress que je nomme « Produits vedettes » par exemple, et qui inclus les produits de 3 catégories distinctes qu’on peut filtrer dynamiquement avec un système de tabs, un exemple vaut mille mots = simple page construite avec Divi et TantoMarketing Divi Shop Extended Plugin (un peu comme le module “Blog” natif de Divi où l’on peut choisir quelles catégories d’articles on veut afficher) (on attend toujours le module natif Divi qui permet d’afficher des custom types comme on le fait avec les “posts” natif de WP).
Bref. Ce genre de choses.
Je comptais suivre ton lien vers BodyCommerce pour tester et faire l’achat, mais leur demo live du backend semble plantée, pas d’accès au dashboard. J’ai regardé du côté des deux autres, apparemment WC Product Builder (qui a une belle demo live du backend, merci à lui) ne fait pas ce que je veux (il permet seulement de modifier ses template single-product ? ) et le Layout Injector, pas de demo live, et difficile de trouver les fonctionnalités que je cherche dans leur descriptif sur Elegantmarketplace.
Bref. Si tu connais des modules Divi/WooCommerce complémentaires à ceux que tu as présentés ici, ça serait apprécié.
Pour résumer, le but serait de pouvoir jouer avec les data de WooCommerce dans de simples pages. Cela ne me parait pas si compliqué, ni trop tiré par les cheveux comme besoins 😀
En parallèle, je continue mes recherches 😉
(désolé pour le pavé)
Bonjour. Super article. Je suis sur le sujet en ce moment et je me posais les mêmes questions que Nicolas (Mr WP) car je cherche un plugin pour intégrer mes produits sur des pages quelconques. D’ailleurs le seul plugin que j’avais vu etait celui de tantomarketting mais je n’ai trouvé aucun endroit pour le télécharger/acheter. Je connais la raison maintenant. Y a aussi un pluggin woocommerce “storefront product hero” … mais je trouvais ça un peu cher pour ce que je veux en faire. Nicolas ça peut peut être t’intéresser. Sinon tu peux me dire les prix de divi shop extended pour indication.
Le prix c’était 30$ en one shot.
Entre temps, j’ai comblé mon besoin avec ces deux plugins gratuits basés sur shortcodes :
https://wordpress.org/plugins/woo-product-slider-and-carousel-with-category/
https://wordpress.org/plugins/woo-tabbed-category-product-listing/
Quand tu ne trouves pas chaussure à ton pied dans l’écosystème Divi, ne pas oublier qu’on est toujours sous WordPress où il existe beaucoup d’options alternatives, entre les plugins gratuits du repository, les petites solutions CodeCanyon qui peuvent parfois faire l’affaire et les autres plugins premiums ici et là.
Ici, on a deux plugins qui répondent bien au besoin (un seul besoin à la fois) de façon légère. Ça me parait assez propre comme façon de faire. Après, faut custom l’apparence en CSS, on n’est pas sur le Divi Builder 🙂
P.S. : ça ne veut pas dire que je ne prendrais pas un des deux plugins de custom de shop templates recommandés par la team, c’est complémentaire
Au plaisir !
Super. Merci Nicolas. Je vais tester ces 2 plugins. Pas de problème pour les css.
C’est vrai que je n’avais pas pensé à chercher un plugin qui créé des shortcodes woocommerce. J’ai utilisé les shortcodes woocommerce par defaut plus des boutons avec url vers le panier au final mais c’est limité.
Je n’y avais pas pensé non plus à la base 😀 À force de tourner sur des solutions faites pour Divi, on perd ses bonnes habitudes 😀
Salut à tous les deux.
Je n’ai pas présenté Divi Shop Extended – que j’ai acheté il y a deux ans je crois – car tous les liens sont morts pour trouver ce plugin. Je n’avais pas vu ton info Nicolas.
Effectivement les démos de BodyCommerce ne fonctionne pas sur le site officiel mais la vidéo m’avait suffisamment tenté pour que je l’achète et l’essaye. Je n’ai pas été déçu.
Quand à filtrer ou sélectionner des produits très particuliers sur des pages précises,
j’ai trouvé un module que Marie Comet à créer pour à priori le faire mais que je n’ai pas encore essayé. Si ça vous tente voici le lien: https://mariecomet.fr/2017/02/10/module-woocommerce-divi/
Elle en a fait quelques autres que vous pouvez trouver sur son blog.
J’ai testé les 3 plugins que vous m’avez indiqué. Tous simple d’utilisation et offre des possibilités en plus. Je comparerais ça à des modules divi supplémentaires.
– J’ai mis le woo tabbed sur ma page boutique globale. C’est assez sympa en modifiant très légèrement le css.
– woo slider a l’air vraiment top et je m’en servirai pour d’autres sites.
– Le plugin de Marie ajoute un module divi et est intéressant aussi pour afficher des produits choisis. C’est un peu ça que je cherchais malheureusement il me manque des choses (j’aimerais pouvoir afficher l’ajout au panier et la description du produit). Il n’est pas compatible avec le visual builder.
J’étais tombé sur ses tutos de créations de modules qui sont très intéressants mais c’était trop poussé pour moi. Je vais aller voir ses autres développements.
Je vous dirais si
@Julien Allez hop! Je viens de prendre BodyCommerce du coup. Merci encore pour ce travail d’analyse.
Top! Tu me diras ce que tu en penses.
Bonsoir !
Merci pour cet article qui m’a permis de faire mon choix pour le divi body commerce ! Le problème, je suis complètement débutante sur wordpress en général et je n’arrive absolument pas à l’utiliser. Saurais-tu m’indiquer où trouver un tuto? Merci beaucoup.
Bonjour Emilie, qu’est ce qui te bloque au niveau des options? Je peux sans doute t’aiguiller 😉
Bonjour,
j’aime assez l’idée d’un achat de plugin avec mise à jour à vie., alors je penche pour WC Product Builder .
Reste une question : j’ai des produits avec trois variantes. Est ce que je vais pouvoir gérer l’affichage des variantes avec ce plugin ou me conseillez vous malgré tout BodyCommerce.
Merci pour votre réponse
Bonjour,
à priori les 3 plugins gèrent l’affichage des variations, donc à toi de faire un choix.
Bonne journée
Si quelqu’un a trouvé des plugins pour pouvoir tuner les produits du module boutique (afficher des attributs, l’ajout au panier, les descriptifs …), n’hésitez pas à m’indiquer le plugin. Pour ma part, j’ai trouvé une ligne de code permettant d’avoir le bouton d’ajout au panier. Peut être qu’en partant de ça je peux avoir le reste.
Bonjour. Merci pour vos conseils. Je vais commencer un site e-commerce sur Divi la semaine prochaine. Je vais tenter avec Dici Bodycommerce du coup !!!
Bon courage alors 😉
Merci. Et bravo également votre groupe Facebook ! Plein d’infos…????
Y a du nouveau côté Divi et WooCommerce ou c’est status quo ?
Merci en tout cas pour l’article !
Salut, pas de nouvelles de dates de sortie ou autre pour l’instant 🙁
Bonjour, woo layout injector , fonctionne avec le plug-in membership et abonnement de woo commerce ? Est-il possible de construire une page d’inscription à un abonnement avec le builder Divi ?
bjr
j’ai lu votre article et de ce fait j’ai acheté bodycommerce. Par contre il ne répond pas à 100% à mes besoins, je m’explique:
je créé un site woocommerce de vin, je personnalise la fiche produit avec bodycommerce pour les infos de base, mais je souhaite pour chaque produit rajouter en plus l’année du cépage, des idées de recette etc etc sauf que je ne peux pas mixer bodycommerce et le divi builder pour rajouter ces informations complémentaires, sauf que j’édite la fiche produit, j’ai un lessage d’erreur qui me précise que je ne peux pas mixer les deux builders
Avez vous un plugin qui le permet cela m’éviterai de dépenser à nouveau inutilement
Merci
Bonjour, c’est normal car les deux fonctionnalités sont différentes. En revanche tu peux utiliser Advanced Custom Fields pour créer des nouveaux champs (pour l’année de cépage par exemple) et ensuite afficher ta variable via le builder pour que ce soit automatique sur toutes tes fiches produits.
Bonjour, tu veux créer ta page produit d’abonnement c’est bien ça?
oui
@julien merci pour ta réponse:
concernant Advanced Custom Fields il se trouve dans les options de DiviBodyCommerce ou DiviBuilder ou s’agit il d’un plugin en complément, car j’ai beau chercher, je ne trouve pas
Merci
Bonjour tout le monde ! et e-Crea Web Design
suite à vos commentaires, je pose ma question :
je voudrais prendre BodyCommerce mais est il compatible avec ” Woocommerce Custom Product Addons” de ACOWEBS qui m’a permis de faire pour mes produits des tas d’options clickable sur images. – (info pour e-Crea Web Design) est ce que je pourrais mettre dans un block les attributs que j’ai rajoutés et les placer ou je veux sur ma page produit ?
Hello, pour la compatibilité entre plugin je ne sais pas mais pour les attributs oui, tu pourras les placer ou tu veux.
Vu l’arrivée des ces nouvelles fonctionnalités (non natives) , comment cela se passe au niveau optimisation ? car à mon avis cela va charger encore plus de js et css et tous les tralala avec.
Bonjour, on a encore aucune date de sortie… Ça charge des scripts forcément, mais leur impact reste très limité.
bonjour,
j’aurai une question toute simple, a rajouter a vos précisions. j”aimerai savoir si c’est plugin son compatible avec woobooking? cette a dire es que je pourrai construire ma layout avec le calendrier pour réservation etc…
Bonjour, je ne sais pas nous n’avons pas essayé avec ce plugin, mais tu peux nous envoyer une copie à contact@divi-community.fr et on testera si tu veux.
Bonjour,
Merci pour cet article. Question intéressante pour la comptabilité avec WooBooking. Avez-vous du nouveau sur ce sujet ?
De même je me pose la question de la compatibilité de ces plugins avec le plugin Multivendor WooCommerce et le plugin WCFM permettant une gestion frontend pour les vendeurs. Avez-vous des informations à ce sujet ?
Merci par avance !
Bonjour, ces plugins n’intègrent que les fonctions natives de WooCommerce. Du coup les plugins tierces ne seront pas dispos via des modules.
Bonjour,
Je vous écris plus d’une année plus tard après la rédaction de votre article.
J’utilise woo et DIVI et j’aimerais pouvoir personnaliser “la boutique” de woo.
peut-être simplement modifier le fond blanc ( et voire un peu plus si possible)
Suis-je obligé de passer par l’achat d’un plugin où d’autres solutions nous sont offertes maintenant ?
merci
Si ce sont de petites modifications de styles, tu peux simplement faire ça en CSS.
Sinon, avec Divi 4, tu peux désormais facilement créer un modèle de produit directement avec le Divi Builder.
Great article, thanks! I went ahead and purchased bodycommerce based on this article, but I found too many issues. For example, it made all my custom fields disappear! The author is working on a solution.
Do you have any recommendations or updates given the progress with Divi’s theme builder? Do we still need any of these plugins?
Hello Rex,
The lead dev, Peter, is very reactive, so you can send an email to him.
Regarding the Divi WooCommerce modules, this plugin is very useful for WooCommerce options and some modules that Elegant Themes doesn’t provide 😉
Bonjour,
je cherche un plugins ou module de précommande compatible avec divi comme celui-ci qui inclus la possibilité de précommander un produit hors stock avec date de sortie/commercialisation, versement d’un acompte et un compte à rebours :
Pourriez-vous m’aiguiller svp, je tourne en rond depuis des jours. Car l’éditeur de ce plugins me dit qu’il n’est pas compatible avec le divi builder, je galère donc.
https://store.webkul.com/Pre-Order-WordPress-WooCommerce.html
Merci de votre aide svp
Youssef
Bonjour, tu es sur qu’il n’est pas compatible ? Il ajoute simplement des options via un hook. Il n’y a pas vraiment de raison que ça ne fonctionne pas ?