Ça vous est déjà sans doute arrivé : sur un site e-commerce, vous repérez le produit de vos rêves. Il est superbe, il vous plaît, vous le mettez en panier. Puis direction la page de commande… et là, c’est le drame.

Vous ne comprenez plus rien : on vous annonce des frais de transport dont vous n’aviez jamais entendu parler, vous devez remplir une vingtaine de champs qui vous semblent inutiles… et votre produit ne vous semble plus si intéressant que ça. Résultat ? Vous quittez la page, et le site, à tout jamais.

Voilà la hantise de ceux qui créent des sites e-commerce : que leur page de validation de commande ne soit pas optimisée.

Si vous utilisez WooCommerce pour votre site, vous connaissez la page classique de commande qui est fournie avec l’extension. Bien qu’elle réponde aux attentes classiques qu’on peut avoir, elle n’est pas forcément adaptée pour tous les besoins.

Vous pourriez avoir envie de supprimer un champ qui n’est pas pertinent dans votre contexte, ou encore en rajouter un autre qui est absent.

C’est là qu’intervient Checkout Manager for WooCommerce.

Le plugin vient à votre rescousse !

Il s’agit d’une extension qui permet de personnaliser la page de validation de commande de WooCommerce.

On va donc dans cet article voir de quoi il retourne exactement, et comment vous pouvez tirer profit de cette extension pour fournir une expérience personnalisée aux clients de votre boutique.

Checkout Manager for WooCommerce, c’est quoi ?

Checkout Manager for WooCommerce est un produit de QuadLayers, une entreprise qui développe des solutions pour les boutiques en ligne.

Ils sont également les éditeurs d’autres extensions WordPress populaires comme WP Social Chat, Social Feed Gallery ou encore Direct Checkout for WooCommerce. Ces trois extensions cumulent plus de 200.000 installations actives sur le répertoire officiel d’extensions de WordPress.

L’extension est déclinée en une version gratuite, et une version payante disponible avec trois types de licences.

Contrairement à la plupart des extensions WordPress premium, vous pourrez l’avoir avec un paiement unique de…

  • 20$ pour 1 site
  • 40$ pour 5 sites
  • Ou 80$ pour un nombre de sites illimité

Cela veut dire qu’une fois la licence achetée, vous bénéficiez des mises à jour à vie sur l’extension.

Par contre, l’entreprise n’offre que 6 mois de support personnalisé quand vous achetez la licence. Vous avez ensuite la possibilité si vous le désirez de souscrire à six autres mois de support, pour le prix de 20$.

Pour cet article, nous utiliserons la version gratuite de Checkout Manager for WooCommerce.

Quelles sont ses fonctionnalités-clés ?

Checkout Manager for WooCommerce offre une suite de fonctionnalités complètes pour la gestion des pages de commande de WooCommerce.

  • D’abord, vous avez les fonctionnalités de base comme l’ajout et la suppressions des champs du formulaire de commande. Super utile si vous voulez recueillir, lors de l’achat, certaines informations dont les champs ne sont pas présents sur le formulaire par défaut.
  • Vous pouvez aussi réorganiser l’ordre dans lequel s’affichent les champs sur votre formulaire de commande.
  • Autre fonctionnalité super intéressante : les champs conditionnels. Est-ce que vous avez besoin de demander des informations supplémentaires à vos clients situés à Paris ? Au lieu d’afficher à tous vos clients ce nouveau champ, vous pouvez utiliser cette fonctionnalité pour ne la rendre visible que si un client ajoute Paris dans le champ “Ville”.
  • Vous pouvez aussi ajouter du CSS directement à la page de commande de WooCommerce. L’extension propose un champ dédié pour cela.

Pas mal, déjà, n’est-ce pas ?

Le Ptit Bouillon, votre antisèche sur l’actu WordPress

Recevez gratuitement les dernières infos de l’écosystème WordPress tous les 15 jours et créez de meilleurs sites.

Alternatives à Checkout Manager for WooCommerce

Il faut dire que les extensions pour personnaliser la page de commande de WooCommerce, il en existe beaucoup. La plupart offrent certaines des fonctionnalités de base énumérées plus haut.

Voilà quelques unes de ces extensions parmi les plus utilisées:

Nous verrons à la fin de cet article les petits plus qu’offrent Checkout Manager for WooCommerce 😉

Maintenant qu’on a parlé de long en large de ce que vous pouvez faire avec Checkout Manager for WooCommerce, et si on mettait les mains dans le cambouis ?

À vos marques, prêts… testez !

Comment installer Checkout Manager for WooCommerce

