fbpx
Tuto Divi WooCommerce : Vendre un produit sur une page ou un post de votre site

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.

 

 

Licence Divi
.

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.

 

Installation WooCommerce

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).

 

page produit WooCommerce

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.

 

Section WooCommerce

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. 

 

Module Woo images

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.

 

Module Woo images

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.

 

Divi Elegant Themes
Module woo Rating

 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. 

 

MalerLite
Module Woo prix

 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.

 

Module Woo Description

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.

 

 

Offre Invideo
Module Woo 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.

 

 

Section stylisée

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.

 

 

Enregistrement de la section

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.

 

 

Page panier stylisée

Vous serez peut-être intéressé aussi par…

Les bons plans Alpa14 😉

👉 Divi : Le meilleur WebBuilder WordPress, -20% sur votre licence !
👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 »
👉 Presto Player
: Le meilleur lecteur vidéo pour votre site WordPress !
👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
👉 O2switch : l’hébergeur de qualité (5€/mois en illimité avec nom de domaine)
👉 Inleed : l’hébergeur suédois performant et de qualité 

👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
👉 duoLogo : Réalisez un logo pro, formule gratuite
👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
👉 Private Internet Access
: Un VPN de qualité, protégez votre connexion Internet

👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois bien moins cher 👍.

0 Comments

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *