Vos premiers pas avec WooCommerce : LE tutoriel

ninja

Tout comme WordPress en son temps, la solution de vente en ligne WooCommerce connaît une croissance continue et mérite vraiment qu’on s’y attarde. Je vous invite à me suivre pour découvrir cette plateforme pas comme les autres.

En Octobre 2014, WooCommerce représentait en effet plus de 5% des parts de marché des solutions e-commerce en France (source), ce qui le place en cinquième position des outils utilisés et justifie donc de le faire figurer dans les études s’il s’agit de choisir un produit pour ouvrir une boutique.

logo WooCommerce

Nous allons commencer notre découverte par installer et configurer une boutique avec quelques produits histoire de voir ce qui se passe sous le capot, ensuite nous pourrons faire le tour du front office.

separateur

Installez WooCommerce

Ne perdons pas de temps en blabla, la mise en place de notre boutique va être relativement longue. Passons donc directement au vif du sujet et installons notre plateforme, qui se présente en fait sous la forme … d’une extension pour WordPress. Il faut donc commencer par avoir une installation propre de WordPress sous le coude. Si vous n’en n’avez pas, voici le lien de téléchargement de la version française. Ensuite rendez-vous sur votre inerface d’administration, rubrique Extensions → Ajouter, recherchez “WooCommerce” et installez le plugin. Si pour une raison ou une autre vous ne pouvez pas réaliser l’installation à partir du backoffice de WordPress, vous pouvez récupérer la dernière version de l’outil e-commerce sur  la page d’accueil de WooCommerce, il vous suffira alors de décompresser l’archive dans le dossier wp-content/plugins de votre serveur. Activez ensuite l’extension et lancez l’installation des pages spécifiques au module en cliquant sur le bouton “Install WooCommerce Pages”. Une fois cette étape terminée vous serez redirigé(e) vers la page d’accueil de l’administration de la plateforme et vous pourrez commencer son paramétrage.

Activer l'extension WooCommerce

Activer l’extension WooCommerce

Une fois WooCommerce traduit en français grâce à un clic sur le bouton correspondant, vous pouvez passer à la personnalisation de votre boutique :

 Paramétrez WooCommerce

Je préfère vous prévenir dès à présent, cette rubrique est assez longue, si vous avez déjà une vague connaissance de cet outil vous pouvez donc passer au chapitre suivant. Si vous faites réellement vos premiers pas en e-commerce, prenez le temps de bien la lire et configurez votre propre boutique au fur et à mesure afin de bien comprendre toutes les options présentées.

Onglet Général

Commencez par déterminer le pays dans lequel se situe votre siège social grâce à la liste Emplacement de base, ainsi que la liste des pays dans lesquels vous vendez vos produits en renseignant le champ Emplacement(s) de vente.

Vous pouvez choisir d’afficher un texte d’avertissement à vos internautes en cochant la case Notice boutique et en remplissant le champ Texte de notice de la boutique qui s’affiche alors.

Laissez l’API REST activée, ça ne mange pas de pain.

Maintenant passons aux préférences de devise, vous pouvez déterminer la façon dont seront affichés vos prix grâce aux options Devise, Position Devise, Séparateur de milliers, Séparateur décimal et Nombre de décimales. Attention à respecter la législation en vigueur dans votre pays, notamment en ce qui concerne les séparateurs de milliers et décimal, il ne s’agit pas toujours d’une simple habitude culturelle.

Paramétrage de WooCommerce - options generales

Paramétrage de WooCommerce – options generales

 

Onglet Produits

Section Général

La priorité est de déterminer quelles sont les unités de mesure que vous allez utiliser, eh oui le monde est vaste et les gens différents. Renseignez donc les Unité de poids et Unité des dimensions selon vos préférences.

