fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

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

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

Vous serez peut-être également intéressé par ces articles …

Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Créer un pop-up sur un site Divi

Créer un pop-up sur un site Divi

Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

lire plus
Offrez-moi un café! Merci :)