Créer un site e-commerce avec Divi et WooCommerce : guide complet de A à Z

9 Sep 2020 | Création de sites Wordpress, Divi

[Mise à jour en novembre 2024] Dans cette article, je vous propose un guide ultra complet pour vous apprendre à créer un site e-commerce avec Divi et WooCommerce, respectivement le thème Wordpress N°1 mondial et l’extension e-commerce officielle de Wordpress.

Cette idée m’est venue lors de la crise sanitaire liée au Covid-19. J’ai eu de nombreux appels de professionnels ne pouvant plus exercer leur métier normalement, ouvrir leurs boutiques, rencontrer leurs clients, etc., et souhaitant tenter de « dématérialiser » leur activité. C’était donc pour moi une période assez compliquée avec une charge de travail exceptionnellement importante, étrangement à contre-courant du chômage technique que vivaient la plupart des professionnels.

N’ayant pas pu répondre à toutes les demandes de création de sites internet, et mes propositions tarifaires étant parfois supérieures aux attentes de mes prospects, certains ont dû abandonner ce projet de boutique en ligne ou bien opter pour le « Do it yourself ».

En bidouillant un peu, créer un site vitrine modeste peut être envisageable pour un novice, s’il a du temps à y consacrer. Pour ce qui est d’un site e-commerce, c’est une autre paire de manches. Il se heurte à des aspects plus techniques et à plus d’exigence de la part des utilisateurs. En effet, alors qu’un site vitrine maladroitement construit aura tout de même le mérite de présenter votre activité et de proposer au visiteur la prise de contact, une boutique e-commerce mal faite ne génèrera aucune vente. C’est pourquoi, si vous vous lancez dans ce gros chantier, mieux vaut s’appuyer sur les conseils d’un professionnel.

Ce guide permet donc d’apporter mon soutien au plus grand nombre et, je l’espère, aider certains professionnels en galère à remettre le pied à l’étrier. Il ne remplace pas le travail d’un webmaster qui sera évidement beaucoup plus personnalisé et esthétique, mais vous permettra de débuter dans la vente en ligne avec de bonnes bases, de bons outils, et en évitant les erreurs courantes.

Les seuls frais que vous aurez seront les abonnements pour votre hébergement et le thème Wordpress, pour environ 200€/an (ou autour de 350€ la première année et 100€ les suivantes, en fonction du type de formule que vous choisissez). Ces 2 achats sont indispensables à la création d’un site Internet sérieux. Il existe toujours des alternatives moins chères ou gratuites, mais je vous les déconseille.

Ce guide s’adresse tout aussi bien aux débutants qu’à ceux qui connaissent déjà Wordpress. Je me suis efforcé de vulgariser au maximum mes propos. Si certaines étapes ne sont pas claires, n’hésitez pas à me le faire savoir dans les commentaires.

Plan du guide

  1. Prérequis
    1. Compétences
    2. Matériel
    3. Outils en ligne
    4. Frais d’hébergeur
    5. Thème Wordpress Premium et sa licence
  2. Pourquoi choisir Divi pour votre site e-commerce
  3. Réserver un hébergement et un nom de domaine, et installer Wordpress
  4. Paramétrer Wordpress
    1. Installer Divi
    2. Ajouter des extensions (ou plugins)
    3. Enregistrer votre licence Divi
    4. Faire les mises à jour
    5. Régler des permaliens
    6. Afficher le certificat SSL
  5. Paramétrer Divi
  6. Sauvegarder votre site
  7. Créer la page d’accueil avec du contenu fictif
    1. Utiliser le Divi Builder
    2. Utiliser le Visual Builder
    3. Mettre la page d’accueil à la racine du site
  8. Personnaliser le thème
  9. Créer ou modifier les pages de base de votre site
  10. Configurer WooCommerce
    1. Réglages généraux
    2. Produits
    3. Livraison
    4. Méthode de paiement
    5. Comptes et confidentialités
    6. E-mails
    7. Intégration
    8. Avancé
  11. Créer votre premier produit
    1. Comment configurer un produit sans variation (de taille, couleur, format…)
    2. Comment configurer un produit avec des variations
  12. Créer toutes les catégories de produit
  13. Créer vos menus
  14. Finaliser la page d’accueil
  15. Cookies : mettre votre site web en conformité
  16. Gérer vos commandes
  17. Suivre vos statistiques de vente
  18. Connecter votre site à Google Analytics
  19. Pour finir

Prérequis pour créer un site e-commerce avec Divi et WooCommerce

Compétences

  • Aucune compétence particulière dans la création de site
  • Simplement être à l’aise avec l’outil informatique

Matériel

  • Un ordinateur PC ou Mac avec un navigateur Internet (je vous conseille d’utiliser Google Chrome)
  • Une bonne connexion Internet (5Mo au minimum, autrement vous allez vous arracher les cheveux)

Outils en ligne

  • Je vous propose de travailler avec Wordpress, le CMS (en français : « système de gestion de contenu ») gratuit le plus utilisé et le plus performant (40% des sites dans le monde) qui permet une gestion assez simple et intuitive. Il n’a aujourd’hui plus rien à envier à des CMS plus spécialisés e-commerce comme Prestashop. C’est un outil qui s’utilise en ligne. Pas besoin de le télécharger, on l’installera directement depuis l’hébergeur.
  • Quelques plugins (ou extensions) que je vous listerai.

Frais d’hébergeur

  • Hébergement (7€HT/mois)
  • Nom de domaine (une dizaine d’euros par an)

Je vous propose de choisir l’hébergeur O2Switch. J’ai utilisé OVH pendant des années en constatant ses défauts mais sans trouver mieux pour un tarif similaire. Aujourd’hui, j’ai abandonné OVH pour O2Switch qui est pour moi le meilleur hébergeur français : performances au top, espace client et documentation claire et fonctionnel, support technique réactif et efficace. Je vous expliquerai plus tard comment y souscrire.

Thème Wordpress Premium et sa licence

Je vous propose le thème Divi (89$/an ou 249$ pour une licence à vie, intéressante si vous gardez votre site plus de 3 ans. Mais en théorie, si vous vous lancez dans ce genre de travail, c’est que vous avez un projet sur long-terme, donc que vous ne comptez pas tout arrêter au bout de 6 mois).

Tous les liens vers Divi présents dans cet article sont des liens dits « affiliés ». Cela signifie que pour chaque vente, je toucherai une petite commission. Une façon pour vous de me remercier pour ce guide et pour moi d’amortir le temps passé à l’écrire ;). Cela ne changera rien au prix que vous paierez pour l’acheter.

Créer un site ecommerce avec Divi et Woocommerce

Pourquoi choisir Divi pour votre site e-commerce ?

Divi est mon thème Wordpress fétiche et le plus vendu au monde. C’est l’outil que j’utilise au quotidien, en tant que Webmaster et qui m’a convaincu à 100%. C’est pourquoi j’aime partager mon enthousiasme pour ce thème.

Parmi ces principaux atouts :

  • Sa compatibilité avec Woocommerce, le plugin de e-commerce officiel de Wordpress
  • Sa traduction en français
  • Ses 46 modules préformatés pour ajouter du contenu dans vos pages
  • La puissance de son Divi Builder et du Visual Builder pour mettre en pages vos contenus (pour les pages de base : accueil, contact, FAQ…). En gros, vous construisez vos pages comme on empile les briques d’une maison
  • Son nouveau Theme Builder, une autre fonctionnalité pour personnaliser vos produits, vos pages de catégories…
  • Sa facilité d’optimisation mobile
  • Ses mises à jours disponibles très régulièrement
  • La communauté d’utilisateurs (y compris en France) pour trouver des réponses à vos questions

Si vous voulez d’autres arguments en sa faveur, lisez les 2 articles que j’ai écrit à son sujet. Le premier vous explique pourquoi c’est selon moi le thème Wordpress traduit en français le plus facile à utiliser. Le second vous présente les possibilités de personnalisation du design offertes par Divi.

