Dans un précédent tutoriel nous avons vu comment créer une page avec Divi. Vous savez donc manipuler des sections, des lignes et des modules avec Divi. Si ce n’est pas encore le cas, jetez-y un oeil avant d’aller plus loin.

A présent, nous allons un cran plus loin. Il s’agit de créer une fiche produit e-commerce.

Comprendre la différence entre une page statique ou dynamique

Nous pourrions tout à fait créer notre fiche produit exactement avec la même approche que pour notre page, c’est-à-dire y disposer un module avec la photo du produit, y insérer le texte de présentation de ses caractéristiques et un bouton d’ajout au panier. Ce serait alors une page statique.

Le seul problème (de taille) avec cette approche, c’est que vous allez devoir faire ce travail pour chaque produit, un par un. SI votre boutique a 1000 produits, vous y passerez un temps démentiel. Et imaginez que vous ayez envie de modifier l’apparence de chaque fiche, en ajoutant par exempleun module de témoignages de clients ? Il faudrait alors revenir sur chaque fiche une par un. Ce n’est pas la bonne approche.

Il faut donc créer une page dynamique.

La page dynamique permet de séparer la forme du fond. On créé un design unique puis on l’applique à un ensemble de pages. Dans notre cas, on va créer une design de fiche produit et l’appliquer à l’ensemble des fiches produits.

Le contenu de la fiche sera renseigné depuis la fiche produit elle-même via le back office de Woocommerce.
Le design de la fiche sera géré depuis le constructeur de thème de Divi.

Cette approche permet de designer des fiches produits dont le style est unique. Vous avez la main sur chaque élément de façon fine, un vrai luxe.

Voilà comment procéder.

1- Créer un produit simple avec woocommerce

Commencez par créer une produit simple avec Woocommerce.

Allez dans le Tableau de bord > Produits > Ajouter

Indiquez :

• Titre
• Descriptions courte et longue
• Uploadez une image produit dans la colonne de droite
• un prix

C’est tout. Sauvegardez.

Vous devriez obtenir une fiche produire dont l’apparence est proche de celle-ci, c’est le design par défaut de Woocommerce. Ni beau, ni moche.. bien au contraire ! 🙂

On va la redesigner pour obtenir ceci, ce qui reste un design assez basique mais tout a été modifié : police, positions des éléments, couleurs… Libre à vous d’exprimer votre créativité par la suite.

2- Accéder au constructeur de thème

Revenez maintenant dans le tableau de bord (TB) puis dirigez-vous vers

Tableau de bord > Divi > Theme builder > Ajouter un nouveau modèle > Nouveau modèle

Cochez ensuite sur « Utiliser ce modèle sur > Tous les produits » et appuyer sur le bouton « créer » en bas.

Cliquez enfin sur « Ajouter un corps personnalisé » > « Construire un corps personnalisé ».

Bien joué !

3- Design du modèle de fiche produit : on ajoute une première ligne

Nous allons maintenant ajouter une ligne pour y insérer le nom du produit. Pour se faire cliquez simplement sur le + vert.

Choisissez une ligne simple avec une seule colonne.

Ensuite, cliquez sur le + gris pour insérer un module.

Dans la liste trouvez le module « Texte ».

L’erreur courante consiste à vouloir insérer dans ce module de texte le nom du produit. Ne perdez pas de vue que l’on design en ce moment TOUTES les fiches produits de tous els produits. Il faut donc y insérer un terme générique qui se ra remplacé dynamiquement par le nom du produit.

Pour se faire, nous allons réaliser une inclusion dynamique. Pas de panique, c’est facile.

Dans le module de texte, cliquez sur la petite icône en forme de base de donnée.

Dans le menu déroulant sélectionnez « Titre de l’archive »

Ensuite cliquez sur la petit roue crantée :

Et ajoutez une balise <h1> avant et une balise </H1> après le titre.
Ceci est un petit bout de code qui permet de passer ce titre en niveau 1 c’est-à-dire en titre principal de page.

Ensuite, on va styler un peu cet élément. Pour se faire allez dans l’onglet « Style » puis dans  » Texte de sous titre » et appliquez le style qui vous sied : police, taille de police, graisse, couleur de la police, position… Pour mon exemple j’ai opté pour du Montserrat en gras centré et de 50 px de hauteur.

N’oubliez pas de valider avec la coche verte en bas de la fenêtre modale.

4- Ajouter une ligne avec 2 colonnes pour image et descriptif

Maintenant, on va ajouter d’un côté la photo du produit, de l’autre son descriptif court, long et le bouton d’ajout au panier.

Cliquez sur le + vert en dessous de la ligne du titre. Ajoutez une ligne de 2 colonnes de tailles identiques.

Dans la colonne de gauche, cliquez sur le + gris et insérez une image.

Dans la fenêtre modale de l’image, cliquez que la petite poubelle pour supprimer l’image noire standard.

Cliquez ensuite sur l’icône d’insertion dynamique et sélectionnez dans le menu déroulant « image présentée ».

Ceci aura pour effet d’insérer l’image à la une inséré dans la fiche produit à cet emplacement.

Dans la seconde colonne, cliquez sur le + gris > module texte > cliquez sur l’icône d’insertion dynamique et choisissez « Description courte du produit »

5- Ajout du bouton d’ajout au panier et de la description longue

En dessous de votre description courte, ajoutez un module (bouton ‘+’ gris)  > woo modules > Module intitulé « Add to cart »

Vous pouvez personnaliser ce module à volonté., y compris son bouton, dans l’onglet style. J’ai juste changé la couleur par défaut en noir.

Ensuite, il suffit d’ajouter un autre module de texte en dessous et d’y insérer dynamiquement la « Description longue ».

6- Sauvegardez puis fermer

Sauvegardez une première fois (en bas à droite) puis fermez ‘crois en haut à droite).
Dans la fenêtre suivante, cliquez sur « Sauver les changements » ce qui a pour effet d’attribuer votre design à vos fiches produit.

Et voilà, vous pouvez aller jeter un oeil à une fiche produit. Elle aura le design que vous venez de créer.