Personnaliser la page de produits – Divi

Accueil / Livre Blanc Divi / E-commerce – Divi / Personnaliser la page de produits – Divi

Personnaliser la page de produits – Divi

Comme vu avec les articles, vous pouvez personnaliser les modèles de produits publiés sur votre site pour pouvoir attirer et garder le plus longtemps possible les visiteurs.

Avec le générateur de thèmes Divi, vous pouvez également avoir des modèles de produits différents pour chaque catégorie de produits et donc créer d’innombrables conceptions originales faisant de votre site une boutique unique.

Les Templates de produits

Avec Divi, vous pouvez créer un modèle pour les produits en vous rendant sur le Theme Builder et cochant les types de pages désirés.

Personnaliser la page de produits - Divi 1 - Webpick

Le modèle de produit est utilisé à l’échelle du site pour tous les types de produits choisis. Il s’agit d’un modèle prédéfini construit avec ducontenu dynamique, et avec la possibilité d’y rajouter du contenu statique comme des blocs de texte ou des images.

Une fois les types de produits choisis, vous pouvez créer le corps de votre modèle et soit choisir de construire à partir de zéro, choisir la mise en page ou cloner une page existante. Voir le guide de création de pages pour plus d’informations.

Comme Divi offre la possibilité d’utiliser les Layout Packs, vous pouvez utiliser ces modèles prédéfinis pour faciliter votre travail et accélérer la création des sections de votre site.

Les Modules de produits Divi

Divi a été conçu pour être compatible avec WooCommerce sans avoir à effectuer des paramétrages ou des configurations. Une fois WooCommerce activé, Divi vous donne accès à 16 modules relatifs à WooCommerce :

Le module “Ajouter au panier”

Le module “Ajouter au panier” inclut plusieurs sous-éléments que vous pourrez bien sûr configurer individuellement.

Personnaliser la page de produits - Divi 3 - Webpick

Le module “Informations complémentaires”

Ce module permet d’afficher les informations complémentaires de votre produit (les variations).
Cet élément est un des composants des onglets de WooCommerce.

Personnaliser la page de produits - Divi 5 - Webpick

Le module “Fil d’Ariane”

Ce module sert à afficher le chemin d’accès au produit, en précisant toute l’arborescence concernée et ce, depuis la page d’accueil jusqu’à la page du produit.

Ce module sert à afficher le chemin d’accès au produit, en précisant toute l’arborescence concernée et ce, depuis la page d’accueil jusqu’à la page du produit.

Personnaliser la page de produits - Divi 7 - Webpick

Le module “Notification panier”

Ce module correspond à la notification de confirmation qui s’affiche sur la fiche produit lorsque l’utilisateur a cliqué sur le bouton “Ajouter au panier”.

Personnaliser la page de produits - Divi 9 - Webpick

Le module “Description”

Intitulé explicite pour ce module qui affiche la description du produit.
Dans les options, vous pouvez choisir entre la description courte ou la description longue du produit.

Personnaliser la page de produits - Divi 11 - Webpick

Le module “Galerie”

Si vous avez choisi d’ajouter plusieurs images pour illustrer votre produit, utilisez le module “Galerie” pour les afficher sur sa fiche.
Il est préconisé si vous avez besoin de différencier dans votre mise en page l’image principale du produit de ses autres images.
Les paramètres de ce module sont très semblables à ceux du module “Galerie” standard déjà présent dans Divi.

Personnaliser la page de produits - Divi 13 - Webpick

Le module “Images”

Avec ce module vous pouvez d’afficher ou masquer les éléments suivants :

  • l’image principale du produit
  • la galerie d’images du produit
  • le badge de soldes
Personnaliser la page de produits - Divi 15 - Webpick

Le module “Meta”

Ce module permet d’afficher ou masquer les éléments suivants :

  • l’UGS du produit
  • les catégories auxquelles il appartient
  • les tags qui lui sont attribués
Personnaliser la page de produits - Divi 17 - Webpick

Le module “Prix”

Insérez le prix de votre produit : prix actuel et prix barré le cas échéant.

Personnaliser la page de produits - Divi 19 - Webpick

Le module “Évaluation”

Si vous avez activé les avis dans les paramètres de votre produit, ce module affichera les notes laissées par vos clients avec un barème composé d’étoiles.

Vous pouvez choisir ou non d’afficher :

  • la notation avec les étoiles
  • le nombre de clients ayant laissé leurs avis
Personnaliser la page de produits - Divi 21 - Webpick

Le module “Produits similaires”

Si, dans les paramètres de votre produit, vous avez précisé des références dans le champ “Ventes croisées”, ces produits similaires s’afficheront sur votre fiche produit.

Personnaliser la page de produits - Divi 23 - Webpick

Le module “Avis”

Complémentaire au module “Notation”, ce module affichera les avis laissés par vos clients sur vos produits.

Vous pouvez choisir de faire apparaitre ou non :

  • l’avatar de l’auteur de l’avis
  • le nombre de commentaires
Personnaliser la page de produits - Divi 25 - Webpick

Le module “Stock”

Ce module affichera l’état du stock du produit choisi si vous avez coché la case “Activer la gestion de stock au niveau produit” dans ses paramètres.

Personnaliser la page de produits - Divi 27 - Webpick

Le module “Onglets”

Grâce à ce module, insérez sur votre fiche produit, sous la forme d’onglets les informations suivantes (vous pouvez les (dés)activer individuellement dans les réglages du module) :

  • description longue
  • informations complémentaires
  • avis
Personnaliser la page de produits - Divi 29 - Webpick

Le module “Titre”

Ce module permet tout simplement d’afficher le nom du produit en bénéficiant des mêmes possibilités de personnalisation que celles présentes dans un module “Texte” standard.

Personnaliser la page de produits - Divi 31 - Webpick

Le module “Montée en gamme”

Afin de vous aider à réaliser des ventes incitatives, ce module affichera les produits complémentaires que vous aurez sélectionnés.
Pour ce faire, dans les paramètres de votre produit, ajoutez des références dans le champ “Montée en gamme”.

Personnaliser la page de produits - Divi 33 - Webpick

Vous avez besoin d’expertise sur votre projet?

Vous pouvez nous contacter via ce formulaire de contact, nous ne manquerons pas de vous répondre.

5 + 9 =