Créer une boutique en ligne avec WooCommerce
Boutique complète, espace marchand ajouté à un site existant ou simple catalogue sans vente : rédiger le cahier des charges, choisir et régler le thème, installer et paramétrer WooCommerce, créer les produits, choisir les extensions et respecter les obligations légales.
Boutique, espace marchand ou catalogue
Choisir son modèle avant de choisir ses outils
| Modèle | Principe | Exemple |
|---|---|---|
| Boutique en ligne | Le site entier est pensé pour vendre : accueil, catégories, panier, paiement | Boutique de gadgets ou d’objets insolites |
| Espace marchand | Une rubrique « Boutique » ajoutée à un site vitrine existant | Organisme qui vend des supports de cours ou des modèles Excel |
| Catalogue non-vendeur | Les produits sont présentés avec fiches et filtres, sans panier ni paiement ; on demande un devis | Catalogue de formations, artisan sur commande |
Les trois modèles se construisent avec la même extension, WooCommerce, gratuite et la plus utilisée pour vendre avec WordPress. Seuls les réglages et les extensions complémentaires changent.
Exercice 1 · Découverte
Quel modèle conseillez-vous : un fabricant de meubles sur mesure ; un organisme qui veut vendre 5 livrets PDF ; une boutique de bougies artisanales ?
Voir le corrigé
Meubles sur mesure : catalogue non-vendeur avec demande de devis (prix variable). Livrets PDF : espace marchand avec produits téléchargeables. Bougies : boutique en ligne complète avec livraison.
Fonctionnalités indispensables : le cahier des charges
WordPress et e-commerce · document à rédiger avant le premier clic
Le cahier des charges décrit ce que la boutique doit faire. Il évite les oublis, sert de base aux devis des prestataires et de check-list au lancement.
| Rubrique | Questions à trancher |
|---|---|
| Objectifs | Que vend-on, à qui (particuliers, professionnels), quel chiffre d’affaires visé ? |
| Catalogue | Nombre de produits, variantes (taille, couleur), produits physiques ou téléchargeables, photos |
| Prix et TVA | Affichage TTC ou HT, taux de TVA, codes promo, prix professionnels |
| Paiement | Carte bancaire, PayPal, virement, paiement en plusieurs fois |
| Livraison | Transporteurs, points relais, retrait sur place, zones, tarifs, livraison offerte |
| Comptes clients | Commande sans compte autorisée ou non, espace client, historique |
| Gestion | Stocks, factures PDF, e-mails de commande, export comptable |
| Légal | CGV, mentions légales, rétractation, cookies, RGPD |
| Marketing | SEO des fiches produits, newsletter, avis clients, réseaux sociaux |
| Technique | Hébergement adapté, HTTPS, sauvegardes quotidiennes, maintenance |
Exercice 2 · Application
Rédigez le cahier des charges simplifié (une ligne par rubrique) d’un espace marchand qui vend des modèles Excel téléchargeables.
Voir le corrigé
Objectifs : vendre 10 modèles Excel aux PME. Catalogue : produits virtuels et téléchargeables. Prix : TTC, TVA 20 %, code promo stagiaires. Paiement : carte et PayPal. Livraison : aucune (téléchargement). Comptes : commande sans compte, lien de téléchargement par e-mail. Gestion : factures PDF automatiques. Légal : CGV avec renoncement au droit de rétractation pour le contenu numérique. Marketing : fiches produits optimisées, liens depuis les articles du blog. Technique : sauvegarde quotidienne.
Sélection et paramétrage du thème
Apparence › Thèmes · Apparence › Personnaliser ou Éditeur
Les critères de choix
- Compatibilité WooCommerce déclarée : gabarits des pages boutique, produit, panier et commande soignés.
- Rapidité : un thème léger, car chaque seconde de chargement fait baisser les ventes.
- Mobile : la majorité des visites e-commerce se fait sur smartphone.
- Mises à jour régulières et compatibilité avec la dernière version de WooCommerce.
- Personnalisation sans code : couleurs, polices, en-tête, mise en page des fiches produits.
Le paramétrage
- Installer le thème, puis créer un thème enfant si vous comptez modifier son code.
- Régler l’identité : logo, icône du site, couleurs et polices de la charte.
- Choisir la mise en page de la boutique : nombre de produits par ligne, barre latérale de filtres ou non.
- Régler l’en-tête : menu, recherche de produits, icône panier et compte client.
- Contrôler les gabarits Boutique, Produit, Panier et Commande sur ordinateur et sur mobile.
Exercice 3 · Application
Sur votre site de test, réglez la boutique pour afficher 3 produits par ligne et 12 par page, aux couleurs de votre charte.
Voir le corrigé
Thème classique : Apparence › Personnaliser › WooCommerce › Catalogue de produits › 3 par ligne, 4 lignes. Thème à blocs : Éditeur › Modèles › Catalogue de produits › bloc Modèle de produits › 3 colonnes, 12 éléments par page. Couleurs : Personnaliser › Couleurs, ou Éditeur › Styles.
Thèmes compatibles WooCommerce
Apparence › Thèmes › Ajouter un thème
| Thème | Points forts | Pour qui |
|---|---|---|
| Storefront | Thème officiel de WooCommerce, sobre et fiable | Premier projet, apprentissage |
| Astra | Très léger, nombreux modèles de boutiques prêts à importer | Boutique rapide à mettre en place |
| Kadence | Personnalisation poussée sans code, en-tête et pied de page par glisser-déposer | Boutique sur mesure |
| Blocksy | Moderne, léger, bonnes options WooCommerce gratuites | Boutique au design soigné |
| Twenty Twenty-Five | Thème à blocs officiel de WordPress, pages WooCommerce éditables en blocs | Site sous l’éditeur de site |
Exercice 4 · Découverte
Sur une copie de votre site, activez Storefront puis Astra et comparez la page produit sur mobile.
Voir le corrigé
Apparence › Thèmes › Ajouter › rechercher Storefront › Installer › Activer › ouvrir un produit en vue mobile (outils de développement du navigateur, F12). Recommencer avec Astra. Comparer : taille des photos, visibilité du bouton Ajouter au panier, lisibilité du prix.
Installation native de WooCommerce
Extensions › Ajouter une extension › WooCommerce
- Faire une sauvegarde complète du site.
- Ouvrir Extensions › Ajouter une extension, rechercher WooCommerce, cliquer sur Installer maintenant puis Activer.
- Suivre l’assistant de configuration : activité, adresse de la boutique, secteur, type de produits.
- Refuser les extensions proposées en option dont vous n’avez pas besoin.
- Vérifier les pages créées automatiquement : Boutique, Panier, Validation de la commande et Mon compte.
- Ajouter la page Boutique et l’icône panier dans le menu principal.
| Nouveau menu | Rôle |
|---|---|
| WooCommerce | Commandes, clients, réglages, état du système |
| Produits | Catalogue, catégories, étiquettes, attributs |
| Paiements | Moyens de paiement |
| Statistiques | Ventes, produits, commandes, revenus |
| Marketing | Codes promo et extensions de marketing |
Exercice 5 · Application
Installez WooCommerce sur votre site de test et vérifiez que les 4 pages de la boutique existent et sont bien associées dans les réglages.
Voir le corrigé
Installer et activer WooCommerce › suivre l’assistant › Pages › repérer Boutique, Panier, Validation de la commande, Mon compte › WooCommerce › Réglages › onglet Avancé › Configuration de la page : chaque liste doit pointer vers la bonne page.
Paramétrer la boutique
WooCommerce › Réglages
| Onglet | Réglages essentiels pour la France |
|---|---|
| Général | Adresse, zones de vente, devise euro, séparateur décimal virgule, millier espace |
| Produits | Unités (kg, cm), avis clients, gestion des stocks, produits téléchargeables |
| TVA | Activer les taxes, saisir les prix TTC, taux standard 20 %, taux réduits si besoin |
| Expédition | Zone France, méthodes : forfait, livraison gratuite dès un montant, retrait sur place |
| Paiements | Activer les moyens choisis, mode test avant l’ouverture |
| Comptes et confidentialité | Commande sans compte, création de compte, durée de conservation des données |
| E-mails | Expéditeur, logo, couleurs, textes des e-mails de commande |
- Régler chaque onglet dans l’ordre du tableau.
- Passer les moyens de paiement en mode test.
- Passer une commande test complète : panier, livraison, paiement, e-mails reçus.
- Repasser les paiements en mode réel et désactiver « Bientôt disponible ».
Exercice 6 · Application
Paramétrez : TVA 20 % avec prix saisis TTC, livraison France à 5,90 €, gratuite dès 50 € d’achat, et retrait sur place gratuit.
Voir le corrigé
Général › cocher Activer les taxes. Onglet TVA › Oui, je saisirai les prix TTC › Taux standard › pays FR, 20 %, nom TVA. Expédition › Ajouter une zone « France » › méthodes Forfait 5,90 €, Livraison gratuite (montant minimum 50 €), Point de vente (retrait) à 0 €.
Créer ses produits
Produits › Ajouter un produit
| Type | Usage |
|---|---|
| Produit simple | Un article, un prix (un mug, un livre) |
| Produit variable | Des variantes avec prix ou stock propres (taille, couleur) |
| Produit groupé | Plusieurs produits présentés ensemble |
| Produit externe | Bouton vers un autre site (affiliation, place de marché) |
| Virtuel / Téléchargeable | Options d’un produit simple : service sans livraison, fichier à télécharger |
- Saisir le nom et la description longue (bénéfices, caractéristiques, conseils d’utilisation).
- Dans Données produit, choisir le type, saisir le prix normal et éventuellement le prix promo avec ses dates.
- Onglet Inventaire : référence (UGS), gestion du stock, quantité.
- Onglet Expédition : poids et dimensions pour le calcul de la livraison.
- Rédiger la description courte, affichée à côté du prix.
- Ajouter l’image produit et la galerie, choisir la catégorie, puis Publier.
Exercice 7 · Maîtrise
Créez un tee-shirt en tailles S, M, L et XL, à 19,90 €, la taille XL à 21,90 €, avec un stock de 10 par taille.
Voir le corrigé
Produits › Ajouter › Données produit : Produit variable › onglet Attributs › attribut « Taille », valeurs S | M | L | XL, cocher Utilisé pour les variations › onglet Variations › Générer les variations › pour chaque variation : prix 19,90 € (21,90 € pour XL), cocher Gérer le stock, quantité 10 › Enregistrer › Publier.
Plugins compatibles pour le e-commerce
Extensions › Ajouter une extension · WooCommerce › Extensions
| Besoin | Extensions |
|---|---|
| Paiement par carte | WooPayments, Stripe pour WooCommerce, PayPlug |
| PayPal | WooCommerce PayPal Payments (extension officielle) |
| Livraison | Extensions Colissimo, Mondial Relay ou Boxtal pour étiquettes et points relais |
| Factures | PDF Invoices & Packing Slips : facture PDF jointe à l’e-mail de commande |
| Avis clients | Avis natifs de WooCommerce, ou plateformes d’avis vérifiés |
| SEO produits | Yoast SEO ou Rank Math : titres, données structurées Product |
| Liste d’envies | YITH WooCommerce Wishlist |
| Cookies et RGPD | Complianz, avec blocage des traceurs avant consentement |
| E-mails fiables | WP Mail SMTP, pour que les confirmations de commande arrivent |
| Sauvegarde | UpdraftPlus, base de données au moins chaque jour |
Exercice 8 · Application
Choisissez les extensions d’une boutique de bougies qui livre en points relais et accepte carte bancaire et PayPal.
Voir le corrigé
Stripe (ou WooPayments) pour la carte, WooCommerce PayPal Payments, extension Mondial Relay ou Boxtal, PDF Invoices & Packing Slips, Complianz, WP Mail SMTP, UpdraftPlus, Yoast SEO. Chaque besoin couvert par une seule extension.
Le catalogue non-vendeur
Mode catalogue · demande de devis
En mode catalogue, WooCommerce sert à présenter les produits (fiches, photos, catégories, filtres) sans panier ni paiement. Le visiteur demande un devis ou contacte l’entreprise.
- Installer une extension de mode catalogue (par exemple YITH WooCommerce Catalog Mode).
- Masquer le bouton Ajouter au panier et, si besoin, les prix.
- Ajouter sur chaque fiche un bouton Demander un devis qui ouvre un formulaire WPForms, en reprenant le nom du produit.
- Retirer les pages Panier et Validation de la commande du menu.
- Garder les catégories, filtres et recherche pour faciliter la navigation.
Exercice 9 · Application
Transformez votre boutique de test en catalogue : plus de panier, prix masqués, bouton « Demander un devis » vers un formulaire.
Voir le corrigé
Installer YITH WooCommerce Catalog Mode › activer le mode catalogue › masquer Ajouter au panier et le prix › créer un formulaire WPForms « Demande de devis » (champ Produit) › ajouter le bouton via les options de l’extension ou un bloc Boutons dans le modèle Produit unique › retirer Panier du menu.
Les obligations légales en France
Code de la consommation · RGPD
| Obligation | Mise en œuvre dans WooCommerce |
|---|---|
| Mentions légales | Page dédiée : identité, SIRET, hébergeur, contact |
| Conditions générales de vente | Page CGV, case à cocher avant paiement (WooCommerce › Réglages › Avancé › Page des conditions générales) |
| Prix TTC et frais de livraison | Affichés avant la validation de la commande |
| Droit de rétractation de 14 jours | Expliqué dans les CGV, avec formulaire type ; exceptions comme le contenu numérique téléchargé avec accord du client |
| Bouton de commande explicite | Libellé clair du type « Commander avec obligation de paiement » |
| Médiateur de la consommation | Coordonnées du médiateur dans les CGV |
| Données personnelles | Politique de confidentialité, bandeau cookies, durée de conservation |
| Facture | Facture avec mentions obligatoires, transmise au client |
Exercice 10 · Application
Vérifiez que votre boutique de test oblige le client à accepter les CGV avant de payer, et que le bouton final est explicite.
Voir le corrigé
Créer la page CGV › WooCommerce › Réglages › Avancé › Page des conditions générales : CGV. Dans le modèle ou la page Validation de la commande, vérifier la case d’acceptation et régler le libellé du bouton (bloc Validation de commande › texte du bouton). Passer une commande test pour contrôler.
Atelier : l’espace marchand d’un organisme
Atelier noté sur 20 points · site de test
L’organisme « Form’Avenir » veut vendre sur son site vitrine 3 livrets PDF et un mug à son logo, et présenter ses formations en catalogue sur devis.
| Consigne | Points |
|---|---|
| 1. Rédiger le cahier des charges simplifié | 3 |
| 2. Installer WooCommerce en mode « Bientôt disponible » | 2 |
| 3. Régler TVA, devise, livraison du mug et retrait sur place | 3 |
| 4. Créer 3 produits téléchargeables et 1 produit physique | 3 |
| 5. Créer 2 formations sans prix avec bouton « Demander un devis » | 2 |
| 6. Activer un moyen de paiement en mode test et passer une commande | 3 |
| 7. Publier CGV et mentions légales, case d’acceptation active | 2 |
| 8. Ajouter Boutique et panier au menu, contrôler sur mobile | 2 |
Voir le corrigé
1. Tableau de la section 02 rempli. 2. Extensions › WooCommerce › assistant › Réglages › Visibilité du site : Bientôt disponible. 3. Taxes activées, prix TTC, 20 % ; euro ; zone France avec forfait pour le mug ; Point de vente pour le retrait. 4. Livrets : produit simple, cases Virtuel et Téléchargeable, fichier PDF joint ; mug : produit simple avec poids. 5. Produits sans prix + bouton vers le formulaire WPForms. 6. Stripe en mode test, carte de test du prestataire, commande et e-mails vérifiés. 7. Pages CGV et Mentions légales, réglage Page des conditions générales. 8. Apparence › Menus ou Éditeur › Navigation, puis contrôle en vue mobile.
A3iformations · organisme certifié Qualiopi et centre de passage TOSA · Formation WordPress · Module « Boutique en ligne et WooCommerce »