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.
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.
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.
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.