Créer les pages de votre site e-commerce avec le thème builder Divi et Woocommerce

Créer une boutique en ligne avec Divi et Woocommerce a été grandement simplifié depuis l’intégration des modules woocommerce sur le builder du thème phare de l’éditeur Elegant Themes. Cette fonctionnalité offre donc désormais la possibilité de construire, avec le builder Divi, un design totalement personnalisé pour chaque produit woocommerce et sur chaque page d’un site web WordPress.

Nous n’allons pas entrer ici dans le détail du thème Divi, qui fera probablement l’objet d’un article à part entière, mais nous évoquerons néanmoins en fin d’article certains points et paramètres nécessaires pour créer un site site e-commerce avec Divi et Woocommerce.

Nous allons donc commencer par présenter les 23 modules woocommerce proposés par Divi ainsi que, pour chacun, les possibilités offertes tant par le builder que les action woocommerce envisageables pour les développeurs souhaitant travailler avec le code via le fichier functions ou la création de plugins personnels.

Nous détaillerons enfin le processus complet de création d’une fiche produit woocommerce avec Divi avant de présenter quelques sites web ou de démo utilisant Divi pour construire le template d’un produit woocommerce.

23 modules de la page produit de Divi pour Woocommerce

Le constructeur de Divi vous permet de construire votre modèle de page produit à l’aide de blocs correspondant à chaque fonctionnalité de WooCommerce.

Du titre à la description, le prix du produit, en passant par ses informations et son fil d’Ariane et, bien sûr, jusqu’au bouton permettant d’ajouter ledit produit au panier du client, chaque module woocommerce pour Divi propose un certain nombre d’onglets permettant de définir quelles informations seront à afficher, les règles de style à appliquer au module, ainsi que les options de personnalisation HTML et CSS et les conditions d’affichage du bloc dans la page.

Les modules woocommerce fonctionnent donc comme l’ensemble des modules du thème Divi ce qui facilite encore leur intégration sur le site.

Des fonctionnalités partagées par l’ensemble des modules Divi Woocommerce

Certaines fonctionnalités des blocs du Builder Divi sont communes à la quasi-totalité des modules woocommerce.

Ainsi, si l’onglet « Contenu » permettra bien sûr d’afficher dynamiquement le contenu souhaité pour le produit courant, il offrira aussi la possibilité de présenter celui de n’importe que produit présent sur le site web, permettant ainsi de créer des landing pages déconnectée de la boutique à proprement parlé.

De même, l’onglet « Style » permettra de styliser l’ensemble des marges, bordures, couleur des textes et des liens, etc., des éléments affichés par le module Divi WooCommerce.

Enfin, l’onglet « Avancé » correspond quant à lui aux options proposées propres à tous les modules : code CSS personnalisé, ajout d’une classe et d’un identifiant, conditions de visibilité etc.

Les modules Divi pour la page produit de Woocommerce

Les concepteurs de Divi ont pris le parti de créer un module différent pour chaque élément de la fiche produit Woocommerce afin d’offrir aux créateurs de site web la possibilité de redéfinir un design complet pour chaque produit ou chaque landing page du site. EN voiçi la liste détaillée.

Le module fil d’Ariane

Ce bloc Divi pour Woocommerce, si essentiel pour le SEO de votre site e-commerce, permet d’insérer sur la fiche du produit la liste des liens à suivre pour y accéder depuis la page d’accueil du site.

L’onglet « Contenu » du bloc vous permettra notamment de définir un texte définissant le niveau de la page d’accueil de votre site Woocommerce ainsi que le séparateur des liens du module.

N’oubliez donc jamais d’utiliser ce bloc Divi pour Woocommerce sous peine de pénaliser la visibilité de votre produit, voire de l’ensemble de votre site.

Les notifications du processus de vente avec le module « Woo Cart Notice » de Divi pour WooCommerce

Le module Divi de notification woocommerce permet d’afficher les notes d’informations pour chaque étape du processus de vente de la boutique en ligne, soit : la page produit, le panier (cart) ainsi que la page de paiement (le checkout).

Le contexte de la notification Woocommerce ain que le produit cible sont définis via l’onglet « Contenu » du module DIvi.

Ce module Divi pour Woocommerce permet donc d’afficher des notifications sur l’ensemble du site web, fiches produits ou zones du site.

Le module de titre

