Comment créer une boutique en ligne avec Divi et Woocommerce | Le guide complet

Si tu veux vendre en ligne tes produits, tu dois créer un e-commerce. De nombreuses solutions sont aujourd’hui disponibles sur le marché. Aujourd’hui, je veux te parler de créer ta boutique en ligne avec Divi et Woocommerce, car c’est la solution la moins onéreuse et surtout la plus flexible. Woocommerce est le plugin de commerce en ligne de WordPress et Divi est particulièrement adapté à Woocommerce. Le combo gagnant permet donc de créer un magasin e-commerce prêt à vendre tes produits physiques ou digitaux. Alors assure-toi au préalable d’avoir installé Divi et d’avoir téléchargé l’extension Woocommerce.

Pourquoi WooCommerce est-il le choix n°1 des créateurs de boutique en ligne ?

Pour commencer, WooCommerce est l’extension qui te permet de créer une boutique en ligne sur ton site WordPress. Développée par WordPress, elle est la solution e-commerce du très populaire CMS.

Laisse-moi te demander, est-ce que 2,3 millions d’utilisateurs de WooCommerce dans le monde est un argument recevable quant à la réputation et qualité de WooCommerce ?

L’extension est livrée avec des fonctionnalités de base simples d’utilisation pour créer et gérer un e-commerce avec efficacité.

Woocommerce a diverses fonctionnalités qui sont aussi particulièrement appréciées comme son module de paiement sécurisé inclus. Il est donc plutôt économique puisqu’il n’est pas nécessaire de prendre les services d’une solution tierce comme passerelle de paiement. On peut directement relier PayPal et Stripe à WooCommerce.

La flexibilité de WooCommerce va relativement loin en offrant à ses utilisateurs la possibilité de tout vendre en ligne, produits physiques, produits digitaux et même des abonnements.

Il offre aussi la possibilité de configurer plusieurs méthodes d’expéditions et tu peux même te connecter à différents transporteurs ainsi qu’imprimer les étiquettes d’expédition UPS.

En gros, WooCommerce est une solution ecommerce rapide, fiable et facilement adaptable aux besoins de ta boutique en ligne.

En plus de tout ça, WooCommerce s’intègre parfaitement avec le thème Divi te permettant de créer une boutique fabuleuse grâce aux modules Divi Shop, cent pour cent personnalisables afin de remplir tes objectifs business.

Comment installer le plugin WooCommerce ?

Installer l’extension WooCommerce est une procédure ultra simple. Tu télécharges WooCommerce comme n’importe quelle extension et tu l’actives.

Alors, un assistant de configuration te propose de te guider dans les différentes étapes de base nécessaires pour configurer ta boutique en ligne. Il s’agit du setup Wizard (selon la version de WooCommerce et de WordPress que tu as).

Une fois que le wizard est affiché à l’écran, tu n’as qu’à cliquer sur “Let’s Go” ou “Allons-y” pour lancer la configuration.

Ultra simple et intuitive, tu suis les étapes et remplis les informations demandées comme la monnaie, l’unité de mesure, le lieu où se situe ton magasin et tu coches les cases qui correspondent à ton e-shop.

L’assistant termine par te demander si tu souhaites recevoir des paiements et te propose plus de 100 moyens de paiement. Les plus connus étant PayPal et Stripe en France, tu peux cependant ajouter ceux que tes clients sont susceptibles d’utiliser.

Quand tu cliques sur terminer, tu pourras ajouter ton premier produit à ta boutique comme l’assistant de configuration te le suggère.

Automatiquement, plusieurs pages sont créées comme la page panier, mon compte, boutique ou la petite icône de panier entre autres.

C’est à partir de là que les modules Divi vont pouvoir entrer en action.

Comment ajouter des produits en utilisant WooCommerce builder ?

Divi offre plus de 16 modules WooCommerce qui se synchronisent parfaitement avec vos catégories de produits et ouvrent une personnalisation de votre eshop presque infinie.

Tout est personnalisable dans les moindres détails pour avoir une boutique en ligne moderne, unique et qui donne envie d’acheter tes produits.

Voyons maintenant comment créer ton premier produit.

Etape 1 : créer ton premier produit

