Comment vendre un produit sur n’importe quelle page de votre site WordPress?
Dans ce nouveau tutoriel WordPress Divi, je vais vous monter comment mettre en vente un produit sur votre site web sans pour autant devoir créer une page boutique. Cette manière de procéder vous offrira une grande souplesse et vous permettra d’insérer facilement ce produit sur n’importe quelle page de votre site que ce soit sur une page classique, une landing page ou même un article de Blog. Pour cet exercice, nous utiliserons Divi et le Divi Builder avec ses nombreux modules WooCommerce facilement intégrables.
Etapes pour la création d’une section incluant des modules WooCommerce pour vendre notre produit
1) Installation du plugin WooCommerce
Tout d’abord, installez WooCommerce si ce n’est pas déjà fait. Dans « Extensions » cliquez en haut sur le bouton « Ajouter » puis faites une recherche sur « WooCommerce ». Installez le plugin puis activez-le.
Ensuite suivez les étapes de paramétrage du plugin en renseignant les informations demandées.
2) Ajoutez votre produit WooCommerce
Pour cela, rendez-vous dans le menu WP de gauche : WooCommerce > Produits > Ajouter
Renseignez le titre, la description, le type de produit (produit simple, produit variable etc.) et les caractéristiques associées.
Dans la marge à droite, dans « Modèle de la page » choisissez « Pas de barre latérale ». C’est une caractéristique qui s’appliquera à la page de ce produite.
Vous pouvez en dessous créer des catégories et placer votre produit en cochant la case de la catégorie correspondante.
Au bas de la marge de droite, vous pouvez ajouter une image de produit ainsi que des images supplémentaires (Galerie produit).
3) Création d’une section sur la page ou le post de votre choix
Pour commencer nous allons créer un section, puis dans cette section créez une rangée à 2 colonnes (50%-50%).
Allez ensuite dans les paramètres de cette section puis sur l’onglet contenu, ajoutez un couleur de fond en harmonie avec les couleurs de votre site afin que cette section se démarque mieux du reste de votre contenu.
Dans cette rangée à 2 colonnes, nous allons insérer 6 modules Woo. Dans un premier temps nous les placerons simplement selon un ordre précis. Puis seulement à la fin un fois quand nous aurons une vue globale de la section, nous retournerons dans les paramètres de chaque module pour apporter du Style et modifier ce design de base.
4) Insertion du module Woo Images
Dans la colonne de gauche de votre rangée, appelez le module Woo Images. Sélectionnez, le produit concerné dans « Produit ». Ce module appellera automatiquement l’image principale choisie lors de la création de la page produit ainsi que la galerie d’images complémentaires.
5) Insertion du module Woo Titre
Dans la colonne de droite, appelez le module Woo Titre. Sélectionnez, le produit concerné dans « Produit ». Le titre de votre produit que vous avez défini apparaîtra automatiquement ici.
6) Insertion du module Woo Rating
Toujours dans la colonne de droite, juste en dessous du module Woo Titre, insérez le module Woo Rating. Sélectionnez, le produit concerné dans « Produit ». Ce module permettra au client de voir le nombre d’étoiles attribué à ce produit par les autres clients. Le client pourra également attribuer des étoiles à ce produit depuis la page produit. A noter que ce module apparaîtra sur votre page uniquement lorsqu’au moins un client aura attribué des étoiles.
7) Insertion du module Woo Prix
Toujours dans la colonne de droite, juste en dessous du module Woo Rating, insérez le module Woo Prix. Sélectionnez, le produit concerné dans « Produit ». Ce module fera apparaître automatiquement le prix défini lors de la création de votre produit avec le cas échéant sa réduction et sa variation.
8) Insertion du module Woo Description
Toujours dans la colonne de droite, juste en dessous du module Woo Prix, insérez le module Woo Description. Ce module fera apparaître automatiquement la description écrite lors de la création de votre produit. Il est possible ici de faire apparaître la description complète ou brève.
9) Insertion du module Woo Ajouter au panier
Toujours dans la colonne de droite, juste en dessous du module Woo Description, insérez le module Woo Ajouter au panier. A cet endroit le client pourra ajouter le nombre de produits souhaités et de les ajouter au panier.
9) Apporter du Style à chacun des modules Woo
Maintenant que vous avez une vue d’ensemble de la section, de l’enchainement et la disposition de ces 6 modules Woo, retournez dans les paramètres de chacun de ces modules et apportez-leur du Style selon vos goûts. Quand vous êtes dans les paramètres d’un module, cliquez sur les petits pinceaux pour être conduit directement aux options de style de cet élément.
10) Vous pouvez enregistrer la section
Maintenant que votre section est terminée, vous pouvez la sauvegarder dans la librairie (en cliquant sur le menu bleu de la section, icône flèche dans cercle). Vous pouvez désormais insérer cette section « Vente produit » où vous souhaitez sur votre site : page classique, landing page, article de blog.
11) Harmonisation avec la page produit
A noter que quand vous cliquez sur le bouton « Ajouter au panier » vous êtes conduit à la page du produit. Cette page produit a « un design de base », il est nécessaire d’aller l’harmoniser avec votre section de vente que vous venez de réaliser en termes de couleurs et design. Pour modifier cette page, rendez-vous dans le menu WordPress, marge de gauche WooCommerce > Produits > Tous les produits. Choisissez le produit correspondant à la section de vente puis cliquez sur « Modifier ». Ensuite cliquez sur le bouton « Utiliser le générateur Divi » puis « Construire sur le Front end ». Votre page produit s’ouvrira sous le Visual Builder et vous pourrez l’harmoniser avec votre section vente.
