Checkout blocs WooCommerce : moins de frictions, plus de commandes.
70% des paniers sont abandonnés avant le paiement. Le nouveau checkout blocs de WooCommerce réduit ce chiffre. Voici comment.
de paniers abandonnés en moyenne
Le checkout classique date d'une autre époque.
Le checkout legacy de WooCommerce est un formulaire monolithique construit avec des shortcodes. Il charge tout d'un bloc : tous les champs, tous les scripts de validation, tous les styles - même ceux dont le client n'a pas besoin.
Ce que ça coûte :
- Temps de chargement élevé : 200-400 Ko de CSS/JS pour une seule page
- Pas de paiement express natif (Apple Pay, Google Pay)
- Formulaire rigide, difficile à personnaliser sans code
- Pas de mise à jour dynamique (changer le pays = reload complet)
Les chiffres : le taux moyen d'abandon de panier en e-commerce est de 70,19% (Baymard Institute, 2024). Raisons principales : processus trop complexe (22%), création de compte obligatoire (26%), pas assez de moyens de paiement (13%).
Le checkout blocs change la donne.
Introduit dans WooCommerce 8.3, le checkout blocs est une réécriture complète. Il est basé sur l'éditeur Gutenberg : modulaire, léger, et pensé pour la conversion.
Chargement modulaire
Seuls les blocs nécessaires sont chargés. Pas de CSS/JS inutile.
Paiement express natif
Apple Pay, Google Pay, et autres wallets s'affichent automatiquement en haut du checkout.
Mise à jour dynamique
Changer le pays met à jour les frais de port et les taxes sans recharger la page.
Personnalisable sans code
Via l'éditeur de blocs Gutenberg, vous ajoutez ou supprimez des champs comme vous voulez.
Formulaire simplifié
WooCommerce détecte automatiquement les champs nécessaires selon le pays et le mode de livraison.
des paniers sont abandonnés en ligne. Un checkout rapide et fluide fait la différence entre une vente et un visiteur perdu.
Passer du checkout legacy au checkout blocs.
La migration n'est pas automatique. Le checkout legacy utilise des hooks PHP (woocommerce_checkout_fields, woocommerce_after_order_notes...) que le checkout blocs ne supporte plus. Si vous avez des personnalisations, elles doivent être adaptées.
Ce que je vérifie :
- Les champs personnalisés ajoutés au checkout (via code ou plugin)
- La compatibilité des passerelles de paiement
- Les plugins qui modifient le checkout (upsell, cross-sell, champs conditionnels)
- Les snippets PHP custom qui utilisent les hooks legacy
- Le bon fonctionnement des coupons et promotions
Le processus :
- Audit des personnalisations existantes
- Identification des incompatibilités
- Adaptation du code custom vers l'API bloc checkout
- Tests en staging avec des commandes réelles
- Bascule en production
Compatibilité avec vos moyens de paiement.
Les passerelles principales sont compatibles checkout blocs :
Pour les passerelles plus spécifiques (Alma, Oney, passerelles bancaires françaises), la compatibilité doit être vérifiée au cas par cas. C'est une des premières choses que je regarde lors de l'audit.
La migration checkout en pratique.
Une migration de checkout ne se juge pas à l'activation d'une option, mais à ce qui se passe le premier jour de production : est-ce que chaque moyen de paiement encaisse, est-ce que les emails partent, est-ce que les exports comptables restent justes ? C'est pour cela que je déroule systématiquement des commandes réelles en staging, moyen de paiement par moyen de paiement, avant toute bascule.
L'inventaire des personnalisations est l'étape décisive. Un champ « numéro TVA intracommunautaire » ajouté en 2019, un message de livraison conditionnel, un tracking de conversion posé sur la page de remerciement : tout cela doit être identifié puis porté vers l'Additional Checkout Fields API ou les points d'extension des blocs. Ce qui n'est pas inventorié avant la migration devient un bug après.
Enfin, la migration est une occasion de simplifier. Beaucoup de tunnels accumulent des champs inutiles qui font chuter la conversion. Passer aux blocs, c'est aussi remettre à plat ce qu'on demande vraiment au client, réactiver les paiements express, et mesurer le tunnel avant/après avec de vraies données. Le même principe que pour l'audit de performance : mesurer, corriger, re-mesurer.
Questions fréquentes sur le checkout blocs
Qu'est-ce que le checkout blocs de WooCommerce ?
C'est la nouvelle génération du tunnel de paiement WooCommerce, construite avec les blocs Gutenberg et une architecture React + API. Contrairement au checkout classique (shortcode), il valide les champs en temps réel, se met à jour sans recharger la page et intègre nativement les paiements express comme Apple Pay et Google Pay. C'est le checkout par défaut des nouvelles installations depuis WooCommerce 8.3.
Quelle différence de conversion entre checkout classique et checkout blocs ?
Le checkout blocs supprime des irritants mesurés : rechargements de page à chaque erreur, validation tardive des champs, absence de paiement express. Le Baymard Institute chiffre à 35% les abandons de panier évitables par un meilleur checkout. Le gain exact dépend de votre boutique, mais moins d'étapes et moins d'attente se traduisent mécaniquement en plus de commandes finalisées.
Mon moyen de paiement est-il compatible ?
Stripe, PayPal, Mollie et WooCommerce Payments sont pleinement compatibles. Pour les passerelles françaises (Payplug, Systempay, Monetico, Alma, Oney...), la compatibilité varie selon les versions : certaines supportent les blocs nativement, d'autres uniquement le shortcode. C'est le premier point que je vérifie en audit, car il conditionne toute la migration.
Vais-je perdre mes personnalisations de checkout ?
Les hooks PHP classiques (woocommerce_checkout_fields et consorts) ne fonctionnent plus tels quels : le checkout blocs utilise ses propres points d'extension JavaScript et l'Additional Checkout Fields API. Les personnalisations existantes doivent être inventoriées puis portées. C'est généralement le gros du travail de migration, bien plus que l'activation elle-même.
Peut-on tester le checkout blocs sans risque ?
Oui. La méthode propre : dupliquer le site en staging, y basculer le checkout, dérouler des commandes tests avec chaque moyen de paiement et chaque cas de figure (codes promo, livraison multiple, comptes clients, invités). En production, la bascule est réversible : on peut revenir au shortcode en quelques minutes si un problème apparaît.
Combien de temps prend une migration vers le checkout blocs ?
Pour une boutique sans personnalisations lourdes et avec des passerelles compatibles : quelques jours, tests inclus. Avec des champs custom, un tunnel modifié ou une passerelle récalcitrante : une à trois semaines. L'audit initial donne une réponse précise, c'est lui qui révèle les personnalisations oubliées accumulées au fil des années.
Le checkout blocs est-il plus rapide que l'ancien ?
Oui, perceptiblement. La validation se fait côté client sans recharger la page, les mises à jour (livraison, taxes, promo) passent par l'API sans rechargement complet, et le rendu profite des optimisations des blocs. Combiné à une optimisation globale de la boutique, le tunnel devient quasi instantané.
Faut-il migrer maintenant ou attendre ?
La direction est claire : le checkout blocs est le présent de WooCommerce, le shortcode est en maintenance. Les nouvelles fonctionnalités (paiements express, extensibilité moderne) n'arrivent que sur les blocs. Migrer maintenant, dans de bonnes conditions et sans urgence, vaut mieux que migrer contraint lors d'une future dépréciation. Mon guide de migration détaillé couvre le sujet pas à pas.
Votre checkout vous coûte des ventes.
Je migre votre checkout vers les blocs, je vérifie chaque passerelle de paiement, et je m'assure que vos personnalisations fonctionnent. Résultat : un tunnel de vente plus rapide et plus efficace.