Le titre d’une page est un élément primordial de la conception web, et la création d’une fiche de produit de votre boutique e-commerce ne déroge bien évidemment pas à la règle. Il est donc important de pouvoir gérer ce module woocommerce directement à l’aide du builder Divi.

L’utilisateur pourra personnaliser ce contenu de la même façon qu’un bloc Divi de texte standard : taille, couleur, police, marges, etc.

Le module Divi images (Woo Product images)

Ce module Divi permet d’afficher la totalité du bloc images du produit woocommerce.

L’utilisateur pourra choisir via l’onglet « Contenu »  d’afficher l’image principale, la galerie d’images du produit ainsi que l’icône de promo de l’article (si toutefois une promo a été définie dans l’espace d’administration de Woocommerce).

L’onglet « Style », outre l’espacement des éléments (ses marges internes et externes), leur couleur, taille, etc., permettra de définir les styles du « badge de vente » (de promo).

Le module Divi WooCommerce galerie

Dissocier l’affichage de l’image principale du produite et sa galerie permet de créer un template complexe et de disposer la galerie selon le design souhaité.

Les options clés de ce module permettent de d’afficher un titre ou une légende sous chaque image de la galerie, et de paginer l’affichage.

Le module Divi de description de produit woocommere

L’onglet « Contenu » de ce bloc Divi permet d’afficher la description du produit – dans sa version longue ou brève (courte) où que ce soit dans la page.

Notez que là-encore, le builder Divi offre la possibilité de cibler n’importe quel produit et d’utiliser ce module woocommerce sur plusieurs mises en page de la boutique en ligne.

L’onglet « Style » permettra un travail précis de l’ensemble des contenus de la description woocommerce (titres et contenus) facilitant l’intégration des éléments SEO dans la page.

Le module de données (Woo Product Meta)

L’onglet « Contenu » du module Divi permet de choisir d’afficher l’identifiant de l’article, sa catégorie et ses étiquettes.

Le module Divi d’état de stock (Woo Stock)

Ce module affichera le niveau du stock pour le produit WooCommerce spécifique. Ici, paramètre de contenu ne sera accessible, l’essentiel des réglages seront donc orientés sur les styles d’affichage de l’information (couleur, marge, police, taille, etc.).

Le module Divi de prix du produit Woocommerce

Ce module autorise la personnalisation du style d’affichage du prix courant mais aussi, en cas de promotion sur le site, de définir des styles différents pour le prix barré et le prix soldé.

Le module Divi de bouton d’ajout au panier Woocommerce

Ce bloc permet très simplement d’ajouter et de personnaliser un bouton d’ajouter au panier WooCommerce. 2 options sont cependant à retenir : la possibilité d’afficher le champ de quantité ainsi que l’état du stock en dessous du bouton.

Ce module Divi woocommerce d’ajout au panier joue un rôle très important sur la fiche du produit puisque c’est là que les développeurs pourront, ajouter des champs complémentaires ou de déclencher des actions permettant de personnaliser davantage le produit. Cette fonctionnalité permet donc d’intégrer n’importe quel élément supplémentaire sur un template divi pour woocommerce.

Le module d’onglets Woocommerce, informations, avis et notes du produit

Ce module DIvi permet d’afficher n’importe quelle information de produit woocommerce sur n’importe quelle page du site web WordPress.

Par défaut, le paramétrage de l’onglet « Contenu » permet d’afficher trois types d’informations : la description du produit, les informations complémentaires et les avis clients. L’utilisateur pourra aussi choisir de présenter, ou pas, le titre des informations complémentaire dans l’onglet wooCommerce du même nom.

Le module d’informations complémentaires Woocommerce

Le bloc de contenu permet d’ajouter, sous forme de tableau simple, les caractéristiques où que ce soit dans la page du produit woocommerce. Cette fonctionnalité Divi permet donc, par exemple, de dissocier les informations du produit des avis et notations des clients.

Le module d’avis pour votre produit Woocommerce

Ce bloc fourni aux clients une fonctionnalité leur permettant de noter l’article affiché en cliquant sur les étoiles correspondant aux notes allant de 1 à 5, ainsi qu’un commentaire (un avis) sur le produit.

Notez que WooCommerce permet de filtrer les avis laissés sur le site en limitant la fonctionnalité au seul client certifié.

