4.3WooCommerce Builder : boutique & fiche produit
L'essentiel en 30 secondes
- WooCommerce est l'extension e-commerce de référence pour WordPress (le moteur de la boutique).
- Le WooCommerce Builder (Pro) conçoit visuellement les pages de boutique et de fiche produit.
- Le parcours d'achat (boutique → produit → panier → paiement) doit être clair et fluide.
Mini-cas filé — Nadia ouvre une boutique
Le menuisier veut vendre quelques produits en ligne (petits meubles, accessoires). Nadia installe WooCommerce (le moteur e-commerce), puis utilise le WooCommerce Builder de Pro pour soigner la page boutique (grille de produits) et la fiche produit (images, prix, bouton « Ajouter au panier »). Elle veille à un parcours d'achat sans friction.
Suite de 4.2 — du contenu au commerce.
1. WooCommerce et le Builder
WooCommerce est l'extension e-commerce de référence pour WordPress (gratuite) : c'est le moteur de la boutique (produits, panier, commandes, paiement). Le WooCommerce Builder d'Elementor Pro permet de concevoir visuellement les pages de la boutique : la page produit (single product) et les pages de liste (boutique, catégories), souvent via le Loop Builder (4.2).
Nadia personnalise la fiche produit (galerie d'images, titre, prix, description, bouton « Ajouter au panier ») et la grille de la boutique, à l'identité du menuisier.
2. Le parcours d'achat
L'enjeu : un parcours d'achat clair — de la boutique au produit, au panier, au paiement (checkout). Chaque étape doit être lisible et sans friction : prix visible, bouton d'ajout évident, panier et paiement rassurants.
Nadia garde le parcours simple : peu d'étapes, informations claires (livraison, paiement), et teste un achat de bout en bout avant de livrer.
🔎 Exemple concret — Boutique du menuisier (cas Nadia)
WooCommerce installé (moteur : produits, panier, paiement).
WooCommerce Builder :
- Fiche produit : galerie + titre + prix + « Ajouter au panier ».
- Boutique : grille de produits (Loop) à l'identité du site.
Parcours testé : boutique → produit → panier → paiement.Résultat : une boutique soignée et cohérente.
Leçon : parcours clair, testé de bout en bout.
Vocabulaire de la section
- WooCommerce
- L'extension e-commerce de référence pour WordPress : le moteur de la boutique.
Exemple simple : gère produits, panier, commandes, paiement.
Ce que ce n'est pas : croire qu'Elementor fait le commerce tout seul.
Réflexe : WooCommerce = moteur e-commerce ; Elementor = design.
- WooCommerce Builder (Pro)
- L'outil d'Elementor Pro pour concevoir visuellement les pages de boutique et de produit.
Exemple simple : personnaliser la fiche produit.
Ce que ce n'est pas : le confondre avec WooCommerce (le moteur).
Réflexe : designer les pages e-commerce → WooCommerce Builder.
- Page produit (single)
- Le modèle d'une fiche produit (images, titre, prix, description, bouton d'ajout).
Exemple simple : fiche d'un petit meuble avec galerie et prix.
Ce que ce n'est pas : une fiche produit confuse, prix caché.
Réflexe : prix visible + bouton d'ajout évident.
- Boutique / catégories
- Les pages qui listent les produits (grilles), souvent via le Loop Builder.
Exemple simple : grille de produits de la boutique.
Ce que ce n'est pas : une liste de produits brute, non soignée.
Réflexe : liste de produits → Loop Builder.
- Parcours d'achat
- De la boutique au produit, au panier, au paiement : clair et sans friction.
Exemple simple : peu d'étapes, infos claires, paiement rassurant.
Ce que ce n'est pas : un tunnel d'achat confus qui fait abandonner.
Réflexe : tester l'achat de bout en bout avant de livrer.
En pratique — Personnaliser une boutique
- Installez WooCommerce (le moteur e-commerce) et ajoutez un produit de test.
- Avec le WooCommerce Builder, concevez la fiche produit (galerie, prix, bouton d'ajout).
- Concevez la page boutique en grille (Loop) à l'identité du site.
- Testez le parcours complet : boutique → produit → panier → paiement.
Script prêt à dire — présenter la boutique au client (20 s)
« Votre boutique en ligne est prête : une grille claire de vos produits, une fiche détaillée avec photos, prix et bouton d'achat, puis un panier et un paiement rassurants. J'ai testé un achat de bout en bout pour m'assurer que vos clients puissent commander sans aucune difficulté. »
Insister sur le parcours testé de bout en bout.
Modèle copier-coller — check boutique
WOOCOMMERCE INSTALLÉ (moteur) : oui / non
FICHE PRODUIT : galerie ___ prix visible ___ bouton d'ajout ___
BOUTIQUE : grille produits (Loop) à l'identité : oui / non
PARCOURS TESTÉ (boutique→produit→panier→paiement) : oui / non
INFOS CLÉS (livraison, paiement) claires : oui / nonPetite boutique
Quelques produits : fiche soignée, parcours ultra-simple.
Catégories
Plusieurs familles de produits : grilles par catégorie (Loop).
Mobile
Achat testé sur mobile : bouton d'ajout et paiement faciles au doigt.
Confiance
Afficher clairement livraison, délais et moyens de paiement.
✓ Bonnes pratiques
- Distinguer WooCommerce (moteur) et le Builder (design).
- Rendre le prix et le bouton d'ajout évidents.
- Tester l'achat de bout en bout, aussi sur mobile.
✗ Pièges fréquents
- Confondre WooCommerce et le WooCommerce Builder.
- Un parcours d'achat confus (abandon).
- Livrer sans tester un vrai achat.
Points clés à retenir
- WooCommerce = moteur e-commerce (gratuit).
- WooCommerce Builder (Pro) = design des pages.
- Fiche produit claire (galerie, prix, ajout).
- Parcours d'achat simple, testé de bout en bout.
Défi 48h — appliquez demain
Installez WooCommerce, ajoutez un produit de test, concevez une fiche produit avec le Builder, puis testez le parcours boutique → produit → panier → paiement, y compris sur mobile. 30 minutes.
- Je distingue WooCommerce et le Builder.
- Je conçois une fiche produit claire.
- Je teste le parcours d'achat complet.
Questions fréquentes
WooCommerce est-il payant ?
Non : WooCommerce est une extension gratuite (le moteur e-commerce). Le WooCommerce Builder, qui sert à designer les pages, fait partie d'Elementor Pro.
Que peut-on personnaliser ?
La fiche produit (galerie, titre, prix, description, bouton d'ajout) et les pages de liste (boutique, catégories), à l'identité du site, souvent via le Loop Builder.
Faut-il tester l'achat ?
Oui, impérativement : testez le parcours complet (boutique → produit → panier → paiement), y compris sur mobile, avant de livrer. Un tunnel confus fait abandonner.
Nadia veut designer la fiche produit du menuisier. Quel est le bon cadre mental ?