Pour télécharger Divi, ça se passe sur le site du fabricant Elegant Themes (le site est en anglais, mais pas de panique, tout sera en français ensuite). Et si vous hésitez, sachez que vous aurez 30 jours pour changer d’avis et vous faire rembourser sans justification.

Après avoir effectué l’achat, rendez vous dans votre Espace Membres.

Cliquez sur « DOWNLOAD THE DIVI THEME ». Vous téléchargez alors le fichier compressé Divi.zip.

Vous êtes prêt(e) à tester le thème Wordpress N°1 mondial ? (30 jours pour changer d'avis)

Réserver un hébergement et un nom de domaine, et installer Wordpress

Voici la démarche pour réserver votre nom de domaine et votre hébergement chez l’hébergeur O2Switch (quelques fois, ils font des changements dans le protocole, il est donc possible que certaines étapes soient légèrement différentes. Mais en gros vous avez l’idée).

Rendez-vous sur le site de O2Switch et choisissez l’offre unique. Entrez le nom de domaine souhaité puis créez un compte et passez commande (il y a souvent des promos pour une première inscription).

Une fois votre commande validée, vous allez recevoir différents emails de confirmation, dont un qui concerne l’accès à votre hébergement cPanel. Connectez-vous à votre cPanel, l’interface d’administration technique de votre hébergement, avec le lien et les identifiants fournis.

Une fois connecté à votre cPanel, nous allons d’abord activer un certificat SSL afin d’assurer une connexion sécurisée entre le serveur web et le navigateur. Il permettra d’avoir le petit cadenas dans la barre d’adresse du navigateur, sans message d’erreur. Pour cela, rendez-vous dans Outils > Lets Encrypt SSL

Cliquez sur « Générer » dans la ligne qui correspond à votre nom de domaine, puis à nouveau « Générer » dans la page suivante, en laissant tous les réglages par défaut.

Ensuite vous allez pouvoir revenir sur le tableau de bord du cPanel, en cliquant sur « Espace Technique ».

Cliquez sur le lien « WordPress » qui est présent dans le bandeau Softaculous puis sur le bouton « Installer ».

Ensuite, vous devrez indiquer vos préférences sur la page d’installation :

  • Choisir l’URL d’installation : choisissez https:// suivi de votre nom de domaine et laissez le répertoire vide
  • Version de Wordpress : gardez la version proposée
  • Paramètres du site : entrez le nom du site et une description courte
  • Compte Administrateur : choisissez un nom d’utilisateur et un mot de passe complexe qui vont servir à vous connecter à l’administration de WordPress, et notez les. Choisissez un email (courriel) personnel existant (pas une adresse qui utilise le même nom de domaine que votre site).

Enfin, cliquez sur le bouton « Installation ».

Paramétrer Wordpress

Une fois l’installation finalisée, vous pouvez vous connecter au backoffice Wordpress qui est à l’adresse au format https://votrenomdedomaine.com/wp-admin/ (remplacez avec votre nom de domaine) avec vos identifiants.

Vous arrivez sur le tableau de bord. La colonne noire à gauche est le menu qui vous permettra d’accéder aux différentes sections du backoffice.

Installer Divi

Dans le menu Apparence > Thèmes > Cliquez sur le bouton « Ajouter » puis sur « Téléverser un thème » et chargez votre fichier Divi.zip.

Vous lisez le message « Le thème a bien été installé. ». Cliquez sur « Activer » pour activer Divi.

Tant que vous êtes dans les thèmes, cliquez sur chacun des autres thèmes installés par défaut (Twenty machin…) et supprimez-les (lien en bas à droite). Garder des thème inactifs et non à jour présente des risques pour la sécurité de votre site.

Ajouter des extensions (ou plugins)

Les extensions suivantes pourrons être installées directement en les recherchant dans le répertoire des extensions WordPress (toujours dans Extensions > Ajouter), en tapant leurs noms dans la barre de recherche de la page « Ajouter des extension ». Après chaque installation, pensez à activer l’extension.

Voici les extensions que je vous recommande :

  • WooCommerce : le module e-commerce. Incontournable.
  • All-in-One WP Migration : pour faire des sauvegardes totales de votre site.
  • Complianz | GDPR/CCPA Cookie Consent : pour afficher la mention obligatoire concernant les cookies.

On vous propose de commencer à configurer WooCommerce. Vous pouvez le faire rapidement.

Etape 1 : entrez votre adresse

Etape 2 : Thématique de votre commerce

Etape 3 : Vendez-vous des produits physiques ou virtuels ?

Etape 4 : Combien de produits envisagez-vous de vendre ? Est ce que vous les vendez aussi ailleurs ? Déclinez l’installation de plugins supplémentaires.

Etape 5 : Continuez avec Divi

Dernière étape : N’installez pas Jetpack.

Extensions à installer optionnellement :

  • FXB-Translations (payant : 30€/an – Lien affilié) : pour améliorer la traduction de Divi. Plus d’infos dans cet article.
  • Yoast SEO : si vous voulez travailler votre référencement naturel
  • iThemes Security : pour améliorer la sécurisation de votre site

Je n’irai pas plus loin pour ces 2 dernières extensions qui feront surement l’objet de futurs articles.

Si vous comptez permettre l’ajout d’avis sur vos produits (je ne le fais personnellement pas car ils ne valent pas des avis Google ou des Avis Vérifiés) ou les articles de votre blog (si vous en créez un), activez l’extension Akismet (déjà installée par défaut) et suivez les infos pour configurez votre compte. Akismet est un anti-Spam qui filtre les commentaires indésirables.

Pour terminer, supprimez l’extension Hello Dolly. C’est une extension de démo, inutile et ajoutée par défaut à l’installation de Wordpress.

Enregistrer votre licence Divi

Pour avoir accès aux mises à jour de Divi, vous devez authentifier votre licence. Pour cela, rendez-vous dans le menu Divi > Options du thème > onglet « Mises à jour ». Entrez votre Nom d’utilisateur et votre clé API puis enregistrez les modifications.

Vous trouverez ces infos ici (si vous êtes connecté sur le site d’Elegant Themes), sinon en vous connectant à votre compte Elegant Themes et en cliquant sur Account > Username & API Key.

Faire les mises à jour

Maintenant que tout est installé, vérifiez s’il y a des mises à jours à effectuer. Rendez vous dans le menu Tableau de bord > Mises à jour, pour mettre à jour, lorsque c’est nécessaire, Wordpress, les extensions et Divi.

Régler les permaliens

Vous devez paramétrer le format des URL (adresse des pages) de votre site pour qu’elles s’affichent de la façon la plus propre et explicite. Rendez vous dans le menu Réglages > Permaliens : choisir « Titre de la publication » puis enregistrer.

Afficher le certificat SSL

Le certificat SSL permet d’afficher le cadenas dans la barre d’adresse de votre navigateur, lorsqu’on visite des pages de votre site. Concrètement, cela confirme que le protocole « https » est activé afin d’assurer une connexion sécurisée entre le serveur web et le navigateur. Le certificat SSL est généralement utilisé pour sécuriser les transactions bancaires, le transfert de données et les informations de connexions. Il est donc particulièrement important lorsqu’il s’agit d’un site e-commerce.

Côté OVH, il devrait être activé par défaut (attention cela peut prendre jusqu’à 48h à se mettre en place).

Côté Wordpress, rendez vous dans le menu Réglages > Général.

Tant que vous êtes ici, profitez-en pour modifier le titre de votre site et votre slogan.

Ensuite, ajoutez un « s » entre « http » et « : » dans les champs « Adresse web de WordPress (URL) » et « Adresse web du site (URL) » de sorte que chaque URL soit dans le format « https:// », puis enregistrez les modifications. Vous devrez probablement vous reconnecter.

Rendez-vous sur la page d’accueil de votre site, en commençant l’adresse par « https:// » et vérifiez que le cadenas s’affiche à gauche de votre nom de domaine, montrant que le certificat SSL est valide et actif. Si ce n’est pas le cas, ce certificat est peut-être en cours de génération chez OVH (vous pouvez le vérifier sur votre compte OVH). Cela prendra quelques heures, mais ne vous empêche pas de continuer.

Paramétrer Divi

Nous allons commencer les premiers réglages du thème. Pour cela, rendez vous dans le menu Divi > Option du thème > Onglet Général.

Nous allons intervenir sur les lignes de réglages les plus intéressantes dans notre cas. Celles que je ne mentionne pas seront laissées avec les paramètres par défaut (non applicables dans notre configuration, ou en tout cas pas utile de rentrer dans ces détails techniques pour cette première approche).

En fonction de la version du thème que vous avez et de si vous utilisez ou pas l’extension de traduction FXB-Translations, certains intitulés pourront varier légèrement.

Au survole de chaque option, un symbole (point interrogation entouré) vous donnera plus de détails si vous cliquez dessus.

Logo : insérez le logo de votre site en format jpg ou png. Il doit avoir une résolution de 72dpi (comme toutes les images de votre site). Il est généralement inutile qu’il fasse plus de 300px de large.

Barre de navigation fixe : si vous l’activez, votre menu restera affiché en haut de l’écran quand vous ferez défiler la page vers le bas.

Palette de couleurs : il s’agit des couleurs de base composant le design de votre site. Elles sont généralement dérivées de celles de votre logo.

Gabarit boutique & modèle de page pour WooCommerce (ou « Emplacement de la colonne latérale WooCommerce ») : choisissez d’afficher la barre latérale à droite ou à gauche dans vos pages d’archives de produits. Le contenu de cette barre pourra être défini dans le menu Apparence > Widgets.

Utiliser les polices de Google (Google Fonts): choisissez oui

Icônes Facebook, Twitter, Instagram : activez les réseaux sociaux que vous utilisez et collez les liens vers les pages respectives.

Nombre de produits affichés sur les pages d’archive de WooCommerce : par défaut, Divi en affiche 4 par ligne. Choisissez donc un multiple de 4. Le nombre 16 ou 24 sont de bons choix. Les produits suivants seront rangés dans des sous-pages. Si vous affichez trop de produits, le chargement de cette page pourra être ralenti.

Format de date : Ecrivez : « j M Y » pour le format Français.

Bouton retour en haut de page (ou « Bouton pour revenir En haut ») : pratique lorsqu’on visite le site sur mobile, pour revenir en haut d’une longue page en un clic.

Personnaliser CSS : très utile à un webmaster pour personnaliser le site plus en profondeur. Mais n’y touchez pas si vous n’avez pas de connaissances en code CSS.

C’est fini pour cette page. Vous pouvez enregistrer les changements.

Rendez vous ensuite dans le menu Divi > Option du thème > Onglet « Créateur » (ou builder) > sous-onglet « avancé » et activez l’éditeur classique.

En 2019, Wordpress a sorti un nouvel éditeur de pages, articles, et produits (nommé Guntenberg). J’ai personnellement du mal à m’y faire. J’active donc cette option pour rester sur l’éditeur classique. Globalement, on retrouve les mêmes fonctionnalités dans les 2 éditeurs. Seule diffère la mise en page. Le nouvel éditeur est plus adapté à l’utilisation sur mobile, mais bon, créer ou gérer un site e-commerce sur mobile ne me paraît pas très adapté…

Sauvegarder votre site

A partir de maintenant et après chaque grosse modification du site, veillez à en exporter sur votre ordinateur une sauvegarde. C’est l’extension All-in-One WP Migration qui permet de le faire. Elle est très facile à utiliser. Il faut juste vérifier qu’elle soit bien à jour avant de le faire.

Pour cela, rendez-vous dans le menu Extensions > Extensions installées. S’il vous est proposé de « mettre à jour » l’extension All-in-One WP Migration, faites-le, sinon cliquez directement sur « All-in-One WP Migration » dans le menu vertical gauche, puis exporter et « EXPORTER VERS » et choisissiez « FICHIER ». La sauvegarde charge alors pendant quelques minutes. Une fois qu’elle est chargée, cliquez sur TELECHARGER et enregistrez-la soigneusement sur votre ordinateur.

Créer la page d’accueil avec du contenu fictif

Pour voir le rendu des futures modifications du thème, nous allons créer une première page avec un peu de contenu fictif. Cela permettra aussi de comprendre comment fonctionne le Divi Builder et le Visual Builder.

Rendez vous dans le menu Pages > Toutes les pages : Survolez la page d’exemple et cliquez sur « modifier ».

Pour commencer, faisons un peu de ménage dans l’affichage. Déroulez les options de l’écrans en haut à droite de la page et ne cochez que celles qui sont vraiment utiles, comme ceci :

Créer un site e-commerce avec Divi et Woocommerce :  option d'écran interface création page

Ensuite, changez le titre « Page d’exemple » par « Accueil ».

Copiez-collez « Accueil » dans le permalien, même si cela n’apparaitra pas puisqu’on passera cette page à la racine du site juste après.

Mettre à jour la page.

Cliquer sur le bouton violet « Utiliser le générateur Divi » (si vous utilisez FXB-Translations, il s’appellera Divi French). On vous propose alors une visite virtuelle pour découvrir le Divi Builder. Vous pouvez la faire en cliquant sur ce qu’il vous est conseillé de cliquer. C’est une très bonne entrée en matière.

Lorsque la visite est terminée, choisissez « utiliser le contenu existant » pour utiliser le Divi Builder avec le texte de démo par défaut de la page.

A partir de là, le contenu texte de la page s’est organisé dans des « boîtes ». Celles du fameux Divi Builder.

Créer un site e-commerce avec Divi et Woocommerce : divi builder accueil

Utiliser le Divi Builder

Des zones en bleu, vert ou gris apparaissent. Le contenu d’une page (ici, du texte) se trouve généralement dans les zones grises, les modules. Il y en a de différentes sortes : texte, images, galeries, slider, compteurs, formulaires, icônes… Ces modules sont rangés dans des boîtes vertes : les lignes. Lesquelles sont rangées dans des boîtes bleues : les sections.

Chaque boîte dispose de 4 icônes. La première permet de la déplacer, la seconde (la roue) permet de l’éditer, la 3eme de la dupliquer, la dernière de la supprimer.

Le seul module présent sur cette page pour le moment est un module de texte. Lorsque vous cliquez sur la roue, une fenêtre s’ouvre et vous pouvez modifier son contenu. Cette modification se fait dans l’onglet « Contenu », puis dans l’encart « Contenu » (ou « Texte »), en vérifiant d’être bien dans son onglet « Visuel » et non « Texte » (= code html). L’interface ressemble alors à celle d’un fichier word.

fenetre reglages contenu

Je vous recommande d’éviter de copier-coller du texte depuis Internet ou Word, mais plutôt de le taper à la main, pour éviter d’embarquer un style de texte non souhaité. Si vous voulez vraiment effectuer un copier-coller, veillez activer l’option avant « coller en texte » (icône « T » blanc sur fond noir).

icone

Il vous faudra peut-être cliquer sur l’icône « ouvrir/fermer la barre d’outils » pour afficher cette icône.

ouvrir fermer la barre d'outils

Je vous propose de modifier le texte de la page pour y inclure au moins un Titre de niveau 1, un titre de niveau 2, du texte paragraphe, une citation et un lien. Vous trouverez ces paramètres d’édition dans le menu et pourrez les appliquer à du texte préalablement sélectionné. Cela pourrait donner cela :

Une fois la modification terminée, « sauvegarder et quitter ». Puis Mettre à jour les modifications de la page (bouton bleu).

Utiliser le Visual Builder

Je vous propose maintenant de découvrir le fameux mode Visual Builder pour continuer de modifier cette page. Pour cela, cliquez sur le bouton bleu « Construire sur le Frontend », positionné au dessus du Divi Builder, dans l’interface de modification de la page d’accueil.

construire sur le front-end-generateur-divi

Pour info, vous pouvez aussi accéder à ce mode en visitant cette page via l’URL publique (adresse de votre page d’accueil), puis en cliquant sur le lien « Activer le Visual Builder » qui s’affiche dans la barre noire en haut de page.

activer le visual builder

La page d’accueil s’affiche alors à l’écran comme la voient les visiteurs mais contrairement à eux, vous pouvez en modifier le contenu directement à l’écran (hors logo, menu et pied de page), avec une organisation identique à celle du Divi Builder.

Lorsque vous survolez les différents éléments de la page avec la souris, des zones encadrées en bleu (sections), vert (lignes) ou gris (modules) apparaissent.

Lorsque vous survolez une zone de texte à modifier, un panneau avec des icônes s’affiche. Ce sont les mêmes que dans le Divi Builder.

Lorsque vous cliquez sur la roue, une fenêtre s’ouvre et vous pouvez modifier la zone tout en observant les modifications en direct.

ASTUCE : il est aussi possible d’éditer du texte simplement en le sélectionnant à la souris directement sur la page, sans rentrer dans la fenêtre que je viens d’évoquer. Mais je trouve cette méthode moins ergonomique. Je vous conseille plutôt d’entrer dans les paramètres du module.

ASTUCE 2 : Parfois, lorsque des zones grises sont trop rapprochées, il peut être difficile de faire afficher la roue au survol de la souris. Il existe alors un autre mode d’affichage plus simplifié, « l’affichage filaire », entre le Visual Builder et le Divi Builder, qui vous permettra d’atteindre plus facilement la zone souhaitée.

Pour sélectionner ce mode d’affichage, déroulez les options en cliquant sur la pastille violette avec les 3 points, puis cliquez sur la première icône après les trois points à gauche.

mode filaire

Vous pourrez ensuite revenir à l’affichage standard en cliquant sur l’icône d’écran de bureau.

Au passage vous remarquez les icônes de tablette et mobile qui vous permettent de basculer l’affichage vers ces tailles d’écrans. Ce sera utile lorsque vous voudrez régler l’affichage responsive de votre site.

Maintenant, prenez 10 minutes pour tester l’insertion de nouveaux modules, parmi tous ceux disponibles, en cliquant sur le « + » sous le module texte. Vous verrez alors toute l’étendue des possibilités. Modifiez leur contenu dans l’onglet « Contenu » mais pour le moment, ne touchez pas à l’onglet « Style » (ou « Design » selon la traduction) de chaque module. Ajoutez également de nouvelles lignes (zones vertes), de nouvelles sections (zones bleues), et organisez tout ça. Amusez-vous, je vais boire un café :).

