Découvrez les bons plans & les réductions Alpa14

Créer un modèle de page produit WooCommerce avec le Thème Builder de Divi

Alpa14 les tutoriels faciles !

Catégories

Créez un gabarit de page produit WooCommerce avec Divi et son Thème Builder

Dans ce nouveau tuto WordPress Divi, je vous explique comment rémplacer la page produit par défaut générée par le système WooCommerce  par un joli modèle de page produit engageant réalisé avec le Thème Builder de Divi. Dans ce tutoriel, nous repartirons d’un site sur le thème des bijoux que j’avais utilisé à l’occasion de deux tutos où je vous expliquais comment installer et paramétrer WooCommerce, créer des produits simples et variables et aussi comment créer une page boutique design sur un site WordPress. Si vous n’avez pas vu ces deux vidéos, je vous invite à la voir, la première ici et la deuxième ici.
Bon visionnage à toutes et à tous ! ?

Licence Divi
Code Promo Divi Supreme
.

1) Création du modèle de page produit à partir du Thème Builder

Pour accéder au Thème Builder il faut se rendre dans le menu WordPress de gauche dans Divi > Thème Builder. Cliquer sur « Ajouter un nouveau modèle » et dans la fenêtre « Paramètres des Modèles » qui s’ouvre, choisir (dans la partie « Produits ») « Tous les produits ». Cliquer ensuite sur « Ajouter un corps personnalisé » puis « Construire un corps personnalisé ».
Pour la page choisir l’option de gauche « Construire à partir de zéro ».

2) Créer une bannière avec des éléments dynamiques

Nous repartirons de la même bannière que celle de la page boutique. Pour cela, il faut se rendre sur la page boutique et sauvegarder la section de la bannière dans la librairie afin de pouvoir la récupérer à partir de notre modèle de page produit du Thème Builder.
De retour dans le Thème Builder, ajouter une nouvelle section sous la section déjà en place et choisir l’option « Ajouter depuis la bibliothèque.

Une fois la section bannière en place, cliquer sur les paramètres du module « En-tête plein écran » de la section bannière.
Dans l’onglet « Contenu » nous allons rendre l’image de fond de bannière dynamique, c’est à dire qu’à chaque fois que la page produit d’un article sera consultée, l’image présentée du produit apparaîtra en fond de section. Pour cela, aller sur l’onglet « Contenu » puis dans fond supprimez l’image de fond puis cliquer sur la petite icône dans l’angle supérieur droit (3 petits disques empilés) puis choisissez « Image présentée ».
De la même manière pour que le titre de la bannière s’adapte au produit présenté, toujours dans « Contenu », allez dans « Texte » puis à « Titre » cliquez à droite sur la petite icône à droite (3 petits disques empilés) puis choisir « Poster / Titre de l’archive ».

Thinkific un mois gratuit
Propriété du modèle du Divi Thème Builder
Image de section dynamique
Titre de section dynamique
 LearnDash créer une formation sur un site WordPress

3) Insertion du module « Woo Cart Notice » dans une section séparée

Dans la section au dessus de la section bannière, créer une rangée à une colonne et insérez le module « Woo Cart Notice ». Cette section n’apparaîtra que lorsque le client aura mis un article au panier, lui signalant son action et lui permettant d’aller au panier.
Afin d’avoir un bandeau uni, choisissez la même couleur pour le fond de section que pour le fond du module. Dans notre exemple, nous avons choisi le noir. Vous pouvez changer cela dans l’onglet « Contenu » puis « Fond » des paramètres de la section et des paramètres du module « Woo Cart Notice ».
Ensuite afin que le bandeau soit étroit et « collé » à la section supérieure et inférieure, supprimer la marge interne de la section et de la rangée. Pour cela, allez dans l’onglet « Style » des paramètres de la section et de la rangée et dans « Espacement » entrez 0pix comme valeur en marge interne (sommet, bas, gauche, droite).
Enfin dans les paramètres du module « Woo Cart Notice » toujours dans l’onglet « Style » puis espacement supprimer la marge externe (bas).

Woo Cart Notice

4) Insertion des modules WooCommerce