Passez ensuite à vos préférences quant aux avis. Si vous pensez qu’il est pertinent de laisser vos clients noter vos produits, je vous conseille de cocher les 4 cases de cette rubrique, pour minimiser au maximum (vous avez suivi là ?) les avis fantaisistes. Sinon, décochez simplement la case Activer les notes sur les avis (qui devrait s’appeler activer les notes ET les avis) et les autres options disparaîtront.

Paramétrage de WooCommerce - Options produit - section général

Paramétrage de WooCommerce – Options produit – section général

Section Affichage

Si vous n’avez pas créé une page d’accueil spécifique pour votre boutique, laissez WooCommerce s’en occuper et ne modifiez pas la valeur de la liste Page boutique. Par contre vous pouvez choisir la façon dont vos pages vont s’afficher grâce aux champs Affichage Page Boutique, Affichage par défaut de la catégorie, et Tri par défaut des produits. Pour ces options tout dépend de vous, je vous conseille de tester différentes options et de visualiser sur votre boutique le résultat pour choisir ce qui vous plaît le plus.

De la même façon vous êtes totalement libre de Rediriger vers le panier après un ajout réussi ou non (même si une grande majorité des sites de vente en ligne le font et que je ne vois pas pourquoi pas vous…). Par contre je vous conseille de laisser la case Activer les boutons AJAX d’ajout au panier sur les archives cochée, l’expérience utilisateur n’en sera que meilleure.

Viennent ensuite les tailles d’images produit, que vous devrez éventuellement ajuster en fonction du thème que vous aurez choisi.

Enfin, la lightbox de WooCommerce, c’est à dire la fenêtre de zoom, est assez efficace. Si vous n’avez pas mieux sous la main, ne modifiez pas cette option.

Paramétrage de WooCommerce - Options produit - section affichage

Paramétrage de WooCommerce – Options produit – section affichage

Section Inventaire

Ca fonctionne plutôt bien donc pourquoi ne pas Activer la gestion du stock ? Par défaut WooCommerce va garder hors stock un article ajouté à un panier non validé pendant 60 minutes avant de le réaffecter au stock, vous pouvez choisir de modifier cette durée ou de complètement désactiver cette fonctionnalité.

WooCommerce peut vous avertir en cas de stock faible ou épuisé, cochez ces cases et définissez des seuils correspondant à votre gestion des stocks ainsi que l’adresse email à laquelle envoyer ces alertes.

Si un produit passe hors stock, vous pouvez choisir de cacher les produits en stock épuisé du catalogue, ce qui peut être un bon choix (le débat est ouvert…). Enfin, pour le format d’affichage du stock, c’est vous qui voyez.

Paramétrage de WooCommerce - Options produit - onglet inventaire

Paramétrage de WooCommerce – Options produit – section inventaire

Section Produits téléchargeables

Je n’ai jamais mis en place de boutique proposant ce type de produits donc je ne suis pas un expert à ce sujet, néanmoins il me semble indispensable de cocher la case Les téléchargements nécessitent d’être identifié, ne serait-ce que pour vous constituer une base de données. Les autres options par défaut me semblent normales.

Paramétrage de WooCommerce - Options produits - section produits téléchargeables

Paramétrage de WooCommerce – Options produit – section produits téléchargeables

 

Onglet TVA

Section Options TVA

C’est là qu’il faut commencer à s’accrocher : pour beaucoup vous aurez à cocher la case Activer la TVA et le calcul de TVA (autoentrepreneurs vous ne mesurez pas votre chance !) et vous devrez donc spécifier si vous préférez saisir vos tarifs en hors taxe ou en TTC, en définissant l’option Tarifs entrés avec TVA.

Vous devrez aussi choisir si le calcul de TVA se base sur l’adresse du client (livraison ou facturation) ou sur l’adresse de votre boutique, si vous vendez uniquement dans le pays de votre siège social vous pouvez choisir n’importe quelle option, puisqu’elles auront toutes le même résultat.