Première chose avant d’installer Checkout Manager for WooCommerce, c’est d’avoir installé et activé WooCommerce. Normal : on veut personnaliser la page d’accueil de WooCommerce.

Si vous ne savez pas comment installer WooCommerce, vous pouvez consulter l’article de la Marmite dédié au sujet qui vous détaille la démarche.

Ensuite, depuis votre tableau de bord, il faut aller dans Extensions > Ajouter, et entrer “Checkout Manager for WooCommerce” dans le champ de recherche. C’est la méthode la plus facile.

Installer WooCommerce Checkout Manager depuis le tableau de bord WordPress
Installer Checkout Manager for WooCommerce depuis le tableau de bord WordPress

Vous pouvez aussi télécharger le zip de l’extension depuis le répertoire officiel de WordPress, et le téléverser manuellement sur votre site. Puis vous aurez juste à l’activer.

Quelle que soit la méthode que vous utilisez pour installer l’extension, un nouveau élément de menu Checkout est ajouté dans le Tableau de bord, sous le menu WooCommerce.

Menu checkout - WooCommerce Checkout Manager
Menu checkout – Checkout Manager for WooCommerce

Cet élément de menu renvoie vers la page d’options de l’extension, qui est un nouvel onglet ajouté dans les réglages de WooCommerce.

La page d’options de Checkout Manager for WooCommerce

Comment personnaliser votre page de commande WooCommerce

WooCommerce 4.0 et plus: reconfigurer les paramètres des champs conditionnels avant l’utilisation

Si vous utilisiez une version de WooCommerce inférieure à 4.0, et que vous aviez des champs conditionnels sur votre formulaire de commande, il va falloir les reconfigurer après avoir fait la mise à jour de WooCommerce. En effet, cette version de WooCommerce a introduit un certain nombre de changements pour ces champs.

La reconfiguration des champs conditionnels concerne les sites qui avaient déjà l’extension Checkout Manager for WooCommerce installée, puis ont mis à jour leur version de WooCommerce à 4.0 ou plus.

Re-configurer les paramètres des champs conditionnels après l’activation de WooCommerce Checkout Manager
Re-configurer les paramètres des champs conditionnels après l’activation de Checkout Manager for WooCommerce

Si votre version de WooCommerce est supérieure ou égale à 4.0, ou si vous n’aviez pas de champs conditionnels dans le formulaire de commande, vous pouvez simplement ignorer cette étape. Ouf !

Ajouter, modifier et supprimer des champs

Dans le cadre de cet article, on va supposer qu’on a une boutique de vente de hoodies et de t-shirts.

Boutique de hoodies et de t-shirts
Boutique de hoodies et de tee-shirts

Voici à quoi ressemble la page de commande par défaut de WooCommerce avant toute modification :

Page de commande WooCommerce par défaut

Pour cette page de commande, on va ajouter un nouveau champ pour demander à nos clients s’ils achètent d’habitude leur hoodies sur d’autres boutiques en ligne. Ce champ sera du type menu déroulant.

Pour ce faire, rendez-vous sur la page d’options de Checkout Manager for WooCommerce dans WooCommerce > Checkout puis dans l’option Billing.

Ensuite, il suffit de cliquer sur le bouton Add new field. Une nouvelle fenêtre apparaît où vous pourrez ajouter différentes informations comme : 

  • Le nom
  • Le texte de substitution
  • La description du nouveau champ à créer

Dans le cas d’un champ à sélectionner comme le nôtre, vous pourrez aussi ajouter les différentes options parmi lesquelles choisir.

On peut aussi marquer ce champ Required afin de le rendre obligatoire.

Une fois le champ ajouté vous le verrez sur la page de commande, tout en bas du formulaire.

Champ “Autre boutiques de hoodies” ajouté par WooCommerce Checkout Manager en frontend
Champ “Autre boutiques de hoodies” ajouté par Checkout Manager for WooCommerce en frontend

Vous pouvez ajouter autant de champs que vous voulez au formulaire de votre page de commande. Il n’y a aucune limite.

Mais attention ! Rappelez-vous que cette page joue un rôle important dans les décisions que prennent vos clients. Il faut donc rester dans la limite du raisonnable… ne soyez pas trop gourmand ! 😃

Réorganiser l’ordre des champs

Maintenant que notre nouveau champ est ajouté, nous allons le déplacer vers le haut.

L’interface de Checkout Manager for WooCommerce est très intuitive. Déplacer un champ revient tout simplement à faire du glisser-déposer, ou à cliquer sur les flèches qui sont près de chaque champ. Nous allons donc ramener notre nouveau champ juste après celui Ville.

