31. WooCommerce Builder : vendre en ligne avec Elementor

Un site vitrine peut, un jour, avoir envie de vendre quelques objets. Ce chapitre décrit honnêtement ce qu’une boutique implique, ce qu’Elementor Pro sait dessiner avec WooCommerce, et comment la Menuiserie Roche peut proposer trois produits sans transformer son site en supermarché. Il est court à dessein : il vient en fin de Partie VI parce que la vente en ligne est une décision d’entreprise avant d’être une question d’outil.

31.1 — Ce qu’implique vraiment une boutique

Techniquement, une boutique WordPress repose sur WooCommerce, une extension gratuite qui ajoute les produits, le panier, la commande, les comptes clients et les moyens de paiement. Elementor n’y touche pas : WooCommerce gère les commandes, Elementor gère l’apparence. Le WooCommerce Builder est la partie d’Elementor Pro, réservée aux plans Advanced et supérieurs, qui permet de dessiner les pages de produit, la liste des produits, le panier et la commande avec les mêmes gestes que le reste du site.

La technique est pourtant la plus petite partie du sujet. Ouvrir une boutique, c’est aussi choisir un moyen de paiement (une passerelle comme Stripe ou PayPal, citées en exemple, prélève une commission sur chaque vente), régler la TVA selon son régime et le lieu de livraison, organiser la livraison (emballage, transporteur, tarifs par zone, colis abîmés), rédiger des conditions générales de vente, gérer les retours et le service client, tenir un stock et facturer. Chacune de ces lignes est du temps hebdomadaire. Pour une menuiserie de trois personnes dont le cœur de métier est le sur-mesure, la question honnête n’est pas « peut-on vendre en ligne ? » mais « combien d’objets vendus par mois justifient tout cela ? ».

31.2 — Les briques : widgets produit et widgets de pages

Une fois WooCommerce installé et un premier produit créé dans Produits › Ajouter, le panneau d’Elementor gagne une catégorie WooCommerce. Ses widgets se répartissent en deux familles : ceux qui affichent une information du produit en cours (ils n’ont de sens que dans le modèle Produit), et ceux qui construisent les pages de la boutique. Le tableau les résume, avec le nom anglais et une traduction prudente : la traduction française de Pro n’est pas confirmée pour ces libellés.

Les balises dynamiques du chapitre 26 ont aussi leur groupe WooCommerce : prix, note, promotion, description courte, référence, stock, termes et titre du produit peuvent alimenter un Titre ou un Paragraphe atomique dans un modèle. C’est ainsi que l’on garde, dans une fiche produit, la typographie et les classes du reste du site.

31.3 — Les modèles Produit et Archive de produits

Comme pour les articles (chapitre 25), on ne dessine pas chaque fiche produit une à une : on crée un modèle Produit (Single Product) dans le Constructeur de thème, qui s’applique à tous les produits grâce aux widgets et balises dynamiques, et un modèle Archive de produits (Products Archive) pour la page Boutique et les catégories.

1. Créez le modèle Produit. Ouvrez Elementor › Constructeur de thème (Ctrl+Shift+E ; Cmd sur Mac), partie Produit, puis Ajouter. Nommez-le « Fiche produit ». La bibliothèque propose des modèles ; partez d’un modèle vide pour rester dans votre charte.
2. Construisez la mise en page. Un Flexbox en ligne, largeur de contenu 1140 px : à gauche, Images du produit ; à droite, un Flexbox en colonne avec Titre du produit (H1), Prix du produit, Description courte, Ajouter au panier, Méta du produit. En dessous, Onglets de données puis Produits liés.
3. Choisissez un produit d’aperçu. Dans les Réglages du modèle (roue dentée), section d’aperçu, désignez un produit existant pour voir le rendu réel pendant que vous stylez.
4. Publiez avec une condition. Au clic sur Publier, ajoutez la condition Inclure › Produits (Products), qui vise tous les produits ; les cibles WooCommerce permettent aussi « Dans la catégorie », « Étiquette de produit » ou un produit précis pour un modèle spécifique. Enregistrez et fermez.
5. Créez l’Archive de produits. Même chemin, partie Archive de produits : un Titre d’archive, un widget Produits (ou un Loop Grid avec un Loop Item de type Produit et la source « Requête actuelle », chapitre 27), une pagination. Condition : Inclure › Toutes les archives de produits (All Product Archives), ou seulement Page Boutique (Shop Page).
6. Ajoutez le panier à l’en-tête (chapitre 24) avec le widget Menu panier, puis dessinez les pages Panier et Commande avec leurs widgets, en gardant la mise en page la plus sobre possible : c’est là que le client paie, rien ne doit le distraire.

31.4 — Menuiserie Roche : trois objets, pas une boutique

Camille Roche ne veut pas d’une boutique : elle veut proposer, à l’approche des fêtes, une planche à découper en noyer, une petite étagère et un bon cadeau pour un atelier d’initiation. Trois produits, une centaine de ventes par an au mieux. Deux voies sont possibles, et la seconde est souvent la bonne.

La voie 2 a une limite : elle ne gère ni les variations, ni les stocks, ni les frais de livraison automatiques. Elle convient tant que la commande reste rare et que l’artisan répond à la main. Le jour où les commandes dépassent quelques-unes par semaine, on passe à la voie 1, et les pages construites en atomique se réutilisent : la fiche produit reprend les mêmes classes, le même bandeau, la même carte.

31.5 — Les obligations minimales

Vendre à distance à des consommateurs déclenche des obligations précises du Code de la consommation, quelle que soit la voie choisie et même pour trois produits. Le chapitre 35 traite des mentions légales et de la confidentialité ; voici ce qui s’ajoute pour la vente.

• Prix toutes taxes comprises, avec les frais de livraison indiqués avant la commande, et non découverts à la dernière étape.
• Information avant la commande : caractéristiques essentielles du produit, prix, délai et modalités de livraison, identité et coordonnées du vendeur, modalités de paiement, garanties légales.
• Le bouton de commande doit dire sans ambiguïté que la commande oblige à payer (« Commander et payer ») ; WooCommerce s’en charge sur sa page de commande, un formulaire maison doit le faire lui-même.
• Confirmation écrite de la commande, par e-mail, reprenant le contenu du contrat et les conditions générales de vente.
• Conditions générales de vente accessibles avant la commande, acceptées par une case non pré-cochée (chapitre 28), et conservées.
• Droit de rétractation de 14 jours pour le consommateur, avec formulaire type à disposition, sauf exceptions prévues par la loi : les biens fabriqués selon les spécifications du client ou nettement personnalisés en font partie, ce qui couvre un escalier sur mesure, mais pas une planche de série.
• Garanties légales (conformité et vices cachés) mentionnées, et facture émise pour chaque vente.
• Bon cadeau : indiquer sa durée de validité, ce qu’il couvre et comment l’utiliser ; un bon sans conditions écrites est une source de litige.