Depuis que le bloc Paiement de WooCommerce est passé en stable, personnaliser le tunnel de commande ne se fait plus en surchargeant un template PHP mais en peuplant des emplacements dédiés, les slots, exposés par le bloc lui-même. Ce tutoriel construit un cas concret : une case à cocher facultative « Ajouter un emballage cadeau », affichée juste avant le récapitulatif de commande, dont l’état conditionne l’affichage d’un champ de message.
L’Interactivity API, arrivée avec WordPress 6.5, est le complément naturel de cette architecture par blocs : elle permet de gérer l’état d’une interface directement en HTML annoté par des directives, sans écrire de composant React à la main ni charger de bibliothèque supplémentaire. C’est cette approche que nous allons suivre plutôt qu’un enregistrement classique via @wordpress/element.
Étape 1 : déclarer le bloc et son point de montage
La personnalisation prend la forme d’un petit plugin dédié, indépendant du thème, ce qui garantit qu’elle survivra à un futur changement d’habillage graphique. On commence par enregistrer un bloc simple destiné à occuper le slot woocommerce/checkout-additional-information-block, l’un des emplacements exposés par défaut dans le flux du paiement :
