Lancer une boutique WooCommerce avec WordPress
WooCommerce gère la boutique : les produits, les commandes, les taxes et les paiements. Ce qu'il ne fait pas, c'est donner à tout cela l'apparence de votre marque. Ce guide crée les quatre écrans que voit réellement un acheteur, à l'aide des blocs de l'éditeur fourni de base avec WordPress.
Étape 1 : Installer WooCommerce
WooCommerce est une extension gratuite du répertoire des extensions WordPress, et elle reste responsable de tout ce qui relève du commerce : les données produits, les stocks, les commandes, les règles de taxes, les zones de livraison et les passerelles de paiement. Canvas ne remplace jamais cette couche, ce qui explique pourquoi vos autres extensions WooCommerce continuent de fonctionner.
Deux façons de l'installer
- Laissez l'assistant de configuration s'en charger. Choisissez une démo de boutique pendant la configuration, et l'étape des extensions installe et active WooCommerce avant le lancement de l'import, car une boutique a besoin d'une extension de boutique.
- Installez-le vous-même depuis Extensions, Ajouter, puis lancez l'assistant de démarrage de WooCommerce. Faites-le si vous ajoutez une boutique à un site que vous gérez déjà.
Dans les deux cas, parcourez une fois l'assistant de configuration de WooCommerce et répondez à ses questions sur votre pays, votre devise et ce que vous vendez. Ces réponses déterminent ensuite la TVA et l'expédition, et elles sont fastidieuses à corriger.
Configurez un service d'envoi d'e-mails avant d'accepter une vraie commande. Par défaut, les confirmations de commande quittent WordPress via votre serveur, et une boutique dont les reçus finissent dans les courriers indésirables génère des demandes d'assistance auxquelles vous ne pourrez pas répondre.
Étape 2 : Partez d'une démo de boutique ou d'un catalogue vide
Vous avez ici un choix à faire, et il mérite dix minutes de réflexion.
Importer une démo de boutique
21 des 88 démos sont des boutiques WooCommerce fonctionnelles. Importer une démo vous donne des produits, des catégories, des attributs, des pastilles de couleur, une boutique et une page produit soignées, un panier et un tunnel de commande, le tout en place et modifiable. C'est le moyen le plus rapide de voir comment les éléments s'articulent, et vous pouvez annuler l'import complet si vous changez d'avis.
Construire sur votre propre catalogue
Si vous vendez déjà des articles et avez des produits dans la base de données, choisissez le périmètre « pages uniquement » pour l'intégrer à votre site existant. Vous importez les pages de démo et les données qu'elles utilisent, sans leurs réglages, leurs menus ni leur page d'accueil, et votre catalogue reste exactement à sa place.
Dans les deux cas, les pages WooCommerce de votre site sont reprises, de sorte qu'il n'existe jamais qu'une seule boutique, un seul panier, une seule page de paiement et une seule page de compte.
Étape 3 : Ajouter vos premiers produits
Les produits sont des enregistrements WooCommerce, ajoutés sous Produits dans l'administration WordPress, et cette partie est volontairement simple. Consacrez du temps ici plutôt qu'à la mise en page, car une bonne page produit repose surtout sur de bonnes données produit.
- Une photo nette par produit, prise de la même manière pour chaque article. Une grille de catalogue paraît conçue quand les formes se correspondent, et improvisée sinon.
- Une courte description qui répond à la question réelle de l'acheteur. Taille, matière, délai de livraison, ce qui se passe en cas de mauvaise taille.
- Des catégories qui correspondent à la façon dont les clients achètent, et non à l'organisation de votre stock.
- Attributs pour tout ce qui varie. Couleur, taille, finition. Renseignez une vraie valeur de couleur pour les termes de couleur dans l'administration, car c'est elle qui transformera plus tard une liste déroulante en pastilles de couleur.
- Stock, poids et dimensions si vous expédiez des produits physiques. Les règles d'expédition les lisent.
Ajoutez trois produits avant de concevoir quoi que ce soit. Une mise en page évaluée sur un seul élément de remplissage est une mise en page que vous devrez refaire.
Étape 4 : Concevez la page de la boutique
La boutique est un catalogue, et son rôle est d'amener rapidement le visiteur vers une fiche produit. Canvas vous propose des blocs pour cela, et la réponse habituelle tient en un seul réglage du thème, avec trois choix de mise en page.
Les blocs
Une grille de produits puise dans une catégorie, une étiquette, une recherche ou une liste sélectionnée à la main. Un carrousel de produits fait de même, en ligne, pour une page d'accueil. Les cartes de catégories de produits dirigent les visiteurs vers une section. Un filtre de prix permet aux acheteurs d'affiner un long catalogue. Chacun est un bloc doté d'un panneau de réglages : le nombre de colonnes, la source et l'ordre se règlent donc à l'aide de commandes, sans code.
Le modèle sous-jacent
La boutique elle-même est un modèle de bloc que vous pouvez ouvrir dans l'Éditeur de site. Disposez-la sur toute la largeur, avec une colonne latérale gauche, une colonne latérale droite ou les deux, selon que les filtres et les catégories méritent leur place dans votre catalogue. Au total, il existe 18 modèles de boutique, couvrant la boutique, la page produit, les archives, le panier et le paiement.
Les valeurs par défaut de la boutique
Les Options du thème regroupent 39 réglages boutique répartis sur 5 onglets : le catalogue, la page produit, le panier et la commande, le mini-panier de l'en-tête et le mode catalogue. Le nombre de produits par page, la pagination, la forme de l'image produit, l'affichage des images supplémentaires de la galerie au survol et le contenu de la superposition au survol s'y règlent. Un bloc qui définit l'un de ces réglages à lui seul reste prioritaire sur la page où il se trouve.
Étape 5 : Concevoir la page produit
C'est la page qui vend, elle mérite donc mieux que la mise en page par défaut qu'utilise chaque boutique sur Internet.
Construire à partir d'éléments
Chaque élément d'une page produit est un bloc : la galerie d'images, le prix, l'évaluation par étoiles, les métadonnées, la description courte, les pastilles de variation, le bouton d'ajout au panier, les onglets, la ligne de partage et les produits associés. Déplacez-les, modifiez leur style ou retirez-en un entièrement : la page continue de fonctionner, car chaque bloc demande à WooCommerce ses propres données.
Ou partez d'une mise en page fournie
Si vous préférez ne pas partir des éléments de base, choisissez l'une des mises en page de produit unique livrées et déplacez les éléments : la mise en page par défaut, un résumé fixe qui suit la galerie pendant le défilement, une liste, une conception axée sur la couleur, une conception de boutique, deux mises en page de galerie avec liens personnalisés, et des variantes avec une colonne latérale à gauche, à droite ou deux colonnes latérales. Attribuez une mise en page à chaque produit depuis l'éditeur, ou définissez la mise en page par défaut de la boutique dans les Options du thème.
Que placer au-dessus de la ligne de flottaison
La photo, le nom, le prix, le choix de la variante et le bouton d'ajout au panier. Tout le reste, y compris la description que peu de gens lisent, peut figurer en dessous. Vérifiez cela sur un téléphone avant de décider que vous n'êtes pas d'accord.
Étape 6 : Le panier et le paiement
Ces deux écrans sont ceux où l'argent se perd, et dans la plupart des thèmes, ce sont les deux écrans que vous n'avez pas le droit de toucher. Ici, ce sont des blocs comme les autres.
Le panier
Un bloc Canvas Cart Table pour le contenu du panier, un bloc Canvas Cart Totals pour les montants, et un bloc Canvas Cross-Sells pour l'article qu'un client pourrait vraiment ajouter. Restez concis et veillez à ce que le bouton reste bien visible. L'erreur la plus courante dans un panier consiste à placer un mur de contenu promotionnel entre les totaux et le bouton de validation de commande.
Le paiement
Un bloc de facturation pour le formulaire, un bloc de récapitulatif de commande pour les articles achetés, et un bloc de notifications pour les messages qui indiquent à l'acheteur ce qui s'est passé. WooCommerce gère toujours la commande, le paiement et les e-mails ; vous décidez de la façon dont l'écran s'affiche.
Des règles qui se rentabilisent d'elles-mêmes
- Ne demandez que le minimum de champs qu’exige réellement votre livraison.
- Affichez le coût total, livraison comprise, avant l'étape de paiement.
- Indiquez quand la commande arrivera, en jours, en toutes lettres.
- Placez votre politique de retours là où un acheteur hésitant, qui découvre votre boutique, la remarquera.
Étape 7 : Pastilles, ajout au panier et styles de cartes
Trois comportements de la boutique, qui exigent habituellement chacun une extension, font partie de l'intégration.
- Échantillons de couleur pour attributs. Dans l'administration, donnez une couleur à un terme d'attribut de produit : les produits variables affichent alors des pastilles de couleur ou des boutons en forme de pilule à la place d'une liste déroulante. L'acheteur choisit alors sa variante d'un coup d'œil, ce qui compte surtout sur téléphone.
- Ajouter au panier sans recharger la page. Lorsqu'un produit est ajouté depuis une grille, un carrousel ou un aperçu superposé sur une carte, le panier se met à jour sur place : l'acheteur reste sur la page qu'il consulte, et le panier de l'en-tête continue d'afficher le nombre d'articles.
- Styles des cartes produit. Fixez chaque image du catalogue à une même forme pour que la grille soit alignée, choisissez si les images supplémentaires de la galerie apparaissent au survol ou défilent en diaporama, et décidez ce que la superposition au survol propose : acheter, aperçu rapide ou les deux.
Ce sont tous des réglages. Aucun ne nécessite d'extrait de code, de thème enfant ni d'une deuxième extension, et chacun peut être désactivé si vous préférez un comportement plus sobre.
Certains thèmes vendent cette couche à part. OceanWP propose une intégration WooCommerce gratuite et commercialise Ocean eCommerce Pro comme produit distinct, et la comparaison de Canvas avec OceanWP détaille ce qu'inclut chaque formule pour une boutique.
Étape 8 : Paiements, rapidité, puis une commande test
La mise en forme en dernier, l'argent en premier. Parcourez ces points avant d'annoncer à qui que ce soit que la boutique est ouverte.
La configuration commerciale, dans WooCommerce
- Connectez les passerelles de paiement que vous comptez utiliser et finalisez leur vérification, ce qui prend généralement plus de temps que prévu.
- Définissez les règles de taxes et les zones de livraison pour les lieux où vous expédiez réellement.
- Rédigez les pages de remboursement, de retours et de livraison, puis ajoutez-les en lien dans le pied de page et dans le tunnel de commande.
La vitesse avec Canvas
WooCommerce charge des scripts et des feuilles de style sur chaque page d'un site web, y compris celles qui ne vendent rien. Cinq réglages permettent d'annuler cela : supprimer le JavaScript de WooCommerce sur les pages qui n'affichent aucun élément de boutique, désactiver le suivi d'attribution des commandes, empêcher le script des fragments du panier d'interroger le serveur à chaque page affichant un panier, et retirer les bibliothèques de robustesse des mots de passe et de sélection en dehors des pages de compte et de paiement. Elles figurent parmi 35 optimisations, et chacune peut être annulée.
Passez ensuite une vraie commande
Achetez un article dans votre propre boutique, depuis un téléphone, en données mobiles. Payez avec une vraie carte si votre passerelle prend en charge un remboursement de test. Vérifiez que l’e-mail de confirmation arrive, contrôlez que la commande apparaît dans l’administration, puis remboursez-vous. Tout ce que vous trouvez en ces cinq minutes, un client l’aurait trouvé à votre place.
Sources
Lorsque ce guide décrit un élément extérieur à Canvas, voici les pages officielles qui le documentent.
- Installer et désinstaller WooCommercewoocommerce.com · WooCommerce est gratuit, s'installe depuis l'écran Extensions et ouvre son propre assistant de configuration
- Pages WooCommercewoocommerce.com · WooCommerce désigne une page distincte pour la boutique, le panier, la commande et le compte
- Configurer les taxes dans WooCommercewoocommerce.com · Les taux de taxe se configurent dans les réglages de WooCommerce
- Configurer les zones d'expéditionwoocommerce.com · Une zone de livraison est une zone géographique vers laquelle vous expédiez
- Suivi de l'attribution des commandeswoocommerce.com · Ce que l'attribution des commandes enregistre, et le réglage WooCommerce qui la désactive
Pour aller plus loin
Deux guides pour le reste du site autour de la boutique, et l’ensemble des fonctionnalités de la boutique.
Questions fréquentes
La FAQ complète répond au reste, et la documentation détaille chaque réglage.
Ai-je encore besoin de l'extension WooCommerce ?
Oui, une boutique Canvas repose toujours sur l'extension WooCommerce. Canvas ajoute des blocs, des modèles et des options en complément, et laisse l'extension WooCommerce en charge, de sorte que les commandes, les produits, les taxes, les livraisons et les paiements restent là où vos autres extensions s'attendent à les trouver. Si vous partez d'une démo de boutique, l'assistant de configuration installe et active WooCommerce avant le lancement de l'importation.
Les blocs de boutique nécessitent-ils un achat supplémentaire ?
Non, les blocs de boutique Canvas sont inclus dans chaque formule, sans frais supplémentaires. Tous les 24 blocs de boutique sont des blocs premium, et chaque formule comprend tous les blocs premium, ainsi que tous les 18 modèles de boutique et toutes les 21 démos de boutique. Il n'existe ni offre e-commerce ni module complémentaire boutique.
Puis-je les utiliser avec les blocs WooCommerce ?
Oui, vous pouvez les combiner librement : les blocs boutique de Canvas sont des blocs enregistrés ordinaires, ils se placent donc à côté des blocs WooCommerce et des blocs natifs, dans le même modèle et sur la même page. Remplacez un élément à la fois et laissez le reste de la mise en page tel quel.
L'import d'une démo de boutique créera-t-il deux pages de paiement ?
Non, l'importation d'une démo de boutique Canvas ne vous laisse qu'une seule page de paiement. L'importateur repère les pages Boutique, Panier, Paiement et Compte présentes sur votre site, pointe vers elles les menus et liens de la démo, de sorte que vous n'en conservez qu'un exemplaire de chaque. Vos produits et commandes existants ne sont pas modifiés, et l'ensemble de l'importation peut être annulé.
Créez votre prochain site web avec Canvas
Débutant, freelance ou agence, vous obtenez les mêmes blocs et les mêmes démos. Commencez avec un seul site et créez-en autant que nécessaire avec la même licence.