Ça y est, vous commencez à comprendre la logique du Visual Builder ? Conserver dans votre page au moins un module de texte avec les réglages de « Style » par défaut, et un module de bouton, que vous avez pris soin d’insérer, en modifiant son contenu (texte et lien). Ces 2 modules vont nous servir à personnaliser certains styles par défaut du site.

Une fois toutes les modifications de la page terminées, cliquez sur le bouton vert « Sauvegarder » ou « Enregistrer » à droite, quittez le Visual Builder (lien dans la barre noire en haut) puis retournez dans le backoffice (2ème lien avec l’icône du compteur et le nom de votre site dans la barre noire, à droite de l’icône Wordpress).

Mettre la page d’accueil à la racine du site

Rendez vous dans le menu Réglages > Lecture.

Cochez : « La page d’accueil affiche une page statique ». Puis sélectionnez « page d’accueil = accueil » et enregistrez les modifications.

La page nommée Accueil est maintenant à la racine du site. C’est à dire qu’on y accède en tapant simplement le nom de domaine de votre site.

Personnaliser le thème

Rendez vous dans le menu Divi > Personnaliseur de Thème. Vous allez prendre un moment pour réglez les styles (design) par défaut de votre site, qui s’appliqueront à la chaque élément pour lequel vous n’avez pas modifié le style manuellement. Ce sera donc un gain de temps considérable et une garantie d’uniformité du design sur l’ensemble du site.

