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 2 Personnaliser la page de produits - Divi 1 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-51.png)
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 4 Personnaliser la page de produits - Divi 3 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-53.png)
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 6 Personnaliser la page de produits - Divi 5 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-54.png)
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 8 Personnaliser la page de produits - Divi 7 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-55.png)
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 10 Personnaliser la page de produits - Divi 9 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-56.png)
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 12 Personnaliser la page de produits - Divi 11 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-57.png)
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 14 Personnaliser la page de produits - Divi 13 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-58.png)
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 16 Personnaliser la page de produits - Divi 15 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-59.png)
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 18 Personnaliser la page de produits - Divi 17 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-60.png)
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 20 Personnaliser la page de produits - Divi 19 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-61.png)
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 22 Personnaliser la page de produits - Divi 21 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-62.png)
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 24 Personnaliser la page de produits - Divi 23 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-63.png)
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 26 Personnaliser la page de produits - Divi 25 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-64.png)
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 28 Personnaliser la page de produits - Divi 27 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-65.png)
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 30 Personnaliser la page de produits - Divi 29 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-66.png)
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 32 Personnaliser la page de produits - Divi 31 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-67.png)
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 34 Personnaliser la page de produits - Divi 33 - Webpick](https://webpick.info/wp-content/uploads/2020/09/image-68.png)