Le module d’affichage des évaluations (notations) des produit Woocommerce

Ce bloc permet d’afficher les notes et avis laissés par les clients sur la page même du produit woocommerce.

Deux modules de produits connexes avec les blocs de « Montée en gamme » et de « Produits similaires » de Divi pour Woocommerce

Le processus de vente d’une boutique en ligne inclut généralement des fonctionnalités d’achats connexes et/ou de montée en gamme, bien souvent sur la page même du produit.

Woocommerce permet de proposer ces fonctionnalités au client, et Divi offre désormais la possibilité de traiter ces zones de façon indépendantes, comme n’importe quel élément des fiches produits de la boutique en ligne.

Le module de produits similaires (en relation)

Ce module fait partie des fonctionnalités très courantes sur les sites e-commerce. Il s’agit de proposer aux clients des produits en relation avec celui qu’il est sur le point d’acheter. Les paramètres se résument ici à définir le nombre de produits en relation à afficher, sur combien de colonnes et dans quel ordre.

Le module Divi Woocommerce monté en gamme (Woo Product Upsells)

De façon similaire au contenu en relation, le module de montée en gamme (upsells) permet de proposer des articles à plus forte valeur ajoutée à un client. Ses paramètres seront donc identiques au précédent.

Mais le constructeur Divi ne s’arrête bien évidemment pas à la composition d’une page de produit woocommerce puisque l’éditeur du thème premium a aussi simplifié la construction d’un modèle de panier ainsi que d’une page de paiement spécifique au plugin e-commerce phare de WordPress.

Les modules Divi du panier Woocommerce

Le panier de Woocommerce se décompose en deux blocs fonctionnels permettant d’afficher respectivement :

Le tableau des produits choisis par le client ainsi que les quantités et le prix individuel et le sous-total de l’article ;

Le tableau du montant total du paner WooCommerce incluant notamment celui de la TVA associée à la commande.

Il est donc assez naturel de retrouver dans le builder ces deux blocs accessibles depuis des modules Divi correspondant.

Le module des produits ajoutés de panier Woocommerce

Ce bloc Divi est très complet, il permet en autre de choisir d’afficher, ou non, l’image du produit, le code coupon, le bouton de mise à jour du panier ainsi que le bouton de suppression de l’article de la liste des achats.

L’onglet « Contenu » du module permet de choisir d’affichert (ou pas) l’image du produit, le code coupons, le bouton de mise à jour du panier (« Show Update Cart Button », le bouton de suppression de l’article (« Show Remove Item Button »).

L’onglet « Style » quant à lui permet un réglage précis du style du tableau du panier : en-tête et corps du tableau, les lignes et les cellules.

Notons qu’il est aussi possible de définir des règles de style pour l’icône de suppression de produit ;-).

Le module Divi de total de panier Woocommerce

Le module Divi du total du panier woocommerce ne présent quant à lui que des options et paramètres de styles de présentation. Les paramètres d’affichage du tableau des prix du panier sont sensiblement les mêmes que le module Divi précédent.

Les modules Divi de la page de paiement de Woocommerce (le checkout)

Lors de l’activation du builder, Divi convertit automatiquement les fonctionnalités de la page en modules Divi pour WooCommerce, laissant à nouveau la possibilité au créateur du site de créer un design et une expérience utilisateur totalement personnalisé sur le site e-commerce.

Les modules d’informations de facturation (Woo Checkout billing)

Ce module permet d’afficher un formulaire correspondant aux informations de facturation du client : nom prénom, adresse de livraison, téléphone, etc.

Les modules Divi d’information de livraison (Woo Checkout Shipping)

Ce module Divi est identique au précédent et permet de présenter un formulaire Woocommerce dédié aux informations de livraison du client.

Le module Woocommerce des détails de la commande

Ce module, présenté sous l’intitulé « Woo Checkout details », permet d’afficher à nouveau le détailsde la commande sur la page de paiement.Pour chaque produit acheté, la quantité et son prix individuel, ainsi que le montant total de la commande est présenté sur deux colonnes.

Le module Divi woocommerce d’informations de commande

Le module, présenté sous l’intitulé « Woo Checkout Informations » affiche un petit formulaire complémentaire proposé au client afin qu’il renseigne des informations utiles à sa livraison.

Le module Divi Woocommerce de paiement