La détermination de l’adresse client par défaut est à mes yeux un gros risque (par rapport à nos amis malhonnêtes qui ne sévissent pas que sur les sites de petites annonces entre particuliers), je vous conseille donc de choisir aucune adresse. Si vous souhaitez tenter le coup, la géolocalisation par MaxMind est très efficace.

La classe de TVA livraison devrait toujours se baser sur les articles, sauf si vous êtes absolument certain(e) que TOUS vos produits utiliseront TOUJOURS le même taux de TVA.

Il n’est pas nécessaire d’afficher la TVA pour chaque ligne du panier, vous pouvez donc cocher la case Arrondir la TVA au niveau du sous-totaux, plutôt que pour chaque ligne.

Dans la plupart des cas, vous n’aurez pas à autoriser de classes additionnelles des TVA, vous pouvez donc laisser ce champ vide.

Selon que votre boutique soit plutôt B2B ou B2C, vous pouvez choisir d’afficher vos tarifs en hors taxe ou TTC dans la boutique, dans le panier et dans le récapitulatif de commande. Pour clarifier l’affichage pour vos internautes, vous pouvez renseigner le Price Display Suffix, par exemple avec la mention TTC.

Enfin, je pense que la grande majorité d’entre vous affichera le total des taxes comme un total unique plutôt qu’une liste détaillée.

Paramétrage de WooCommerce - Options TVA

Paramétrage de WooCommerce – Options TVA

Section Taux standards

Dans cet écran, vous devez définir les taux de TVA utilisés sur votre boutique. Ici j’ai défini un taux à 20% qui s’applique à toutes les villes de tous les pays.

 

Paramétrage de WooCommerce - Options TVA - section taux standards

Paramétrage de WooCommerce – Options TVA – section taux standards

 

Onglet Commande

Section Options commande

Vous pouvez choisir d’activer ou non les codes promo, ainsi que les commandes invités. Ces deux options sont des choix stratégiques, je ne donnerai pas mon avis ici, mais si vous me donnez le votre dans les commentaires, j’en discuterai avec plaisir.

Vous pouvez aussi force la commande sécurisée si vous possédez un certificat SSL. Etant donné la pression que Google met pour faire passer un maximum de sites en https, ça peut valoir le coup si votre boutique génère suffisamment de chiffre d’affaire pour compenser le coût du certificat SSL

Ensuite, vous devrez indiquer quelles sont les pages de votre boutique qui correspondent au panier et à la commande, pas de problème WooCommerce les a créées pour vous. Par contre, ça sera à vous de rédiger la page Conditions générales de vente, et vous devrez la sélectionner dans la liste correspondante.

Passons rapidement sur les paramètres de commande, qui correspondent à des paramètres qui sont ajoutés à vos url pour indiquer à WordPress à quelle étape du traitement de la commande il se trouve. Il n’y a pas vraiment de raison de modifier ces paramètres (peut-être une optimisation SEO mais quand vous en serez là vous aurez largement dépassé le niveau de ce tutoriel) alors je vous invite à ne rien modifier.

Enfin, cette page vous présente la liste des modes de paiement disponibles, appelés ici passerelles de paiement. Dans la capture ci-dessous vous pouvez constater que les modes virement bancaire, paiement par chèque et paypal sont activés, mais pas le paiement à la livraison. En face de chaque passerelle se trouve un bouton qui vous permet de la configurer et de l’activer ou la désactiver. Nous n’allons pas entrer dans le détail de la configuration de ces passerelles ici, c’est assez simple si vous avez les informations nécessaires et c’est surtout très spécifique. Sachez seulement que vous pouvez ajouter des modes de paiement assez facilement, vous trouverez par exemple un tutoriel vidéo pour ajouter la passerelle CM/CIC ici.

Enregistrez vos changements et passons à la suite.

Paramétrage de WooCommerce - Options commande

Paramétrage de WooCommerce – Options commande

Onglet Livraison

Ca n’est pas vraiment le point fort de la plateforme mais on va quand même pouvoir faire quelque chose quand même : paramétrons par exemple des frais de port fixes à 6,90€ offerts à partir de 100€ de commande.