Tu peux passer par l’assistant de configuration comme cela t’est suggéré ou tu peux passer par le menu sur la gauche de WordPress et cliquer sur Produits=>Ajouter un nouveau produit.

Tu as alors le choix entre créer sur l’éditeur de produits de WordPress, soit tu cliques sur Éditer avec Divi.

Je te conseille de remplir les informations de ton produit dans l’éditeur de WordPress.

N’oublie pas de mettre l’image du produit.

Remplis tous les champs nécessaires à la vente de ce dernier.

Publie-le une fois que toutes les informations sont ok pour toi.

Continue ainsi avec tous les produits que tu veux vendre.

Etape 2 : Créer une page pour ajouter tes produits

Une fois tous créés, tu as besoin d’une page pour tous les afficher. Si tu es passée par l’assistant de configuration, il a automatiquement créé une page vide qui s’appelle shop ou boutique.

Si tu ne l’as pas, tu peux simplement cliquer sur Page=>Ajouter nouvelle et la nommer manuellement.

Avant de remplir quoi que ce soit, clique sur le bouton violet “Utiliser Divi Builder”.

Tu as alors deux options :

1. Soit tu télécharges un modèle depuis la bibliothèque;
2. Soit tu crées la vitrine de ta boutique en ligne de zéro.

Si tu optes pour la 2, alors tu peux créer ton en-tête comme toutes les pages Divi (comme l’accueil par exemple), puis tu ajoutes une section et une rangée où tu ajoutes le module Boutique.

Etape 3 : Configurer le module boutique du WooCommerce Builder

Comme tous les modules Divi, tu peux tout personnaliser.

Tu peux sélectionner quels produits tu souhaites faire apparaître sur la page : les plus vendus, les plus récents, les nouveaux produits ou une catégorie spécifique.

Tu peux aussi choisir le nombre de produits à afficher sur la page en combien de colonnes ainsi que les éléments qui apparaîtront à l’écran en aperçu comme le prix, les avis, etc.

Ensuite, tu peux bien entendu personnaliser tout ce qui concerne les couleurs, police, etc. comme tous les modules classiques.

Etape 4 : Créer un template de produit dans le constructeur de thème Divi intégré

L’idée et la puissance de Divi réside dans la possibilité de créer des pages produits uniques et en accord avec ta marque. Pour cela, rends-toi dans Divi=>Theme Builder et ajoute un nouveau template en sélectionnant “Tous les produits” dans la liste déroulante.

Cliquer sur “Ajouter un corps personnalisé” et sélectionner “construire un corps personnalisé”. Tu peux alors choisir de construire la page produit de tes rêves en choisissant de construire de zéro.

C’est là que les modules WooCommerce pour Divi vont être super-méga utiles.

Commence par ajouter une section et une rangée avec du texte par exemple. Clique ensuite sur l’icône en haut à droite de l’espace texte appelé “ajouter du contenu dynamique” et sélectionne “Poste et Titre de l’archive” afin que tout le contenu correspondant à notre produit soit importé.

En ajoutant une Woo image, cela reprendra automatiquement la bonne image de ton produit grâce au titre dynamique inséré juste avant.

Tu peux ainsi ajouter la description également en ajoutant des modules de texte et en sélectionnant le contenu dynamique appelé “description produit”.

Bien sûr tout le design est personnalisable comme les modules habituels (police, couleurs, hauteur de ligne, taille de la police, etc.)

Ajoute ensuite un module Woo ajouter au panier par exemple, et un module Woo prix. Assure-toi bien lorsque le configurateur de module s’ouvre, que sous le nom Produit s’affiche bien “Ce produit”.

Fais-toi plaisir et va encore plus loin en ajoutant des avis et les produits associés toujours avec les modules WooCommerce de Divi.

Tu peux ajouter le stock restant, etc.

Tu crées ainsi un template qui s’appliquera à tous tes produits automatiquement sans devoir reconstruire le design des pages produits à chaque fois.

Etape 5 :

Amuse-toi et crée par exemple une page spécifique pour tes produits en promotion !

Crée un pied de page avec un appel à l’action qui propose un discount.

Les possibilités sont infinies ! Ton imagination et ta créativité sont ta limite.