Vous voyez votre page d’accueil avec vos modules de texte et bouton, ainsi que le menu provisoire et le pied de page. Le design de ces éléments va pouvoir être réglé ici, et les modifications observées en temps réel.

Je ne vais pas lister chaque action car on entre ici dans des considérations esthétiques et graphiques très personnelles. De plus, les intitulés de chaque menu sont assez explicites. Je vous laisse donc y aller étape par étape. A notre stade, les 4 premières rubriques sont les plus pertinentes (Réglages ou paramètres généraux, En-têtes et navigation, Pied de page, Boutons).

Vous pourrez également vous rendre dans la rubrique Woocommerce et activer la notification de la boutique.

Pensez à sauvegarder (« publier ») quand vous avez fini ces réglages.

Créer ou modifier les pages de base de votre site

Woocommerce a déjà créé automatiquement les pages Panier, Boutique, Mon compte et Validation de la commande. Ces pages contiennent des shortcodes Woocommerce, c’est à dire de petites balises de texte formatées spécialement (écrites entre des crochets) et qui ajoutent des fonctionnalités. Ici, pour chaque page respectivement, il s’agit d’afficher le panier, l’ensemble des produits de la boutique, les infos du compte client ou l’étape de validation avant paiement. Et l’avantage, c’est que si vous ouvrez ces pages avec le Visual Builder, vous pourrez facilement les personnaliser en ajoutant des éléments avant ou après le module qui contient le shortcode.

Wordpress a aussi dû créer automatiquement la page de politique de confidentialité (que je fusionne personnellement avec les mentions légales). Vous pourrez la modifier. Concernant les mentions légales, voici les infos obligatoires à insérer.

Rendez vous dans le menu Pages > Toutes les pages pour afficher et modifier ces pages.

Vous pourrez ensuite créer les pages qui n’existent pas encore, et leur contenu. Vous aurez alors à choisir des modules adaptés à chaque page. Par exemple :

  • Qui sommes-nous : présenter votre société, votre expérience, votre philosophie. Montrer qu’il y a des personnes sérieuses derrière ce site ecommerce. Modules pertinents : Texte, Images, Témoignages, Résumé/Accroche…
  • FAQ : infos concernant les commandes, les modes de paiement, livraison, retours… Modules pertinents : Texte, Bascules…
  • Contact. Modules pertinents : Texte, Formulaire de contact, Résumé, Réseaux sociaux, Carte…
  • Conditions Générales de Vente (obligatoire) : créez les vôtres en vous inspirant de celles de plusieurs de vos concurrent, en les adaptant à votre utilisation et en reformulant au maximum. Module pertinent : Texte.

Vous entrez dans la phase de design des pages de votre site. Soignez votre mise en page. Illustrez vos propos. Vous allez passer quelques heures à fouiller dans les modules de Divi et à découvrir les fonctionnalités disponibles.

Mon conseil : dans un premier temps, allez à l’essentiel. Faites simple et sobre (le contenu de la plupart des sites e-commerce du web est noir sur fond blanc). Vu la quantité de modules, de paramètres et de combinaisons de paramètres disponibles, vous aurez vite fait de vous perdre.

Pour commencer, la majorités des réglages par défaut des modules peuvent être suffisants. Vous pouvez vous contenter de modifier la couleur des textes et traits, les tailles de police et les couleurs de fonds.

Pensez à effectuer ces réglages pour les affichages mobile et tablette.

affichage mobile et tablette

Si la création de contenu ou le web design ne vous inspirent pas, vous pouvez toujours vous inspirer de ce que font les autres.

Configurer WooCommerce

Nous allons maintenant entrer dans les réglage du eshop. Vous verrez, tout est assez bien expliqué dans l’interface.

Rendez vous dans le menu Woocommerce > Réglages

Réglages généraux

> Général : suivre les indications, paramètres assez explicites. Survolez les points d’interrogation pour plus d’infos sur chaque réglage.

Produits

> Produits > Général. Même chose, tout est assez explicite. Si vous avez un doute, laissez les réglages par défaut et vous y reviendrez plus tard.