Section Options livraison

Pour commencer vous allez Activer la livraison et Activer le calculateur de frais dans la page panier, il n’y a pas de raison de masquer quoi que ce soit, la transparence étant le maître mot de toute bonne boutique en ligne.

Choisissez ensuite le mode d’affichage de la livraison que vous préférez, personnellement je préfère les boutons radio.

Pour ce qui est de la destination de la livraison, c’est encore à vous de choisir mais sachez que si vous autorisez vos clients à renseigner des adresses différentes pour la livraison et la facturation, votre choix par défaut ne sera pas imposé mais seulement pré sélectionné dans le processus de commande.

Enfin, comme vous avez correctement paramétré les options générales de votre e-commerce, vous pouvez livrer dans tous les pays où vous vendez.

Pour ce qui est des modes d’expédition, tout ce que vous avez à faire est de cocher Automatique. J’ai choisi dans la capture d’écran de faire glisser Livraison locale tout en haut de la liste, et Livraison Gratuite en dessous simplement parce que je suis un peu maniaque. Revenons un instant sur le mode Automatique que vous venez de sélectionner. Vous allez définir une livraison “locale” à 6,90€ dans tous les cas et une livraison gratuite à partir de 100€ de commande. Si la commande n’atteint pas 100€ vos clients ne pourront pas sélectionner la livraison gratuite, mais si elle dépasse ce montant, WooCommerce va sélectionner par défaut le mode de livraison le plus économique pour vos clients, donc la livraison gratuite.

Paramétrage de WooCommerce - Options livraison

Paramétrage de WooCommerce – Options livraison

Section Livraison locale

Commencez en toute logique par activer la livraison locale et lui donner un nom plus générique, comme par exemple Livraison standard. Vous pouvez aussi utiliser le nom de votre transporteur : Livraison XYZ.

Nous avons décidé que le type de frais serait un Montant fixe d’un montant (Frais de livraison) de 6,90€, ce sont donc ces valeurs que vous devrez indiquer.

Pour ce qui est des codes postaux, si vous livrez uniquement en France vous pouvez utiliser la chaine “_____” (5 underscores) qui s’assurera que le code postal saisi a exactement 5 chiffres.

Enfin, rendez ce mode de livraison disponible pour tous les pays autorisés. Vous pouvez aussi choisir de rendre la livraison locale disponible à 6,90€ pour vos clients locaux et autoriser la livraison internationale pour 26,90€ pour les autres en saisissant un ou des pays spécifiques dans le champ Méthode de disponibilité.

Paramétrage de WooCommerce - Options livraison locale

Paramétrage de WooCommerce – Options livraison locale

 Section Livraison Gratuite

Vous n’avez presque pas besoin de moi pour mettre en place ce mode de livraison, il suffit d’Activer la livraison gratuite, de définir le Titre de la méthode, de la rendre disponible où vous voulez (dans notre cas dans Tous les pays autorisés).

La petite subtilité, c’est que la livraison gratuite requiert … un montant minimum de commande que vous devez aussi définir. Si vous ne sélectionnez pas cette option la livraison gratuite s’appliquera par défaut à toutes les commandes.

Paramétrage de WooCommerce - Options livraison gratuite

Paramétrage de WooCommerce – Options livraison gratuite

Vous pouvez désactiver tous les autres modes de livraison et le tour est joué !

Il existe un plugin gratuit qui permet de paramétrer bien plus finement les frais de port, en fonction du pays de livraison et du poids des produits à expédier, vous pouvez le retrouver sur cette page. Même s’il date un peu il a l’air toujours fonctionnel.

Onglet Comptes

Ca commence à être long ? Rassurez-vous c’est quasiment fini – et pensez à votre rédacteur préféré, qui aura passé bien plus de temps à taper que vous à lire 😉 -.