Sous la section bannière, ajouter une nouvelle section puis insérer une rangée à 2 colonnes (50%-50%).
– Dans la colonne de gauche insérer le module « Woo Image ».
Dans l’onglet « Contenu » puis « Elements » vous avez certaines options à choisir concernant l’affichage. Puis dans l’onglet « Style » personnaliser ce module selon vos goûts.
– Dans la colonne de droite, insérer le module « Woo Titre », dans l’onglet « Style » personnaliser ce module selon vos goûts.
– En dessous ajouter le module « Woo Rating » qui permet aux clients de noter le produit par un nombre d’étoiles. Dans l’onglet « Contenu » puis « Elements » vous avez certaines options à choisir concernant l’affichage. Puis dans l’onglet Style personnaliser ce module selon vos goûts.
– En dessous ajouter le module « Woo Prix » qui affichera le tarif du produit. Puis dans l’onglet Style personnaliser ce module selon vos goûts.
– En dessous ajouter le module « Woo Description » qui décrira le produit. Dans l’onglet « Contenu », choisir l’option « Description brève ». Puis dans l’onglet Style personnaliser ce module selon vos goûts.
– En dessous ajouter le module « Woo Ajouter au panier » qui permettra au client de faire l’achat. Puis dans l’onglet Style personnaliser ce module selon vos goûts. Vous pouvez ici notamment personnaliser le bouton.

Insérer une nouvelle rangée à 2 colonnes (50%-50%).

– Dans la colonne de gauche, placer le module « Woo Tabs ». Dans l’onglet « Contenu »  vous pouvez activer ici les onglets de votre choix. Dans notre cas nous activerons uniquement les onglets « Description » (complète) et l’onglet « Informations supplémentaires » mais pas l’option « Commentaires » ici. Puis dans l’onglet Style personnaliser ce module selon vos goûts.

– Dans la colonne de droite de la rangée, placer le module « Woo Commentaires ». Dans l’onglet « Contenu » puis « Elements » vous avez certaines options à choisir concernant l’affichage. Puis dans l’onglet « Style » personnaliser ce module selon vos goûts.

5) Insertion module « Woo Produits Connexes »

Placer en dessous une nouvelle rangée mais à une colonne cette fois-ci. Vous pouvez placer d’abord un module séparateur pour séparer cette partie de la page produit. En dessous, insérer le modules des produits apparentés intitulé « Woo Produits Connexes ». Ce module suggère au visiteur des produits appartenant à la même catégorie que le produit de la fiche produit. Ce qui est intéressant et peut déclencher d’autres achats. Dans notre cas nous reprendrons la mise en forme de la page boutique pour conserver un style harmonieux entre les pages.

 

MalerLite
Produits apparentés

5) Utiliser la fonction « Transformer » de Divi

Pour peaufiner le design de ce modèle de page produit, nous pouvons utiliser une fonction « Transformer » de Divi qui permet de positionner la rangée plus haut en la faisant mordre légèrement sur la section bannière (C’est ce que nous avions fait pour la page boutique).

Pour cela, rendez-vous dans les paramètres de la rangée sous la section bannière. Choisissez l’onglet « Style » puis l’option « Déformation ». Choisissez ensuite le deuxième onglet (la croix) qui est l’option déplacement, puis faites glisser le carré vers le haut (comme on le voit sur l’image). Vous constatez alors que votre rangée remonte.

Une fois que vous êtes satisfait de la position de votre rangée, toujours dans Style, vous pouvez ajouter un peu d’ombre portée avec l’option « Boîte ombre » afin d’accentuer cet effet de flottaison sur la section bannière.

Vous allez suite à cette opération remarquer des petits problèmes esthétiques qu’il va être facile de régler.

1) Le fond de la section est transparent et la bannière va se voir entre les images de la boutique. Pour arranger cela, ajouter une couleur au fond de votre boutique (onglet Contenu puis « Fond », ici nous choisirons le blanc).

2) Il se peut que que le séparateur appliqué à la section bannière se voit sur la rangée. Pour corriger cela, toujours dans les paramètres de la rangée, allez sur l’onglet « Avancé » et choisissez l’option « Poste » et bougez la tirette « Z index » vers la droite jusqu’à ce que le séparateur disparaisse.  (C’est une fonction qui définit l’ordre des « couches »)

3) Vous remarquez également que les éléments de la barre latérale et de la boutique sont trop proches des bords. Il faudra ici ajouter de la marge Interne à la rangée. La marge interne se trouve dans l’onglet Style à l’option « Espacement ».

 

MalerLite
fonction transformer
Fonction Z-index
Canva design lilke a pro

Vous serez peut-être intéressé par les articles suivants :