> Produits > Inventaire. Si vous gérez les stocks de vos produits, activez cette gestion. Sinon ne pas l’activer (ex : pour des produits fabriqués sur demande, ou bien pour des produits virtuels). Tous les réglages sont assez explicites. Entrez votre adresse email comme destinataire des notifications.

Livraison

> Expédition > Mode d’expédition : créer une ou plusieurs zones de livraison (ex : France, France outre mer, Europe…) et définir pour chacune une méthode d’expédition (forfait, livraison gratuite ou retrait en point de vente). Entrez ensuite dans chaque méthode pour la modifier (ajouter le prix du forfait, définir ce qui peut activer la livraison gratuite, et laisser le retrait en magasin à 0 euro).

Méthode de paiement

Généralement, un site e-commerce implique l’installation d’un système de paiement en ligne par carte bancaire. Les 2 choix les plus courants sont alors 1/ le terminal de paiement de votre banque, ou bien 2/ l’utilisation d’une plateforme de type Paypal, ou équivalent : Paylib, Stripe… Paypal étant la plus connue.

La principale différence entre les 2 options est la suivante : Paypal vous demandera jusqu’à 3,4% de commission par vente (dégressif avec le volume de vente), mais aucun abonnement n’est obligatoire. Avec votre banque, vous paierez des frais de mise en service (de 150 à 400€ en fonction des banques), ainsi qu’un abonnement mensuel (15 à 20€). Par contre elle ne prélèvera que 1 à 1,5% de commission par transaction).

Tout dépend donc de votre volume de vente. Paypal est une bonne option pour débuter sans prendre trop de risques, et l’installation de l’extension est beaucoup plus simple (d’autant plus que chaque banque à son protocole d’installation spécifique, donc difficile pour moi de généraliser). Je fais donc le choix de Paypal pour simplifier les choses.

Vous pouvez ouvrir un compte pro (c’est gratuit) sur le site de Paypal.

Paramétrer Paypal :

> Paiements > Paypal > Gérer

Activez Paypal. Remplir Titre, Description et Email (lire les infos sous les points d’interrogation). Laissez tout le reste par défaut, sauf l’Identifiant de l’API Live et le Mot de passe de l’API Live que vous allez devoir récupérer dans votre compte Paypal dans App Center > Accepter des paiements > PayPal Checkout > Connecter votre plateforme e-commerce. Sinon, essayez ce lien direct.

Comptes et confidentialités

Dans cet onglet, tout est assez explicite. Vous comprendrez facilement comment faire vos choix. Mais dans un premier temps, vous pouvez tout laisser par défaut. Veillez simplement à sélectionner votre page de Politique de confidentialité (mentions légales).

E-mails

Il s’agit des notifications qui sont automatiquement envoyées par e-mail à l’administrateur du site et/ou au client, après chaque commande, à chaque changement d’état de la commande, lorsque le client enregistre ou modifie des infos personnelles, etc. Vous pouvez donc modifier ou ajouter des destinataires si vous le souhaitez.

J’ai aussi pour habitude de modifier le texte de l’email « commande terminée » (en cliquant sur « gérer ») pour indiquer plus clairement au client que sa commande a été expédiée, ce qui n’est pas clair dans le texte par défaut.

Intégration

Vous n’avez rien à modifier ici

Avancé

> Avancé > Installation des pages

Tout doit être configuré par défaut sauf pour ceci : si vous ne proposez pas de produits téléchargeables, supprimez le contenu du champ « Téléchargements » pour qu’il n’apparaisse pas dans le tableau de bord du client.

Créer votre premier produit

Ça y est, vous y êtes enfin. Il est temps de créer votre premier produit.

Rendez-vous dans le menu Produits > Ajouter produit.

On va d’abord s’assurer d’afficher toutes les options qui nous intéressent et de cacher celles qui ne nous intéressent pas. En haut à droite de la page, cliquez sur « Options de l’écran » pour dérouler les options. Puis ne cochez que « Catégories de produits », « Image produit », « Galerie produit », « Yoast SEO » (si vous utilisez ce plugin), « Données produit » et « Description courte du produit ».

options affichage page produit

Ces encarts sélectionnés s’affichent dans votre interface. Vous pouvez alors intervenir dans chacun d’entre eux :

  • Entrez le nom de votre produit.
  • Ajoutez une nouvelle catégorie (ou éventuellement une sous-catégories, c’est à dire catégorie ayant une catégorie parente) puis cochez là (ou cochez les). Elle sera utile pour classer les produits dans le site. Si vous devez la modifier dans le futur, ça se passera dans le Menu Produits > Catégories.
  • Ajoutez une « image produit » (l’image principale de votre produit qui s’affichera également en miniature dans la liste des produits).
  • Ajoutez éventuellement des images dans la galerie qui s’affichera sous l’image principale.
  • Ajouter une « description courte du produit ». Elle s’affichera à droite de « l’image produit » et avant le prix.
  • Ajoutez une description longue du produit dans l’éditeur de texte principal (qui n’a pas de nom).

description longue produit

Elle apparaîtra en bas de la page du produit.

Il reste ensuite à paramétrer les « Données produit », la zone la plus « technique ».

Comment configurer un produit sans variation (de taille, couleur, format…)

Dans l’encart « Données produit », sélectionnez « Produit simple », puis :

  • Dans l’onglet « Général », choisissez le prix de vente, et le prix en promo, le cas échéant. Je vous conseille de rentrer dans un premier temps un petit prix de vente (1€ par exemple), pour tester ensuite le paiement via Paypal.
  • Dans « inventaire », choisissez ou non de gérer un stock pour ce produit et indiquez votre stock actuel. Il se mettra à jour automatiquement à chaque commande. Cochez si besoin la case « vendre individuellement ».
  • Dans « Expédition ». Entrez éventuellement le poids du produit ou ses dimensions. Cela peut intéresser le client, ou peut être utile si vous utilisez une extension permettant de calculer les frais de port en fonction du poids ou du format du colis (non abordé dans ce guide). Sinon laissez vide.
  • Dans « Produits liés », vous pourrez plus tard (quand vous aurez entré d’autres produits) sélectionner les produits de montée en gamme pouvant intéresser le client ou les produits de vente croisée qui apparaîtrons sous le panier.

Pensez à « enregistrer le brouillon » régulièrement en haut à droite de votre page.

Comment configurer un produit avec des variations

Dans l’encart « Données produit », sélectionner « Produit variable », puis :

Recommencez les étapes listées pour un produit sans variation (sauf l’onglet « Général » qui a disparu), et ajoutez celles-ci :

Dans « Attributs », faites « ajouter » puis choisissez un nom d’attribut (ex: « couleur », « taille », « format »…) puis entrez les valeurs (variations) que peut prendre cet attribut (ex : rouge | bleu | gris). Si vous n’arrivez pas à écrire le symbole « | », faites un copier-coller depuis ce guide.

Cochez « visible sur la page produit » et « utilisé pour les variations ». Puis enregistrez les attributs.

créer un site e-commerce avec Divi et WooCommerce : Attributs produits variables

Dans « Variations », cliquez sur « ajouter une variation ». Vous pouvez alors automatiquement créer des variations pour tous les attributs que vous venez de créer.