La configuration des pages “compte” de WooCommerce est quasiment parfaite par défaut : la page mon compte est créée par le plugin et les paramètres ajoutés aux urls n’ont pas besoin d’être changés.

Il n’y a que la case Activer l’inscription depuis la page “Mon compte” qui mérite d’être cochée, si ça peut vous faire gagner quelques ventes, pourquoi pas ? Les autres options par défaut n’ont pas besoin d’être changées.

Paramétrage de WooCommerce - Options comptes

Paramétrage de WooCommerce – Options comptes

 

Onglet Emails

Je vous invite à ne rien modifier dans cette section, si ce n’est peut-être le “From” Nom et l’adresse “From” Adresse email qui sont utilisés pour représenter l’expéditeur (c’est à dire vous) de vos emails. Dans chaque section vous pouvez activer ou désactiver les notifications.

WooCommerce a beau être une plateforme très accessible, la modification des templates d’emails nécessite un minimum de connaissance et je considère qu’il n’est pas pertinent de l’aborder dans ce tutoriel destiné à la découverte et à la compréhension du produit, aussi vous pouvez vous promener dans le écrans mais ne modifiez que ce dont vous être sûr(e)s.

Paramètrage de WooCommerce - Onglet emails

Paramètrage de WooCommerce – Onglet emails

Onglet Crochets Web

Je n’aborderai non plus pas les “crochets” (que vous trouverez plus souvent sous l’appelation “hook”) ici, ils servent aux développeurs pour intégrer leurs propres plugins à un système sans modifier le coeur de WooCommerce. Si vous voulez tout savoir à ce sujet, vous pouvez jeter un oeil à leur documentation officielle.

Nos avons donc terminé le paramétrage de notre boutique, allons faire un tour sur le site… Qu’en pensez-vous ? Hormis la couleur du thème qui a été modifiée, il est pour l’heure impossible de dire qu’il s’agit d’un site marchand et pas d’un blog comme un autre.

woocommerce vide

Il est impossible de distinguer une boutique WooCommerce vide d’un site sous WordPress classique

separateur

Gérez votre catalogue de produits

Pour faire simple je vous propose de vendre 4 produits différents : des triangles rectangles, des triangles équilatéraux, des carrés et des rectangles, répartis en deux catégories : les triangles et les quadrilatères.

Créez vos catégories de produits

Rendez-vous dans la section Produits→Catégories de votre interface d’administration et commencez tout de suite à renseigner les informations de votre première catégorie, comme une catégorie d’articles WordPress classique. Si vous n’avez jamais utilisé WordPress non plus ne vous inquiétez pas c’est bien plus simple que le paramétrage que vous venez d’effectuer. Voici le détail des champs à renseigner :

  • Nom : il s’agit du nom de la catégorie présenté à l’internaute, saisissez Triangles;
  • Identifiant : il s’agit d’un nom “normalisé”, utilisé notamment dans les urls, aussi n’utilisez que des minuscules non accentuées, des chiffres et des tirets. Soyez brefs, vous préférerez ainsi le slug “triangles” à la version suroptimisée pour le seo “vente-de-triangles-pas-chers” que certains “experts” SEO pourraient vous conseiller;
  • Parent : Vous pouvez imbriquer les catégories si votre catalogue est complexe. Ce n’est pas le cas ici mais la question peut se poser assez rapidement, aussi sachez que c’est ici que ça se passe. Pour l’heure, sélectionnez Aucun;
  • Description : Saisissez une rapide description de votre catégorie, essayez de donner envie à vos visiteurs de parcourir votre boutique;
  • Type d’affichage : Vous pouvez forcer la page de votre catégorie à n’afficher que les sous-catégories ou que les produits, ou bien les 2. Comme vous avez déjà défini ce choix un peu plus tôt, vous pouvez laisser la Valeur par défaut;
  • Vignette : Mettez en ligne une belle image pour donner envie de parcourir votre catégorie;

Validez votre saisie et faites la même chose pour les quadrilatères. Il n’y a plus qu’à passer aux produits