Et tadam ! Notre nouveau champ se retrouve là où on l’a placé.

WooCommerce Checkout Manager - Champ déplacé
Avec Checkout Manager for WooCommerce, voilà un champ déplacé les doigts dans le nez !

Tirer profit de la puissance des champs conditionnels

Les champs conditionnels sont des champs qui s’affichent en fonction des réponses à d’autres champs ; ou encore des champs qui ne sont affichés que pour des produits spécifiques.

En utilisant notre exemple précédent, on peut vouloir afficher notre nouveau champ seulement si nos clients sont en France. Concrètement, on va donc lier notre champ Autre boutique de hoodies au champ Pays/région de WooCommerce.

Quand vous cliquez sur le bouton Modifier de notre nouveau champ, vous remarquerez à droite la présence d’une case à cocher Activate conditional field requirement. Une fois cochée, vous pourrez choisir le champ sur lequel la condition va être vérifiée, et la réponse à vérifier.

Dans notre cas, on choisit Pays/région, et comme réponse France. N’oubliez pas d’enregistrer vos modifications !

Activer un champ conditionnel
Activer un champ conditionnel

C’est fait ? Le champ Autre boutique de hoodies ne s’affiche sur notre page de commande que si France est choisi comme pays.

Ajouter du CSS personnalisé à la page de commande

Le champ CSS personnalisé de Checkout Manager for WooCommerce vous permet d’ajouter du code CSS qui va être ajouté spécifiquement à la page de commande de votre site. Super utile si vous n’êtes pas un crack du code, et vous ne voulez pas vous embêter avec des sélecteurs CSS.

L’ajout de code CSS se fait depuis la section Advanced toujours depuis la page d’options de l’extension.

Ajouter de CSS personnalisé - WooCommerce Checkout Manager
Ajouter de CSS personnalisé – Checkout Manager for WooCommerce

Petit bémol toutefois, le champ de CSS personnalisé proposé par l’extension n’a pas de coloration syntaxique, ni de validation des erreurs. Vérifiez bien que tout est au poil avant de lancer en production !

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Et les fonctionnalités, alors ?

L’extension Checkout Manager for WooCommerce propose aussi de nombreuses autres fonctionnalités très intéressantes.

Par exemple depuis la page principale d’options, vous pouvez :

  • Supprimer le champ Notes de commande.
  • Ajouter des messages personnalisés sur la page de remerciement qui s’affiche après qu’un client ait effectué un achat. Sympa pour dire merci à vos chers visiteurs !
WooCommerce Checkout Manager - Page d'option Checkout
La page d’options Checkout du plugin

D’autres fonctionnalités comme la personnalisation des emails de commande, ou l’exportation des options, ne sont disponibles qu’avec la version premium.

Si vous voulez découvrir en profondeur de quoi est capable Checkout Manager for WooCommerce, je vous recommande vivement de regarder la documentation qui est proposée ici : elle est très complète.

Que faire de ces champs additionnels ?

Lorsqu’un client termine une commande, vous verrez les détails de celle ci sur la page des commandes de WooCommerce: WooCommerce > Commande.

Vous pouvez donc ouvrir individuellement chaque commande pour en modifier le statut ou encore consulter les différentes informations entrées par le client.

Page de commande individuelle WooCommerce
Page de commande individuelle WooCommerce

Les champs additionnels que vous avez ajouté sur le formulaire seront également à cet endroit. Sur l’image d’en haut, vous pouvez voir, encadré en rouge, le champ Autres boutiques de hoodies que nous avons créé plus tôt.

À vous de vous en servir pour améliorer votre connaissance client, lancer des campagnes marketing ciblées, ou proposer des produits personnalisés selon vos différents segments de clients !

Et on en retient quoi ?

Avoir le contrôle sur les différents champs de votre page de commande peut vraiment être très utile pour offrir une expérience d’achat personnalisée à vos clients.

Et parmi les différentes extensions qui proposent cela, Checkout Manager for WooCommerce de QuadLayers fait plutôt bien le boulot, avec sa suite complète de fonctionnalités. En plus, la plupart des fonctionnalités utiles sont disponibles dans la version gratuite de l’extension.

Petit hic toutefois : l’extension n’est pas totalement traduite en Français. Vous rencontrerez probablement des chaînes de caractères en Anglais dans les interfaces.

Alors dites-moi ? Vous utilisez aussi Checkout Manager for WooCommerce pour personnaliser vos pages de commande ? Ou vous utilisez une autre extension ? Quelles bonnes pratiques avez-vous mis en place sur votre page de commande WooCommerce ? On veut tout savoir, partagez-nous vos trouvailles en commentaires 😉