A côté du numéro de la première variation créée (ex:#123), choisissez dans le menu déroulant quelle valeur d’attribut vous souhaitez associer à cette variation.

Ensuite, en survolant cette ligne, un petit triangle noir pointé vers le haut apparait. Cliquez dessus pour dérouler les paramètres de la variation.

Vous pouvez alors : définir une image spécifique à cette variation (en cliquant sur l’image bleue) qui se substituera à l’image du produit; définir un prix régulier et un prix promo spécifique à cette variation; définir un stock spécifique à cette variation (vous devez d’abord choisir de « gérer le stock »), etc. Cette variation de produit se gère comme un produit simple.

créer un site e-commerce avec Divi et WooCommerce Produit variable avec variations

Une fois vos modifications terminées dans la page du produit, cliquez sur le bouton bleu « publier » ou « mettre à jour », à droite de la page.

Terminez en modifiant la zone de Permalien (sous le Nom du produit) en y collant le nom du produit. Ce permalien va se reformater sans espaces ni caractères spéciaux.

Vous pouvez alors vous rendre sur la page du produit (sur le site, côté visiteur) en cliquant sur « voir produit » dans la barre noire tout en haut et observer le résultat. Le design de cette page peut être modifié en utilisant le Theme Builder de Divi, mais cela ne sera pas abordé dans cet article. Le modèle par défaut est déjà satisfaisant pour débuter.

Nous allons terminer en faisant un achat pour vérifier que Paypal fonctionne bien.

Copiez l’adresse du produit que vous venez de créer. Déconnectez-vous du site. Rendez vous à nouveau sur la page du produit que vous venez de créer en collant son adresse. Mettez ce produit dans le panier et passez commande en créant un compte avec une adresse email différente de celle de votre profil d’administrateur du site.

Créer toutes les catégories de produit

Rendez-vous dans le Menu Produits > Catégories et ajoutez les catégories de produits de votre site, une à une. Ne remplissez que le champ « Nom », et éventuellement choisissez la catégorie parente. Laissez pour le moment les autres valeurs par défaut.

La création d’une catégorie de produit génère la création automatique d’une page dans laquelle sont affichés tous les produits de cette catégorie. Le design de ces pages peut être modifié en utilisant le Theme Builder de Divi, mais cela ne sera pas abordé dans cet article. Les modèles par défaut sont déjà satisfaisants pour débuter.

Une fois que toutes les catégories sont entrées, il va falloir les rendre accessibles via un ou des menus.

Créer vos menus

Rendez-vous dans le Menu Apparence > Menu

Nous allons créer le menu principal. Entrez un nom de menu, par exemple « Menu Principal ». Cochez « Afficher l’emplacement : Menu Principal », pour que le menu que vous êtes en train de créer s’affecte au menu principal proposé par Divi. Puis cliquez sur « Créer le menu ».

Le menu est créé. Vous pouvez alors ajouter des onglets (pages, articles…) à ce menu dans l’encart « Ajouter des éléments de menu », à gauche. Généralement, j’utilise ce menu pour afficher les catégories de produit. Pour pouvoir les insérer, il faut d’abord les afficher dans l’encart de gauche.

En haut à droite de la page, cliquez sur « Options de l’écran » pour dérouler les options. Puis cochez au minimum « Pages » , « Liens personnalisés » et « Catégories de produits ». Vous pouvez alors ajouter vos catégories de produit au menu principal en les cochant puis en cliquant sur « Ajouter au menu ».

Vous pourrez ensuite attraper chaque élément du menu et organiser leur hiérarchie par de simples glisser-déposer des cases. Les éléments (= onglets sur le site) enfants sont décalés vers la droite par rapport au éléments parents.

créer un site e-commerce avec Divi et WooCommerce : Menu avec categories

Si vous voulez créer un onglet parent qui ne correspond à aucune page existante (il dévoilera les onglets enfants quand on le survolera mais rien ne se passera quand on le cliquera), vous pouvez créer un « lien personnalisé » en entrant « # » (sans les guillemets) dans l’adresse web et l’ajouter au menu.

Divi prévoit aussi un menu secondaire (qui s’affiche dans une barre tout en haut) et un menu de pied de page. Cela peut être un bon emplacement pour insérer des onglets de pages telles que Contact, FAQ, Mon compte, etc. Vous pouvez donc, si vous le souhaitez, créer de nouveaux menus et les affecter à ces emplacements prévus par Divi.

Si vous vous rendez dans Apparence > Widget, vous verrez que les menus que vous avez créés peuvent aussi être insérés dans les zones de pied de page ou dans la colonne latérale (si vous en avez mis une) en faisant glisser la case « Menu de navigation » vers la zone voulue.

Finaliser la page d’accueil

Une fois que vous avez créé les catégories de produits et les premiers produits, vous pouvez remplir la page d’accueil en utilisant les modules proposés par Divi. Voici des exemples de ce que vous pouvez y insérer :

  • Un « diaporama pleine largeur » (ou « curseur de défilement pleine largeur »), dans une section pleine largeur
  • Modules « Accroche » (ou « résumé »), « Appels à l’action » ou modules « Textes » + « Boutons » renvoyant vers différentes pages de catégorie ou présentant vos offres du moment
  • Modules « accroche » (ou « résumé ») pour afficher vos points forts (ex : made in France, livraison gratuite, retours possibles sous 14 jours, paiements sécurisés…)
  • Quelques produits d’une catégorie, ou derniers produits ajoutés, ou produits en promo… avec le module « Boutique »
  • Modules « Textes » et « Témoignages »pour afficher des avis de clients
  • Modules « images » pour afficher les marques avec lesquelles vous travaillez…

L’accueil est la page la plus importante de votre site, peaufinez-là !

Cookies : mettre votre site web en conformité

Pour afficher la mention obligatoire de recueil du consentement des utilisateurs préalablement au dépôt de certains cookies, je vous conseille l’extension Complianz | GDPR/CCPA Cookie Consent, très facile à configurer. Nous l’avons déjà installée.

Rendez vous dans Complianz > Assistant et suivez le guide pour paramétrer votre bandeau des cookies.

Gérer vos commandes

Vous avez du recevoir un email vous indiquant que votre commande test a été passée.

Rendez-vous dans le Menu WooCommerce > Commandes.

Vous voyez la liste de vos commandes en cours et passées. Cliquer sur le nom de la commande pour en voir les détails.

Vous pouvez alors : modifier la commande si besoin, changer son état : de « en attente » à « en cours » si le produit a bien été payé, ou à « terminée » si vous venez de l’expédier.

Testez chaque changement d’état de commande en cliquant sur « Mettre à jour ».

Le client (c’est vous pour cette commande test) recevra automatiquement une notification par email à chaque modification d’état de la commande.

En bas à droite, vous pouvez aussi noter une note privée sur cette commande (que seul vous verrez) ou envoyer au client une note personnalisée qui sera intégrée à un email automatique après avoir cliqué sur « ajouter ». Vous pouvez le tester.

Suivre vos statistiques de vente

Vous les trouverez dans le menu « Statistiques ». Observez vos revenus et commandes sur des périodes données, filtrez par produit ou par catégories, faites un point sur vos stocks…

Tout est indiqué de façon assez explicite. Je vous laisse découvrir toutes les données disponibles.

Connecter votre site à Google Analytics

Pour récolter les données de fréquentation de votre site, vous devez créer un compte sur Google Analytics. Une fois connecté, rendez-vous dans le menu « Administration » puis créez une propriété Web. Enregistrez votre site puis rendez-vous dans le menu Informations de suivi > Code de suivi. Vous y trouverez le Global Site Tag qu’il faut copier. Allez dans le backoffice Wordpress, dans le menu Divi > Options du thème > Intégration et collez-le dans « Ajouter ligne de code à la < head > de votre blog »

Au bout de quelques jours, vos premières statistiques de fréquentation du site seront visible sur votre compte Analytics.

Pour finir

Vous savez maintenant créer un site e-commerce avec Divi et WooCommerce. J’espère que ce guide vous a été utile. Si vous êtes satisfaits ou avez des idées d’améliorations, n’hésitez pas à laisser un commentaire. C’est toujours bon d’avoir un retour, qu’il soit positif ou négatif.

Vous venez de créer votre site e-commerce, bravo ! Mais ne croyez pas que vous êtes tranquille pour un moment. Cela ne fait que commencer ! Gardez à l’esprit qu’une boutique en ligne est un outil en perpétuel mouvement. Il évoluera au grès des saisons, des nouveautés, de vos stocks… Pendant les premiers mois, vous aurez peu de commandes, c’est le bon moment pour remplir votre catalogue et travailler votre référencement naturel. Puis les commandes arriveront et demanderont une gestion au quotidien.

Ce guide vous a présenté les bases incontournables pour installer un e-shop et le faire tourner. Il était évidement impossible d’aborder tous les détails, toutes les fonctionnalités et particularités que peut présenter la vente en ligne sous Wordpress et Divi. Il existe encore de grandes possibilités d’amélioration de votre site. Parmi les fonctionnalités que j’ajoute le plus souvent, il y a par exemple :

  • le paiement par CB avec le terminal électronique de votre banque
  • le calcul des frais de port en fonction du poids du produit
  • la livraison via Mondial Relay, Colissimo ou via autres transporteurs spécifiques
  • l’espace Professionnels avec une tarification spécifique
  • une barre de filtre des produits
  • une barre de recherche de produits
  • la création de produits complexes personnalisables/composables étape par étape
  • la relance par email après abandon de panier
  • la synchronisation de vos contacts client avec votre outil d’emailing
  • la compression automatique des images
  • l’intégration de flux de publications sur les réseaux sociaux
  • l’intégration des avis Google ou avis vérifiés…

Il s’agit là de modifications « techniques ». Mais d’autres actions peuvent aussi être menées pour booster votre site sur le plan du design :

  • mises en pages ergonomiques, visuellement attractives et optimisées pour les conversions
  • création d’encarts, bandeaux ou bannières attractives pour présenter produits et gammes, ou à l’occasion d’opérations commerciales saisonnières
  • personnalisation des gabarits de pages de produits ou de catégories de produits
  • création de logo…

Ou du référencement naturel :

  • optimisation technique (utilisation d’outils de contrôle Google, installation et configuration de nouveaux plugins de gestion et d’optimisation)
  • optimisation éditoriale du site (modification des textes pour mise en avant de mots-clés et amélioration de la position des pages et produits du sites pour les requêtes correspondant à ces mot-clés, effectuées dans Google).
  • création d’un blog pour booster encore plus votre référencement naturel

Ou de sa sécurisation

Certaines de ces évolutions pourront faire l’objet de futurs articles. Elles sont peut-être déjà abordées dans des publications ou tutos sur le net. A vous de fouiller. Google est votre meilleur allié dans cette affaire !

Il ne me reste plus qu’à vous souhaiter « Bon Vent », ou plutôt « Bonnes Ventes » comme on dit chez Woocommerce ;)