WooCommerce : liste des catégories de produits

WooCommerce : liste des catégories de produits

Ajoutez vos premiers produits

Dans le menu de l’interface d’administration, cliquez sur Produits→Ajouter produit. Commencez par cliquer sur le bouton Options de l’écran tout en haut à droite de la fenêtre, juste sous la barre noire, pour décocher la case Champs personnalisés : ils ne nous servent à rien dans une configuration standard et cela évitera les erreurs.

Saisissez ensuite les informations sur votre produit, si vous le voulez bien nous saisirons ensemble la fiche du carré.

Tout en haut du formulaire indiquez le nom du produit, puis sa description longue dans la zone de texte en dessous. Laissez de côté les données produit, nous y revenons dans quelques secondes. Passez à la saisie de la description courte de votre carré, sélectionnez la catégorie qui convient dans la colonne de droite, ainsi qu’une image à la une, et une galerie de photos. Dans le cadre Publier en haut à droite, cliquez sur le bouton Publier.

woocommerce - ajouter un produit

Formulaire d’ajout d’un produit à WooCommerce

Je fais une petite parenthèse à propos des permaliens avant de continuer : vous pouvez voir sur la capture d’écran ci-dessus que le lien qui s’affiche sous le titre de l’article est peut-être différent de ce que vous avez sur votre site à vous. Vous pouvez modifier le comportement de votre site pour utiliser une url plus explicite que celle par défaut en suivant ce tutoriel.

Passons comme promis aux données produit :

Onglet général

  • Le code UGS (pour unité de gestion de stock) est un identifiant unique de votre produit, si vous connaissez son code EAN13, je vous conseille de l’utiliser ici;
  • Le prix de vente, c’est vous qui le fixez. Si vous n’avez aucune expérience dans la vente en ligne, sachez que j’aborde ce sujet dans cet article. Selon le paramétrage que vous avez choisi précédemment, vous devez saisir ce prix en hors taxe ou en TTC;
  • Vous pouvez fixer un prix promo, par exemple pour le lancement du produit, vous pouvez même définir une période de promotion pendant laquelle ce tarif sera appliqué;
  • Selon votre situation par rapport à la TVA, vous devez configurer les champs Etat de la TVA et Classe TVA.
woocommerce - donnees produit - general

WooCommerce – Données produit – Onglet Général

Onglet Inventaire

  • Je vous conseille d’activer la gestion de stock au niveau produit pour avoir un suivi en temps réel de tout votre stock;
  • Saisissez le nombre d’exemplaires du produit que vous avez en stock pour débuter dans la case Qté Stock;
  • Selon votre façon de gérer vos stocks vous êtes libres d’autoriser ou non les commandes de produits en rupture de stock;
  • Enfin, s’il semble logique qu’un produit soit saisi en stock, il arrive souvent qu’on saisisse les fiches produit avant de recevoir les articles et l’état du stock devra donc refléter cette réalité, même si la quantité est supérieure à 0;
  • Le champ Vendu séparément est mis à part car rarement utilisé. Il sert à interdire de commander plus d’un exemplaire du produit par commande.
woocommerce - donnees produit - inventaire

WooCommerce – Données produit – Onglet Inventaire

Onglet Livraison

Comme vous avez défini un montant de livraison unique,  cet onglet n’est pas indispensable, néanmoins vous pouvez indiquer les caractéristiques de votre produit ici, si vous utilisez un plugin dédié elles vous aideront à calculer vos frais de port au plus juste.

  • Poids : le poids en kg de votre article peut être utilisé pour calculer le poids total d’une commande
  • Dimensions : certains marchands utilisent ces données pour la gestion de leur stock, pour optimiser la façon de stocker les produits
  • Classe de livraison : vous ne l’utilisez pas non plus si vous avez suivi à la lettre le chapitre précédent mais il est possible de définir des “classes”, à savoir des catégories comme “petit”, “encombrant”, “lourd”… et d’affiner un peu vos frais de livraison en fonction de ces classes
