Sortir de l’interface native de WordPress ? Jamais de la vie. Proposer une kyrielle de widgets ? Même pas en rêve. Avec lui, la star, ce sont les blocs. Créer votre prochain site WordPress sans quitter l’éditeur par défaut (Gutenberg),…
Ç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.
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.
Sommaire
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 ?
WPMarmite News, 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:
- Checkout Field Editor (Checkout Manager) for WooCommerce par ThemeHigh
- Checkout Field Editor par WooCommerce eux-mêmes
- YITH WooCommerce Checkout Manager
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 ?
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.
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.
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.
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.
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.
Voici à quoi ressemble la page de commande par défaut de WooCommerce avant toute modification :
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.
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é.
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 !
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.
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 !
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.
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 😉
Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20000 personnes l'ont fait, pourquoi pas vous ?
Je m'inscris
merci pour ces bonnes informations.
Mais, existe t il une extension qui permet au client de télécharger sa commande (une fois validée) en plus de la recevoir par email ??
Je n’ai rien trouvé sur cela
Merci d’avance
Philippe
Bonjour, tu parles de facture?
Bonjour,
Non, la commande ou Bon de commande.
Avec “WooCommerce PDF Invoices & Packing Slips” on peut imprimer uniquement les factures et bon de livraison mais lorsqu’un client passe commande, par défaut il est impossible d’imprimer sa commande qui est envoyée par email (et pas préciser non plus).
Par contre, j’ai trouvé “Print Invoice & Delivery Notes for WooCommerce” , présenté dans ton article https://wpmarmite.com/factures-woocommerce/ permet de le faire simplement.
C’est pour mettre en place du Click and Collect !
Bonjour, merci pour ces renseignements, pour ma part sur la page check out j’ai adresse de facturation et ensuite j’ai “expédier à une autre adresse”. J’aimerais publier le site ce soir mais je trouve qu’elle est surchargée et pas très claire pour les clients. :/
M. AHINON;
Merci pour votre apport à la personnalisation de page de commande;
Du courage et bonne continuation;
Marius;
Bonjour et merci pour cet article qui répond en partie à mon questionnement du jour.
En effet, j’ai des clients pro qui ne commande pas sur la boutique (WooCommerce), car leur procédure est d’envoyer un bon de commande. (je ne dois pas être le seul dans ce cas !)
Je peux donc créer le client, et saisir sa commande, mais il faudrait que je puisse garder l’info du numéro de la commande d’origine (donc ajouter un champ c’est top).
Mais pour que ce soit utilise il faudrait que ce champ puisse être repris sur les mails (personnalisés avec Kadence WooCommerce Email Designer) les bons de livraisons et les factures (WooCommerce PDF Invoices & Packing Slips).
Pensez vous que ce soit possible ?
Bonjour, tu veux juste éditer le numéro de commande en fait ?
Bonjour,
J’utilise ce plugin sur mon site, là ou ça bloque c’est que je n’arrive pas à récupérer et afficher les costum fileds créés sur mes factures générées avec WooCommerce PDF Invoices & Packing Slips.
Vous avez déjà été confronté à ce type de problème ?
Merci par avance.
Bonjour, il faut passer par du code personnalisé sur ton template de facture pour les afficher 😉
Bonjour, je cherche à ajouter des éléments sur la page panier et sur le checkout comme des images ou la personnalisation des éléments déjà en place.
Je ne trouve pas de plugin pour faire cela, au même titre que la modification de la page produit woo commerce…
Merci par avance,
Hédi
Bonjour, Elementor Pro te permet de faire pas mal de modifications de ce côté 😉
Bonjour,
Merci pour ces informations. De mon coté, je cherche à modifier un texte dans le woocommerce form login. Existe t il une extension pour faire ça ou dois je modifier le php ?
Bonjour, tu peux le faire via Loco Translate : https://www.youtube.com/watch?v=YLPkhDkGIRA
Bonjour La Marmite,
Comment faire pour qu’un champs spécifique soit ajouté “pour chaque article” lors du checkout ?
Exemple, je suis un papa qui inscrit ses 3 mômes à 3 cours de sport (différent par enfant) et je dois préciser quel môme est inscrit à quel cours.
C’est un checkout plus complexe.
Existe-t’il un plugin pour cela ?
Merci de vos lumières
Bonjour, oui tu peux utiliser l’extension Gravity Forms Products add-ons : https://woocommerce.com/fr-fr/products/gravity-forms-add-ons/
Merci pour cet article intéressant.
Je viens de tester le plugin: dommage que les nouveaux champs ne peuvent être ajoutés dans le mail de confirmation de la commande qu’en utilisant la version payante …
Hello, celui-là le fait gratuitement : https://fr.wordpress.org/plugins/woo-checkout-field-editor-pro/ 😉
Bonjour,
Est il possible dans les notes de commandes que le client puisse joindre une image ?
C’est pour des commandes personnalisées, que le client puisse envoyer un modèle de ce qu’il voudrait.
Merci,
Bonjour, non. Il te faudra ajouter un champ d’ajout de fichiers.
Rajouter un champ d’ajout de fichiers via le plugin ou via le code ? :/
Hello, via le plugin.
Merci bcp pour ce article.
J’avais en effet besoin de retirer des champs non utils.
Encore merci
Bonjour et merci pour votre article ! Ce plugin de précommande est-il compatible avec checkout wc ? De manière à ouvrir la page directement. Merci à vous 🙂
Bonjour, je n’ai pas compris la question ?
Merci beaucoup Justin pour cet article bien détaillé. C’est toujours très agréable de lire un article sur la marmite ! Une petite question.
J’ai un site ecommerce en Afrique que je souhaite mettre à jour et je rencontre une difficulté. Il n’existe pas de codes postaux. Alors, comment pourrais-je paramétrer les frais de livraison selon la ville sans code postal ?
Peut-on lier le champ Région ( ou un autre d’ailleurs qui est une liste de choix ) avec des traifs de livraison ? Par avance merci pour votre aide
Bonjour, je te conseille de voir avec le support de l’extension directement 😉
Bonjour,
Article intéressant merci. Mais les prix ont doublé. Par ailleurs “Checkout Manager for WooCommerce” est-il toujours aussi intéressant ?
Bonjour, oui il est toujours intéressant.
Bonjour, j’ai un site e-commerce et je souhaiterais faire une modification dans mon interface de gestion de commande
Lorsque mes clients commandent sur mon site je peux modifier l’état de leur commande dans le detail de celle-ci mais les seules possibilités que j’a sont : “attente paiement, en cours, en attente, terminée, annulée, remboursée, échouée, brouillon”
Mais j’aimerais ajouté un autre état qui serait “envoyé” ou “en cours de livraison”
Mais je n’ai pas trouvé comment faire cela
Est-ce que c’est possible ?
Merci d’avance
Bonjour, des extensions comme Boxtal te rajoutent ces états.
Merci pour cette super présentation. Petite question comment pouvons-nous ajouter ces champs additionnels sur les factures ou bon de commande, principalement pour le gestionnaire ?
Merci pour votre retour.
Bonjour, tu pourras le faire via le code ou certaines extensions de facturation en version Premium.
Bonjour,
Merci pour tous d’avance,
J’entrain de monter de site web dont je veux utiliser le thème StoreFront mais je suis bloqué sur la page Checkout : au niveau de l’Options de paiement , il affiche l’erreur ” Aucun moyen de paiement disponible. L’erreur vient peut-être de notre côté. Contactez-nous si vous avez besoin d’aide pour passer votre commande ”, alors que sur l’extension WOOCOMMERCE –>Paiement : J’ai bien activé et défini l’outil de paiement que je souhaite utiliser pour recevoir mon paiement.
Alors si c’est possible, pouvez-vous m’aider à résoudre ce problème, Merci
Hello, tu a activé les paiements dans les options ?