Vous êtes prêt(e) à tester le thème Wordpress N°1 mondial ? (30 jours pour changer d'avis)

Vous souhaitez créer un site e-commerce avec Divi et WooCommerce mais désirez une assistance personnalisée, ou me confier l’intégralité du projet ?

Autres articles de la même catégorie : 

35 Commentaires 

  1. Nicolas

    Bonjour Romain,

    Après avoir testé plusieurs solutions pour un projet de eshop (Shopify, Wizishop, big commerce, Dr tech…etc),

    je me suis décidé à m’orienté sur Wordpress avec Woocommerce + Divi (grâce à Dr Tech : version de Wordpress simplifiée avec Divi intégré nativement).

    Je ne reste pas sur Dr Tech car trop obscure sur leur solution. On est sur Wordpress, mais le site ne nous appartient pas, comme sur Shopify etc…

    Je viens donc de prendre mon hebergement sur Hostinger, d’installer mon Wordpress, et de prendre mon abonnement Divi.

    Les plugins que je compte installer :

    1/Moyens de paiement (j’ai lu plus haut pour paypal) :
    Je comptais installer en supp STRIPE.
    (voir avec ma banque pro en effet si les ventes se font plus nombreuses pour éviter trop de commissions pour les autres).

    2/Formulaire de contact :
    Y-a-t-il un intérêt à installer CONTACT FORM 7 (ou équivalent) ?
    Je voudrais installer également le ReCAPTCHA avec et AXEPTIO COOKIES pour être en conformité.

    3/Compresseur d’images :
    J’ai lu que du bien de IMAGIFY, comme je n’ai pas énormément d’articles et de photos par articles, je pourrais peut-être me passer de leur abonnement payant. Une alternative sinon?

    4/Y-a-t-il des plug-ins « impératifs » à installer que je n’ai pas mentionné?

    Ca me ferait un budget d’environ 140€/an

    Du coup si je compare les abonnements de base chez :
    -Shopify : 324€/an
    -Wizishop : 324€/an
    -Dr Tech : 348€/an
    -BigCommerce : 320€/an

    Ils sont tous dans la même fourchette de prix : 3 x plus cher que sur la solution Woocommerce + Divi.

    Questions :

    Aurais-je une solution équivalente en terme de SEO, de Rapidité, etc comparé aux autres solutions tel que Shopify ?

    Merci d’avance à toi, et même si ça a déjà été dis, super boulot bravo !

    Répondre
    • Romain Olivier

      Salut Nicolas,

      – Y-a-t-il un intérêt à installer CONTACT FORM 7 : non, le formulaire de Divi a déjà tout, y compris le recaptcha

      – Compresseur d’images : si tu as peu de photos, les versions gratuites suffiront. Il y a shortpixel aussi c’est un concurrent. Sinon https://www.iloveimg.com/fr pour le faire manuellement avant d’importer les images.

      – Y-a-t-il des plug-ins « impératifs » à installer que je n’ai pas mentionné? : je les ai listés dans mon article ;)

      – Aurais-je une solution équivalente en terme de SEO, de Rapidité, etc comparé aux autres solutions tel que Shopify ? : je ne pense pas !

      Bon courage !

      Romain

    • Nicolas

      Tout d’abord, merci pour cette réactivité Romain, chapeau bas !

      Je vais me refaire l’article en entier, et y trouver les plugins manquant

      Quand tu dis « je ne pense pas » pour la solution équivalente.
      Ça sous entend que j’aurais mieux ?

      Merci encore pour ton travail.

    • Romain Olivier

      Non, je veux dire que Wordpress est de plus en plus compétitif (40% des sites dans le monde). C’est un outil d’avenir et le meilleur choix que tu peux faire.

  2. Soaz

    Merci infiniment. J’étais en pleine galère de prise en main sur WP que j’ai toujours fait en sorte de contourner jusqu’ici. Mais Divi et WC sont de précieux outils. Toutefois, je pense que j’aurais cédé au rage quit sans votre tuto.
    Mille mercis

    Répondre
    • Romain Olivier

      Avec plaisir !

  3. Walid

    Salut Romain, merci pour cet article je suis un jeune et débutant développeur wordpress, je cherche à créer un marketplace de livraison entre particuliers avec paiement en ligne, je suis complétement perdu pour chercher et trouver ce qui pourrai correspondre à mon besoin
    Qu est ce que tu me conseil comme thème? quelle sont tes recommandations pour faire des recherches efficaces?
    Pour cette plateforme les fonctionnalités sont paiements en ligne, prix libre par l’expéditeur ou transporteur, intégration d’un calendrier et d’une liste de villes.
    Merci pour ton aide

    Répondre
    • Romain Olivier

      Salut Walid
      Divi est un thème parfait pour faire du e-commerce. Pour toutes les autres fonctionnalités particulières que tu recherches, elles seront apportées par des plugins. Google sera ton meilleur allié pour trouver ces plugins… Il est d’ailleur souvent plus efficace de tapper tes requêtes en anglais. Bon courage !

  4. Mathilde Vachette

    Bonjour Romain,

    Merci pour cet article très complet ! Je rencontre une difficulté cependant : lorsque je valide ma commande test, je tombe sur une page « 404 » (qui devrait être la page « commande reçue »). Dois-je créer cette page ? Comment faire pour que l’utilisateur atterrisse dessus après avoir passé commande ?

    Un grand merci pour votre aide.

    Répondre
  5. Franck DUQUESNE

    Bonjour Romain,
    Pour le paiement en ligne par CB tu conseil quel solution ?
    le plugin PayePal est il suffisant ?
    Merci

    Répondre
    • Romain Olivier

      Bonjour Franck,

      Paypal permet bien de proposer au visiteur de payer par CB, via Paypal certes, mais sans qu’il ait forcément de compte Paypal. Donc oui, ça peut être suffisant. Petite astuce : Tout marche très bien sur ordinateur, mais sur mobile le visiteur a quand même l’obligation de créer un compte Paypal. Ce réglage est mis en place par Paypal pour des raisons de sécurité (soit-disant). Il suffit de demander au support Paypal de changer ce réglage par défaut et ils le font. Enfin, c’était le cas il y a quelques mois.

      Sinon, le jour où vous faites des ventes régulières, le terminal de paiement de votre banque sera plus intéressant (abonnement à payer mais moins de commission que Paypal).

  6. EPICUREO

    Bonjour Romain,
    Un grand merci pour ce tuto trés explicatif. Un grand BRAVO !!

    Répondre
    • Franck DUQUESNE

      Un grand merci pour votre réponse et quel réactivité !

    • Romain Olivier

      Avec plaisir !

  7. Romaric

    Bonsoir,
    Je viens de découvrir votre site en cherchant le bon thème WP pour mon projet, un site « catalogue » de timbre.
    Le projet est de pouvoir répertorier l’ensemble des timbres.
    Je pensais faire un catalogue produit avec une référence par modèle de timbre.
    Où ça se complique c’est que je souhaite par la suite pouvoir vendre des timbres qui seront uniques mais rattaché à une des références du catalogue. Par exemple pouvoir vendre x timbres de la même référence du catalogue mais que chacun soit un produit unique car différent par l’oblitération ou l’état…pas certain que mon explication soit très compréhensible.
    Si vous avez compris un truc à mon explication, pensez vous que DIVI + WooCommerce soit adaptés?
    Merci d’avance
    Romaric

    Répondre
    • Romain Olivier

      Bonjour,
      Oui sans problème.
      Vous n’aurez qu’à créer un produit différent par timbre (en les numérotant par exemple) ou bien un même produit avec les différentes versions du même timbre comme variables (comme quand on choisit la taille d’un vêtement).

  8. Patrick

    Bonjour Romain,
    merci pour ce guide très bien fait.

    Je débute avec WordPress et Divi (lifetime), ce dernier facilitant la conception avec WooCommerce.
    En cherchant sur le web, je suis tombé sur un nombre non anodin d’avis défavorables sur WC : mises à jour faisant crasher le site, nécessité d’installer des addons onéreux pour vraiment faire du e-commerce, grosse difficulté si le nombre d’articles augmente, site pollué lors de la suppression de WC, etc.
    J’avoue que cela me refroidit fortement !

    Pourriez vous m’en dire plus là dessus ?

    Bien cordialement, Patrick.

    Répondre
    • Romain Olivier

      Bonjour Patrick,

      Chaque outil a des avantages et des inconvénients et vous trouverez un tas de comparatifs sur le net.
      En quelques mots :
      – mises à jour faisant crasher le site : ça peut arriver avec n’importe quel outil. Il faut simplement prendre des précautions avant les mises à jours et s’assurer que tous les plugins et thèmes sont compatibles avec la nouvelle version de WP. Et en cas de crash, il y a pleins de solutions pour réparer le bug.
      – nécessité d’installer des addons onéreux pour vraiment faire du e-commerce : Woocommerce et paypal sont gratuits. Donc vous pouvez très bien faire « vraiment » du e-commerce sans addons payant.
      – Grosse difficulté si le nombre d’articles augmente : c’est une limite connue de WP (la gestion des très gros catalogues), encore que ça s’améliore de mises à jour en mises à jour. Mais des plugins peuvent aider à cela. De plus, c’est surtout l’hébergement qui deviendra limitant. C’est un autre problème…

      (Votre commentaire n’avait pas été supprimé. Je dois juste l’approuver afin qu’il soit publié ;-)

      Bonne journée

  9. Pauline

    Bonsoir,
    pourquoi ne pas installer jetpack ?

    Répondre
    • Romain Olivier

      Bonjour Pauline,

      Vous pouvez, oui. Je suis resté, dans ce guide, sur une installation minimale, pour faire simple.

  10. Sophie

    Bonjour,
    Merci pour cet article très riche !
    Je suis en train de monter un Eshop en Woocommerce & Divi. Je n’arrive pas à afficher mes catégories de produits sur ma Landing Page. Y a-t-il une méthode simplifié pour le faire ? Je ne vois pas de modules woo category dans le Divi Builder… Merci beaucoup pour vos lumières :)
    Bonne journée
    Sophie

    Répondre
    • Romain Olivier

      Salut Sophie,

      A ma connaissance, ça fait partie des (rares) lacunes de Divi. Donc à faire à la main si pas trop de catégories ou bien chercher un plugin externe qui fait ça…

    • Sophie

      Merci Romain pour votre retour. En effet, c’est bien ce qui me semblait… Assez étonnant sur ce thème .. Je n’ai que 4 catégories, Je vais essayer de trouver comment le faire manuellement, mais pour une débutante c’est pas évident ! Si vous connaissez un plug in, je suis preneuse :-)
      Belle journée

    • Romain Olivier

      Avec 4 catégories, tu mets 4 modules « accroche » (ou « résumé » selon la traduction) et sur chacun un lien vers la catégorie correspondante.

    • Sophie

      Whaouuu ! Ca marche !! Merci beaucoup Romain ! Tu illumines ma journée :-)
      C’était si simple, mais il fallait le savoir !
      C’est pas aussi didactique que Flatesome mais c’est extra
      Merci

  11. Mel

    Bonjour,
    Merci pour ces précieux conseils!
    Que pensez vous de créer un thème enfant de DIVI pour sécuriser au max en cas de mise a jour?

    Répondre
    • Romain Olivier

      Bonjour,
      Oui c’est une bonne pratique que je n’ai pas abordée ici par soucis de simplification !

    • Mel

      Super merci en tout cas pour toutes ces infos!

  12. Amaury RAMAUT

    Bonjour, je viens de découvrir votre site et il colle tellement bien à mes attentes !
    Bravo, je vais suivre vos conseils à la lettre.
    Petite question, DIVI propose un module DIVIe-commerce (qu’il vend en plus du thème DIVI). Un thème enfant conçu pour vendre des produits en ligne avec Divi et WooCommerce…

    Qu’en pensez vous ?

    Répondre
    • Romain Olivier

      Bonjour Amaury,

      Pas besoin d’un module payant en plus de Divi pour faire du e-commerce. Seulement besoin de Divi et de Woocommerce (gratuit).
      Il existe des layout ou thèmes enfants vendus pour faire du e-commerce. Mais il apportent simplement une proposition de design que tu pourras reproduire avec le thème Divi de base. Elegant Themes propose aussi des Layout gratuits.

      Bonne continuation !

  13. Cyrille

    Bonjour Romain,

    Et merci pour tous ces précieux conseils.

    J’ai une petite question : peut-on intégrer un des layout Divi dédié aux boutiques en ligne à Woocommerce ?

    Merci de votre réponse.

    Répondre
    • Romain Olivier

      Bonjour Cyrille,

      Vous pouvez utiliser les layout Divi pour votre site fonctionnant avec Woocommerce, oui. Divi propose des modules Woocommerce entièrement compatibles, donc aucun soucis.

  14. Nathalie

    Bonjour, je cherche a personnaliser les pages woocommerce : panier, valid de commande et mon compte pour qu’elles sadaptent parfaitemsnt aux sites que je crée. Faut-il que je mette les mains dans le cambouis pour modifier les hook woocommerce ? Merci

    Répondre
    • Romain Olivier

      Bonjour, Le theme builder de Divi permet de personnaliser ces pages.

Rétroliens/Pings

  1. Télécharger le thème Divi gratuitement : est-ce possible ? - […] entrepreneurs qui souhaitent se lancer eux-mêmes dans la création de leur site vitrine ou e-commerce. Je m’en sers personnellement…

Envoyer le commentaire

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

 

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Share This