woocommerce - donnees produit - livraison

WooCommerce – Données produit – Onglet Livraison

Onglet produits liés

Avant de passer aux ventes croisées, je vais remplir les fiches des produits “rectangle” et “triangle rectangle” qui vont nous servir ici.

  • Montée en gamme : considérons que le rectangle est un produit de gamme similaire au carré, commencez donc à taper le mot “rectangle” dans ce champ et sélectionnez ce produit. Notez que vous pouvez ajouter plusieurs produits ;
  • Ventes croisées : il s’agit de produits que l’on propose aux internautes dans l’espoir qu’ils les achèteront aussi. De la même façon que pour le rectangle, ajoutez un triangle ici;
  • Grouper : cette option vous permet de créer des packs de produits
woocommerce - options produit - produits liés

WooCommerce – Données produit – Onglet Produits liés

Onglet attributs

Cet onglet va vous permettre de dresser la liste des caractéristiques techniques de vos produits, par exemple la longueur de côté de votre carré.

woocommerce - donnees produit - attributs

WooCommerce – Données produit – Onglet Attributs

Onglet Avancé

Il ne reste plus que quelques options que vous pouvez paramétrer :

  • Note d’achat : Il s’agit d’un message que vous pouvez adresser après commande à ceux qui achètent ce produit;
  • Ordre du menu : définissez un ordre personnalisé si vous le souhaitez;
  • Enfin, vous pouvez empêcher vos clients de laisser des avis sur ce produit précis.
woocommerce - donnees produit - avance

WooCommerce – Données produit – onglet Avancé

Ca y est, notre produit est créé, je vous laisse en créer d’autres si vous le voulez et passer à nouveau sur votre site… il n’a toujours pas changé ! Il n’a toujours pas changé parce que si la page boutique existe bien et si elle contient bien des produits, elle n’est toujours pas accessible depuis votre site.

Utilisez WooCommerce comme page d’accueil

C’est promis, c’est la dernière étape avant que vous ne puissiez jouer avec votre boutique ! Rendez-vous à nouveau dans votre interface d’administration, et cliquez sur ApparencePersonnaliser.  Dans le menu de gauche, dépliez la section Page d’accueil statique et demandez à WordPress d’afficher une Page statique, que vous allez définir comme étant Shop.

Utiliser WooCommerce comme page d'accueil

Il est possible de définir la page boutique de WooCommerce comme page d’accueil de WordPress

Cliquez sur le bouton Enregistrer & publier en haut de la fenêtre.

Cette fois c’est fini ! Vous allez enfin pouvoir visiter votre site marchand.

Découvrez le front office WooCommerce

Accédez à la page d’accueil de votre site, qui aura maintenant plus ou moins l’aspect de la page d’accueil d’une boutique, à savoir que vous pouvez retrouver la liste des catégories et la liste des produits, telle que définie dans vos paramètres.

Boutique WooCommerce : page d'accueil

Page d’accueil d’une boutique WooCommerce : par défaut beaucoup d’optimisations sont encore nécessaires

Je vous accorde que cette fenêtre mérite clairement d’être travaillée, ne serait-ce que traduire le titre de la page pour ne pas laisser Shop comme un cheveu sur la soupe, et séparer l’affichage des catégories de celui des produits…

Par contre toutes les fonctionnalités sont présentes : ajout au panier, moteur de recherche, options de tri des listes… toutes les fonctions de blog de WordPress sont toujours accessibles. Il aura fallu attendre la version 1.6 de Prestashop pour que les fonctionnalités de blogging soient intégrées dans les boutiques, eh bien WooCommerce le propose dès le départ.

Avant de continuer notre découverte, je vous propose un test : installez un thème pour votre boutique, n’importe lequel. Vous voyez avec quelle facilité on peut améliorer la présentation par défaut ? Pour la suite de notre visite je vais utiliser le thème Storefront 1.3.1, choisi plus ou moins au hasard, et qui a l’avantage de m’afficher le panier et les liens que l’on s’attend à trouver dans un site de vente en ligne en haut des pages.