Cette fonctionnalité permet d’afficher la liste des types de paiements proposés sur la boutique WooCommerce (Carte bleue, PayPal, à livraison, etc.) ainsi que le formulaire de paiement proprement dit.

Insérez les produits woocommerce n’importe où sur votre site à l’aide du module Divi Woo Products

Le dernier module Divi que nous présentons ici est le bloc des produits Woocommerce qui permet de présenter les articles de la boutique en ligne WooCommerce que n’importe où sur le site web.

L’onglet « Contenu » de cette fonctionnalité permet de trier les produits par date, par popularité, par ventes ou catégories d’articles.

L’onglet « Style » permet définir les paramètres d’affichage pour la totalité des éléments de présentation des produits.

Ce module Divi WooCommerce est donc très utile pour construire une page d’accueil ou une landing page personnalisée.

Tutoriel rapide : quelques conseils pour créer votre premier modèle de page Divi pour Woocommerce

Je vous le disais en début d’article, nous n’allons pas voir ici comment installer WordPress, télécharger Divi ou apprendre à paramétrer chaque réglage de WooCommerce. Nous allons donc nous concentrer sur la création rapide d’un template de page produit en passant par le Divi builder ou le visual builder du thème.

Définir un modèle de page avec ou sans barre latérale pour votre fiche produit WooCommerce

• Nul besoin de rappeler ici les deux moyens offerts à l’utilisateur WordPress pour créer un produit :
• Passer par le menu gauche « Produits » – immédiatement en dessous de l’élément « Woocommerce » – ;
• Passer par le menu supérieur du CMS « Créer » -> « « Produit » accessible une fois réalisée votre connexion à la zone d’administration de WordPress.

Une fois le thème ou le plugin Divi builder installé sur le site, l’écran d’édition des pages WordPress comme celui des produits WooCommerce, propose un bloc de réglages intitulée « Paramétrage de la page Divi ». Cette option permet à l’utilisateur d’afficher ou de masquer une barre latérale sur la page Divi du produit WooCommerce.

Par défaut le modèle de page produit woocommerce présente déjà une disposition en colonnes qui sera restituée lors de l’activation du builder Divi sur la page d’un produit woocommerce et il y a fort à parier que vous souhaiterez construire un layout comportant des colonnes sur votre modèle. Il est donc vivement conseillé de commercer avec un modèle sans barre latérale.

Notez que l’option « Contenu du produit » qui permet de créer votre page WooCommerce à partir de zéro, et bien qu’une option par défaut existe, il vaut mieux utiliser l’option « Construire à partir de zéro » pour personnaliser votre produit en fonction de vos besoins.

Une fois ces réglages effectuer, il faudra alors activer le constructeur Divi pour pouvoir accéder aux différents modules Divi woocommerce.

Accéder aux modules Divi WooCommerce depuis la page d’édition d’un produit

Depuis l’écran d’édition d’une fiche de produit de votre boutique WordPress, un bouton violet d’accès au constructeur Divi intitulé « Utiliser le générateur » vous permet d’ouvrir le constructeur direcement dans la page d’édition et/ou le Visual Builder (l’éditeur visuel de Divi).

Le Divi builder vous permet, comme pour le reste des pages du site, d’ajouter des modules WoocCommerce là où vous en avez besoin dans la page.

Votre page Divi se décompose en sections, lignes et colonnes. C’est à l’intérieur de ces colonnes que vous ajouterez les modules divi pour construire votre design de produit woocommerce

Après avoir intégré une ligne du constructeur Divi, il vous suffit donc de cliquer sur le bouton gris « plus » (« + ») pour ouvrir la liste des modules et de recherche « Woo » pour la filtrer et n’afficher que les blocs WooCommerce.

Notez quand même que l’utilisation du Divi builder sur une page de produit WooCommerce permet de remplacer automatiquement et par défaut tous les éléments woocommerce de la page par des modules Divi équivalents, ce qui est très pratique pour créer des design complexes pour vos fiches de produits woocommerce.>/p>

Exemples de pages produits Divi pour Woocommerce

Elegant Themes l’éditeur de Divi, propose quelques exemples de pages de produits permettant de comprendre l’utilité de pouvoir utiliser chaque composant woocommerce de façon indépendante afin de créer un design unique pour chaque produit. Les projets e-commerce mettant à ce point l’accent sur la création graphiques sont assez rares, mais ces pages ont le mérite de donnée une bonne idée des possibilités offertes par les modules Divi woocommerce :

