Votre client veut une boutique qui se démarque, avec des fiches produit uniques, un carrousel de promotions sur la page d’accueil et un checkout qui inspire confiance. Et il la veut pour la semaine prochaine. Divi 5 WooCommerce ouvre des possibilités que le module Woo Products classique ne permettait pas. Je vous montre comment exploiter le Loop Builder pour créer des affichages produit qui convertissent.
L’essentiel à retenir
- Le Loop Builder remplace avantageusement le module Woo Products pour les affichages personnalisés
- Les modules WooCommerce natifs de Divi 5 permettent de concevoir chaque élément de fiche produit individuellement
- La personnalisation de la page panier et du checkout améliore directement le taux de conversion
- Les champs personnalisés (via ACF) s’intègrent naturellement dans vos boucles de produits
- Une boutique performante nécessite un design impeccable, que vous pouvez obtenir en suivant notre guide des mises en page modernes Divi 5
Comprendre les deux approches d’affichage produit dans Divi 5
Divi 5 propose deux méthodes distinctes pour afficher vos produits WooCommerce. Chacune répond à des besoins différents, et comprendre leurs forces respectives vous fera gagner des heures de développement.
Le module Woo Products : simplicité et rapidité
Le module Woo Products reste l’option la plus directe pour afficher une grille de produits. Vous le déposez sur votre page, configurez quelques filtres, et vos produits apparaissent. Image, titre, prix, badge promo, étoiles de notation, bouton d’ajout au panier : tout est préconfiguré.
Cette approche fonctionne parfaitement dans plusieurs cas : catalogue standard sans personnalisation particulière, affichage rapide des produits en promotion, grille de produits connexes sur une fiche produit. Le module gère automatiquement la connexion avec WooCommerce et propose des filtres intégrés : produits vedettes, en solde, catégorie spécifique.
Plus :
- Configuration en quelques clics
- Filtres WooCommerce natifs (vedettes, soldes, best-sellers)
- Pas de connaissance technique requise
- Maintenance simplifiée
Points de vigilance :
- Structure de carte fixe, peu personnalisable
- Impossible d’ajouter des champs personnalisés
- Options de mise en page limitées (pas d’accès aux contrôles Grid/Flexbox avancés)
- Design identique pour toutes les cartes produit
Le Loop Builder : liberté totale de conception
Le Loop Builder adopte une philosophie radicalement différente. Au lieu de partir d’un module préconfiguré, vous construisez votre carte produit module par module. Un conteneur en mode « Loop », configuré sur le type de post « Product », répète automatiquement la structure pour chaque produit correspondant à vos critères.
Cette méthode demande plus de travail initial, mais elle supprime toute limitation créative. Vous décidez de l’emplacement exact de chaque élément, vous ajoutez des champs personnalisés, vous appliquez les techniques CSS Grid et Flexbox pour des layouts impossibles avec le module standard.
Sur un projet de boutique de vêtements, j’ai utilisé le Loop Builder pour créer des cartes produit avec un badge « Éco-responsable » dynamique (via un champ personnalisé ACF), une jauge de stock visuelle, et une mise en page asymétrique où l’image déborde sur le bloc de détails. Le taux de clic vers les fiches produit a progressé de 31% par rapport à la grille standard.
Configurer le Loop Builder pour WooCommerce
La mise en place d’une boucle de produits suit une logique précise. Voici la méthode que j’applique systématiquement.
Étape 1 : créer la structure du conteneur
Ajoutez un conteneur (Container) à votre page et activez l’option « Loop » dans ses paramètres. Sélectionnez « Products » comme type de requête. Définissez le nombre d’éléments à afficher et les critères de filtrage : catégorie, tags, ordre de tri.
Le conteneur devient alors un template qui se répète pour chaque produit. Tout module que vous placez à l’intérieur s’affichera autant de fois qu’il y a de produits correspondants.
Étape 2 : assembler les modules de la carte produit
À l’intérieur du conteneur en boucle, construisez votre carte produit avec les modules de votre choix :
- Module Image : connectez-le à « Product Featured Image » via le contenu dynamique
- Module Heading : associez-le à « Product Title »
- Module Text : affichez « Product Price » ou « Product Short Description »
- Module Button : liez-le à l’action « Add to Cart » ou à l’URL du produit
Chaque module accepte le contenu dynamique via l’icône de base de données dans ses réglages. Divi propose automatiquement les champs WooCommerce disponibles.
Étape 3 : appliquer le style et la mise en page
C’est ici que le Loop Builder révèle sa puissance. Utilisez les contrôles Flexbox pour aligner horizontalement l’image et les informations produit. Appliquez CSS Grid sur le conteneur parent pour créer une grille responsive. Ajoutez des interactions au survol pour dynamiser l’affichage.
Pour afficher vos produits en promotion sur votre page d’accueil, vous pouvez utiliser le Loop Builder pour créer une grille de produits personnalisée avec des effets visuels impossibles à obtenir avec le module standard.
Configuration recommandée pour une grille 3 colonnes :
- Conteneur parent en CSS Grid
- Template Gap : 30px (horizontal et vertical)
- Colonnes : 3 sur desktop, 2 sur tablette, 1 sur mobile
- Carte produit avec ratio d’image fixe pour uniformité
Personnaliser la fiche produit avec les modules WooCommerce
Divi 5 intègre des modules dédiés à chaque élément d’une fiche produit. Cette granularité permet de concevoir des pages produit sur mesure via le Theme Builder.
Les modules disponibles pour la fiche produit
Voici les modules WooCommerce que vous pouvez combiner librement :
- Product Images : galerie principale avec zoom et vignettes personnalisables
- Product Title : titre avec contrôle typographique complet
- Product Price : affichage du prix et des promotions
- Product Rating : étoiles de notation
- Product Description : description longue avec mise en forme
- Product Meta : catégories, tags, SKU
- Product Tabs : onglets (description, informations, avis)
- Add to Cart : bouton d’ajout avec sélecteur de quantité
- Related Products : produits associés
Créer un template de fiche produit personnalisé
Dans le Theme Builder de Divi 5, créez un nouveau template assigné au type « Product ». Utilisez CSS Grid pour structurer votre layout : zone image à gauche, informations à droite, tabs en pleine largeur en dessous.
Sur une boutique de produits cosmétiques, j’ai conçu une fiche avec l’image principale occupant 60% de la largeur, un bloc sticky pour le prix et le bouton d’achat, et des onglets redessinés en accordéon sur mobile. Le temps passé sur les fiches produit a augmenté de 45 secondes en moyenne.
Plus :
- Contrôle total sur chaque élément
- Cohérence avec le design global du site
- Optimisation possible par type de produit
- Intégration native des champs personnalisés
Points de vigilance :
- Configuration initiale plus longue
- Nécessite une planification de la structure
- Tests obligatoires sur plusieurs types de produits
Modifier la page panier et le checkout
L’expérience d’achat ne s’arrête pas à la fiche produit. Les pages panier et checkout influencent directement le taux de conversion.
Personnaliser le panier avec Divi 5
Le module Cart de Divi 5 permet de styliser entièrement la page panier. Vous contrôlez l’apparence du tableau des produits, les boutons de mise à jour et de passage à la caisse, les zones de codes promo.
Optimisations recommandées :
- Ajouter des badges de réassurance (livraison gratuite, retours faciles)
- Afficher les produits recommandés sous le panier
- Simplifier visuellement le tableau sur mobile
- Mettre en évidence le bouton de validation
Créer un checkout personnalisé
La page de paiement est l’étape critique où les abandons de panier se multiplient. Divi 5 vous permet de redesigner cette page pour la rendre plus rassurante et fluide.
Le module Checkout se décompose en sections : informations client, adresse de livraison, méthode de paiement, récapitulatif. Chaque section accepte un style indépendant, et vous pouvez réorganiser leur ordre.
J’ai travaillé sur un checkout mono-colonne avec progression visuelle (étapes numérotées), récapitulatif de commande sticky sur desktop, et icônes de sécurité bien visibles. Le taux d’abandon a diminué de 18% après cette refonte.
Éléments à optimiser en priorité :
- Clarté des champs de formulaire
- Visibilité des méthodes de paiement acceptées
- Récapitulatif de commande toujours visible
- Badges de confiance (paiement sécurisé, garanties)
Intégrer des champs personnalisés avec ACF
WooCommerce stocke des données standard : prix, stock, catégories. Mais vos produits ont souvent des informations spécifiques que le module Products standard ne peut pas afficher.
Configurer ACF pour WooCommerce
Advanced Custom Fields (ACF) reste la référence pour ajouter des champs personnalisés aux produits. Créez un groupe de champs assigné au type « Product » et définissez vos champs : matière, pays d’origine, certification bio, temps de livraison estimé.
Ces champs apparaissent ensuite dans l’interface d’édition de chaque produit, et surtout, ils deviennent accessibles dans le Loop Builder via l’option « Custom Field » du contenu dynamique.
Afficher les champs personnalisés dans le Loop Builder
Une fois vos champs ACF configurés, intégrez-les dans votre boucle de produits :
- Ajoutez un module Text dans votre carte produit
- Activez le contenu dynamique
- Sélectionnez « Custom Field »
- Entrez le nom du champ ACF
Vous pouvez combiner texte statique et champ dynamique. Par exemple : « Matière : [champ dynamique material] » affichera « Matière : Coton biologique » pour chaque produit.
Cas d’usage fréquents :
- Badge éco-responsable conditionnel
- Délai de livraison personnalisé par produit
- Certifications et labels
- Informations d’entretien
- Note interne (non affichée) pour le tri
Protocole de test pour votre boutique Divi 5 WooCommerce
Avant de mettre en ligne, validez systématiquement ces points.
Contexte de test :
- Divi 5.0+, WordPress 6.4+, WooCommerce 8.0+
- Plugins actifs : ACF Pro, Yoast SEO, WP Rocket (ou équivalent)
- Produits test : minimum 10 avec variations de prix, stock, catégories
Scénario de test :
- Parcourir le catalogue sur desktop, tablette, mobile
- Vérifier l’affichage de tous les types de produits (simple, variable, groupé)
- Tester le parcours complet d’achat (panier → checkout → confirmation)
- Valider les emails transactionnels
- Contrôler les performances avec PageSpeed Insights
Mesures cibles pour l’e-commerce :
- LCP < 2,5s sur les pages catalogue
- TTI < 3,8s sur les fiches produit
- CLS < 0,1 (crucial pour éviter les clics accidentels)
- Taux de conversion baseline : mesurez avant/après optimisation
Questions fréquentes
Le Loop Builder fonctionne-t-il avec les produits variables ?
Le Loop Builder affiche les produits variables comme les produits simples. Cependant, les variations (taille, couleur) ne s’affichent que sur la fiche produit individuelle, pas dans la grille. Pour une boutique de vêtements avec beaucoup de variations, gardez le flux standard vers la fiche produit complète.
Peut-on utiliser le Loop Builder dans le Theme Builder ?
Absolument. C’est même la méthode recommandée pour créer des templates de pages catalogue ou de catégories. Configurez le Loop Builder avec l’option « Posts for Current Page » pour qu’il affiche automatiquement les produits de la catégorie consultée.
Les filtres WooCommerce (produits vedettes, soldes) sont-ils disponibles dans le Loop Builder ?
Le Loop Builder n’intègre pas nativement les filtres spécifiques WooCommerce. Pour filtrer par produits vedettes ou en solde, utilisez les catégories, tags, ou créez des requêtes personnalisées via des plugins comme FacetWP. Pour un simple affichage filtré, le module Woo Products reste plus direct.
Le checkout personnalisé est-il compatible avec les passerelles de paiement ?
Oui, la personnalisation visuelle n’affecte pas la fonctionnalité. Stripe, PayPal, et les autres passerelles fonctionnent normalement. Testez cependant systématiquement le parcours complet après toute modification du checkout.
ACF est-il obligatoire pour les champs personnalisés ?
Non, d’autres solutions existent : Pods, Meta Box, ACPT, Toolset. ACF reste le plus répandu et le mieux documenté. Certaines extensions WooCommerce ajoutent également leurs propres champs personnalisés accessibles via le Loop Builder.
Mon verdict : module Products ou Loop Builder ?
Le module Woo Products convient si :
- Vous créez un catalogue standard rapidement
- Vous n’avez pas besoin de champs personnalisés
- Vous utilisez les filtres natifs WooCommerce (vedettes, soldes)
- Vous privilégiez la simplicité de maintenance
Le Loop Builder convient si :
- Vous voulez un design de carte produit unique
- Vous affichez des champs personnalisés (ACF)
- Vous maîtrisez CSS Grid et Flexbox pour des layouts avancés
- Vous créez une expérience e-commerce différenciante
Dans la pratique, les deux cohabitent. J’utilise souvent le module Products pour les widgets de produits associés, et le Loop Builder pour les sections phares de la page d’accueil et les pages catégories personnalisées.
Checklist de mise en route WooCommerce + Divi 5
- Installer WooCommerce et configurer les options de base (devises, taxes, livraison)
- Créer au moins 10 produits tests avec images, descriptions, catégories
- Configurer ACF avec les champs personnalisés nécessaires
- Créer un template de fiche produit dans le Theme Builder
- Construire une grille de produits avec le Loop Builder
- Personnaliser les pages panier et checkout
- Tester le parcours complet sur tous les devices
- Mesurer les performances et optimiser
Prochaines étapes
Vous avez les bases pour créer une boutique WooCommerce personnalisée avec Divi 5. Pour aller plus loin :
- Maîtrisez CSS Grid vs Flexbox pour des mises en page produit sophistiquées
- Ajoutez du dynamisme avec le tutoriel carrousel de témoignages, adaptable aux produits vedettes
- Inspirez-vous des exemples de mise en page Divi 5 pour vos pages catégories
- Approfondissez le Loop Builder pour des affichages dynamiques avancés
Le jour où vous livrerez votre première boutique avec des fiches produit sur mesure, des grilles dynamiques et un checkout optimisé, vous comprendrez pourquoi le temps investi dans Divi 5 WooCommerce transforme vos projets e-commerce.