Theme StoreFront pour WooCommerce

Theme StoreFront pour WooCommerce

 

Testons le processus de commande

C’est quand même pour ça que vous avez fait tous ces efforts, alors profitez-en, commandez un joli carré.

La fiche produit

Commencez par cliquer sur le visuel du produit sur la page d’accueil pour afficher la fiche produit détaillée. Toutes les informations que vous avez passé si longtemps à saisir se retrouvent ici : les visuels, la description courte et la description détaillée… En bas de page se retrouvent les produits liés, et on voit bien sur la capture ci-dessous que l’élément qui ressort le mieux est le bouton d’ajout au panier. Ne soyez pas timide, cliquez dessus.

woocommerce fiche produit

Exemple de fiche produit

Aussitôt, vous êtes redirigé(e) vers le panier qui vous permet de voir le récapitulatif de votre commande et de la valider (ou non).

La page panier

Comme vous venez d’ajouter un article à votre panier, un message en haut de page vous informe que l’ajout au panier s’est bien déroulé. Ensuite vient la liste des produits de votre commande en cours, ce qui permet de modifier les quantités ou de supprimer des articles du panier. Vous pouvez voir en bas à gauche une zone de cross selling , à côté du total et des frais de port (s’ils peuvent être calculés).

Enfin, c’est encore le bouton de commande qui est le plus visible, profitez-en cliquez dessus.

Panier WooCommerce

Le récapitulatif panier

La page de commande

Cette page semble un peu dense mais elle est diablement efficace.

La zone de gauche permet de s’identifier ou de saisir ses adresses de facturation et de livraison. Une case à cocher permet de créer un compte à la validation de la commande.

La zone de droite présente un récapitulatif du panier et permet de choisir son option de paiement. Le bouton de validation de commande est encore une fois l’élément le plus visible.

woocommerce : page commande

Page de commande

Récapitulatif de commande

Une fois votre commande validée vous accédez à son récapitulatif : les informations permettant d’identifier votre commande, les détails des articles commandés et vos coordonnées.

woocommerce : récapitulatif de commande

Récapitulatif de commande

Maintenant que votre première commande est validée, vous pouvez continuer seul(e) votre visite du front office, par exemple en allant voir la page My Account.

separateur

C’est ainsi que s’achève cette découverte de WooCommerce, vous aurez bien compris que, même si nous avons réussi à mettre en place une boutique fonctionnelle, le travail restant à accomplir est énorme pour avoir un site qui soit vraiment présentable à vos clients.

J’espère avoir su vous guider comme il faut dans vos premiers pas, bien entendu les commentaires sont à vous pour poser vos questions, j’y répondrai du mieux possible. N’hésitez pas non plus à me signaler une coquille, vu la longueur de cet article, même après relecture, j’ai pu en laisser passer.

6 réponses

  1. Nicolas dit :

    Bonjour,

    Installez en premier lieu la traduction française de WooCommerce avant d’installer les pages, cela évitera qu’elles soient en anglais…

    Nicolas Maillard, traducteur de WooCommerce.

  2. Renaud M.G. dit :

    Ca tombe sous le sens, merci pour la précision

  3. Yacine dit :

    Merci beaucoup sa ma vraiment beaucoup aidé, sa fait plusieurs jours que je cherche un bon tuto sur woocommerce, c’est de loin le meilleur que j’ai lue.

  4. Olivier A. dit :

    Excellent tuto !

  5. Markken dit :

    Merci beaucoup

  6. Formationwp dit :

    bon, merci pour le tuto, hyper précis, hyper logn et m’a permis de voir qu’en réglant les permaliens de la boutique, je retrouvais mes produits dans ma page “boutique”… après plusieurs heures de tournage en rond;)

Laisser un commentaire

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