• https://www.elegantthemes.com/demos/product/indoor-plant-planter/
• https://www.elegantthemes.com/demos/product/travel-backpack/
• https://www.elegantthemes.com/demos/product/assorted-macarons/

Divi, une très bonne alternative aux thèmes Woocommerce pour la création de votre boutique en ligne

Le thème phare d’Elegant Themes s’affirme donc comme une très bonne solution pour la création d’un site e-commerce sur WordPress avec Divi et Woocommerce. L’utilisation des modules indépendants de Woocommerce au sein des pages créées avec le builder Divi apporte non seulement une souplesse de conception et d’intégration des styles sur les pages de la boutique en ligne, mais aussi un réel confort de gestion des produits et des contenus sur le site.

Enfin, les modules woocommerce Divi utilisant le code sous-jacent de la boutique en ligne, leur intégration au sein de la structure générée par le constructeur Divi permettra aux développeurs de personnaliser tout ou partie des fonctionnalités des pages de produit, de panier ou de paiement.

L’utilisation de Divi et Woocommerce contribue donc de toute évidence à créer une boutique e-commmerce simple d’utilisation pour un prix très compétitif.
N’hésitez pas à demander votre devis de création de site e-commerce à votre webmaster freelance.

FAQ Divi wooocommerce

Puis-je utiliser Divi et WooCommerce sur n’importe quel CMS ?

Non, Divi et WooCommerce sont exclusivement disponibles sur WordPress. Il sera donc nécessaire d’installer un site WordPress sur un serveur local ou directement chez votre hébergeur pour pouvoir utiliser Divi et WooCommerce.

Quel sont les prix d’un thème Divi et d’une boutique en ligne WooCommerce ?

WooCommerce est un plugin gratuit à télécharger depuis le site du système e-commerce ou depuis la page d’extensions de WordPress. IL faut néanmoins comprendre que beaucoup de plugins essentiels pour une activité e-commerce seront payants et disponibles sur le site Woocommerce.com ou autre marketplace.
Divi quant à lui est un thème payant. Une licence annuelle est proposée au prix de 89 $ par an ou en illimité pour 249 $.

Le constructeur Divi est-il utilisable avec n’importe quel thème WordPress ?

Nombre de thèmes proposés sur WordPress présentent déjà un builder tel que Elemntor, ou Visual Composer mais il sera toutefois possible d’utiliser le constructeur Divi sur une page n’étant pas elle-même prise en charge par un builder WordPress.

Des modules Divi woocommerce permettenr de construire une page de panier ou de paiement, mais comment supprimer les pages existantes ou les modifier ?

Le titre des pages utilisées par défaut par WooCommerce est généralement très parlant : « Panier » « Paiement », etc., il est donc assez simple de les identifier. Modifier ces pages consistera ensuite à supprimer le shortcode woocommerce présent sur ces pages et à activer le Divi builder pour ajouter les modules correspondant à ces fonctionnalités en fonction de vos besoins.

Est-il possible d’utiliser les blocs Divi woocommerce avec un développement de fonctionnalité personnalisée ?

Oui, les modules Divi utilisent le code sous-jacent de WooCommerce pour appeler les fonctionnalités sur la page, il est donc possible d’utiliser une action ou un filtre PHP sur la quasi-totalité des modules proposés.

Divi est-il optimisé pour le référencement et/ou permet-il de faire du SEO dans de bonnes conditions ?

Comme les autres thèmes (dits) premium et systèmes e-commmerce du marché, Divi et Woocommerce nécessitent un travail en profondeur pour compenser le poids des CSS et autres scripts embarqués leur permettant de développer l’ensemble de ces fonctionnalités. Il est néanmoins tout à fait possible d’optimiser tant Divi que Woocommerce pour leur faire gagner en performances, parfois corriger les systèmes de liens internes, et les aider à positionner le site sur les moteurs de recherches.

Divi propose-t-il un guide d’utilisation ou des tutoriels pour faire ses premiers pas ?

L’éditeur du thème premium Divi propose très régulièrement des tuto sur le blog du site Elegant Themes. Mais la communauté Divi est aussi de plus en plus large et vous trouverez facilement des tutoriels en ligne pour créer ou gérer votre boutique Woocommerce avec Divi.