Migrer vers les Checkout Blocs WooCommerce en 2026

woocommerce checkout blocs conversion

Migrer vers les Checkout Blocs WooCommerce en 2026

Pourquoi migrer maintenant

Le checkout classique de WooCommerce (shortcode [woocommerce_checkout]) repose sur une architecture datée : hooks PHP, jQuery, rechargement complet de page à chaque modification. Les Checkout Blocs, introduits progressivement depuis WooCommerce 8.3, utilisent une architecture React avec mise à jour en temps réel.

Les chiffres parlent d’eux-mêmes. Selon le Baymard Institute, le taux moyen d’abandon de panier en e-commerce est de 70,19%. Parmi les raisons principales : un processus de checkout trop long ou compliqué (22%) et des erreurs ou crashs du site (13%).

Les Checkout Blocs adressent ces deux points : moins d’étapes, validation en temps réel, pas de rechargement de page.

Ce qui change concrètement

Côté utilisateur

  • Les champs se valident en temps réel (plus besoin de soumettre pour voir les erreurs)
  • Le récapitulatif de commande se met à jour instantanément (frais de port, taxes)
  • Le checkout peut tenir sur une seule page sans rechargement

Côté technique

  • Le rendu est côté client (React), plus côté serveur (PHP)
  • Les hooks classiques (woocommerce_before_checkout_form, woocommerce_after_order_notes, etc.) ne fonctionnent plus
  • Les customisations passent par l’API des Blocs (filtres JS, IntegrationInterface)
  • Les passerelles de paiement doivent supporter l’API Block Checkout

Côté performance

  • Moins de requêtes serveur pendant le checkout
  • Pas de rechargement de page complet
  • JS plus lourd au chargement initial (~80 Ko vs ~30 Ko), mais expérience globale plus fluide

Compatibilité des passerelles de paiement

Avant de migrer, vérifiez que vos passerelles supportent les Checkout Blocs :

Compatible nativement :

  • Stripe (plugin officiel WooCommerce)
  • PayPal Payments
  • Mollie
  • Adyen

Compatible avec mise à jour :

  • Stripe via WooCommerce Stripe Gateway (vérifiez la version)
  • PayPal via WooCommerce PayPal Payments (pas l’ancien PayPal Standard)

Potentiellement incompatible :

  • Passerelles anciennes ou peu maintenues
  • Solutions de paiement locales sans mise à jour récente

Vérifiez toujours sur un environnement de staging.

Audit avant migration

Avant de toucher quoi que ce soit en production, faites l’inventaire :

1. Hooks PHP personnalisés

Cherchez dans votre thème et vos snippets tout ce qui utilise les hooks checkout classiques :

// Ces hooks ne fonctionnent PAS avec les Checkout Blocs
woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_before_checkout_billing_form
woocommerce_after_checkout_billing_form
woocommerce_before_checkout_shipping_form
woocommerce_after_order_notes
woocommerce_review_order_before_payment

Si vous avez du code accroché à ces hooks, il devra être réécrit pour l’API Blocs.

2. Plugins qui modifient le checkout

Les plugins courants à vérifier :

  • Checkout Field Editor (ou équivalent)
  • Plugins de upsell/cross-sell au checkout
  • Plugins de points de fidélité
  • Plugins de livraison personnalisée

3. Champs personnalisés

Si vous avez ajouté des champs au checkout (numéro de TVA, instructions de livraison, etc.), ils devront être migrés vers l’API __experimentalRegisterCheckoutFilters ou via un bloc personnalisé.

Processus de migration

Étape 1 : Staging

Clonez votre site sur un environnement de staging. Ne faites jamais cette migration directement en production.

Étape 2 : Activer les Checkout Blocs

Éditez la page Checkout dans l’éditeur WordPress. Supprimez le shortcode [woocommerce_checkout] et ajoutez le bloc “Checkout”. Faites de même pour la page Cart avec le bloc “Cart”.

Étape 3 : Tester

Passez des commandes test avec chaque passerelle de paiement active :

  • Commande simple (1 produit)
  • Commande avec coupon
  • Commande avec livraison (vérifiez le calcul des frais)
  • Commande avec produit virtuel/téléchargeable
  • Commande en tant qu’invité ET en tant que client connecté

Étape 4 : Adapter le code custom

Réécrivez les hooks PHP incompatibles. Exemple pour ajouter un champ personnalisé :

// Ancien monde : PHP hook
// Nouveau monde : filtre JS côté client
const { registerCheckoutFilters } = window.wc.blocksCheckout;

registerCheckoutFilters( 'mon-plugin', {
    additionalCartDataValidation: ( value ) => {
        // Validation personnalisée
        return value;
    },
});

Étape 5 : Mise en production

Après validation complète sur staging, appliquez les mêmes changements en production. Surveillez les commandes pendant 24-48h.

Les pièges courants

Le checkout semble vide après migration. Vous avez probablement un plugin qui force le shortcode classique. Désactivez les plugins un par un pour identifier le conflit.

Les frais de port ne s’affichent pas. Vérifiez que vos zones de livraison sont correctement configurées. Les Checkout Blocs sont plus stricts sur la validation des adresses.

Le CSS custom ne s’applique plus. Les classes CSS ont changé. Les Checkout Blocs utilisent des classes préfixées wc-block-* au lieu des classes classiques woocommerce-*.

Les emails de confirmation sont différents. Les Checkout Blocs peuvent modifier légèrement le format des données envoyées. Vérifiez vos templates d’emails personnalisés.

Impact mesurable

Sur les migrations que j’ai accompagnées, le passage aux Checkout Blocs combiné à une simplification du formulaire produit en moyenne :

  • -20 à 35% d’abandon au checkout (source : données WooCommerce internes)
  • Temps de complétion du checkout réduit de ~15 secondes

Le gain exact dépend de votre situation de départ. Un checkout déjà optimisé verra moins d’amélioration qu’un checkout surchargé de champs inutiles.

Votre checkout WooCommerce a besoin d’une mise à jour ? Demandez un audit gratuit.

Besoin d'un audit de votre boutique WooCommerce ?

Je vous envoie un diagnostic personnalisé avec les points à améliorer en priorité. Gratuit, sans engagement.

Demander un audit gratuit