Les Hooks WooCommerce et éditeur de blocs

Avec l’arrivée de l’éditeur Gutenberg, l’écosystème WordPress a évolué vers une approche de développement axée sur les blocs. Cette transition ne s’arrête pas à l’éditeur de contenu.  Mais, s’étend également à WooCommerce. En effet, WooCommerce a introduit des blocs pour la page de panier, mon compte et de commande. Bien que ces blocs modernisent l’expérience utilisateur, ils apportent aussi des changements significatifs qui peuvent poser des défis pour les développeurs.  Les Hooks WooCommerce pour la modification du panier semblent ne plus fonctionner. Dans cet article, nous allons parler de notre constat. Ensuite, nous verrons quelques pistes de solutions pour utiliser les hooks WooCommerce.

L’impact de la migration vers les blocs sur les filtres WooCommerce

L’un des problèmes majeurs que nous avons observés avec cette migration est la perte de compatibilité avec les filtres et hooks. Comme vous le savez, WooCommerce utilise ces options pour personnaliser la page de panier et de commande. Historiquement, WooCommerce permettait aux développeurs d’utiliser un large éventail de filtres pour modifier ou ajouter des champs personnalisés sur ces pages. Cependant, depuis l’introduction des blocs, plusieurs de ces filtres ne fonctionnent plus comme prévu.

Notre équipe a récemment été confrontée à ce problème lorsqu’une entreprise nous a contactés pour ajouter l’option de pourboire et d’autres champs personnalisés à la page de commande. Confiants, nous avons assuré au client que cela serait rapide à mettre en place. Dans le passé, nous avions réalisé cette tâche de nombreuses fois. Mais à notre grande surprise, aucun de nos essais n’a fonctionné. Cette expérience nous a permis de constater que les filtres WooCommerce couramment utilisés pour le panier et la commande ne sont plus pris en charge dans les nouvelles pages basées sur les blocs.

Exemples de filtres WooCommerce non fonctionnels

Voici quelques exemples de filtres couramment utilisés pour personnaliser la page de commande. Ils ne   semblent ne plus fonctionner avec les nouveaux blocs WooCommerce :

• woocommerce_before_checkout_form : Utilisé pour ajouter du contenu avant le formulaire de commande.
• woocommerce_checkout_fields : Permet de modifier les champs du formulaire de commande.
• woocommerce_after_checkout_form : Utilisé pour ajouter du contenu après le formulaire de commande.
• woocommerce_cart_item_price : Filtre permettant de modifier le prix d’un article dans le panier.

Ces hooks et filtres étaient auparavant essentiels pour des fonctionnalités telles que :

• l’ajout de champs personnalisés,
• la modification des prix dans le panier,
• ou l’ajout de notes spécifiques à la commande.

Cependant, avec la nouvelle architecture des blocs, ces actions ne sont plus supportées de la même manière. Pour ce fait, ça pose des problèmes pour les développeurs habitués à ces méthodes.

Ce que nous avons découvert en cherchant des solutions

En cherchant des réponses sur Google, nous avons rapidement découvert que nous n’étions pas les seuls à faire face à cette situation. Plusieurs autres entreprises et développeurs ont rencontré le même problème. Parmi les ressources que nous avons consultées, les discussions suivantes étaient particulièrement pertinentes :

• Question sur StackOverflow : De nombreux développeurs expriment leur frustration face au fait que les hooks ne sont plus déclenchés avec la mise à jour des blocs WooCommerce.
• Discussion sur GitHub : Un problème ouvert par plusieurs utilisateurs mettant en lumière l’absence de prise en charge des filtres dans les nouveaux blocs de WooCommerce.

Réponse de l’équipe WooCommerce

Face à ces retours, l’équipe WooCommerce a reconnu le problème et a expliqué que le bloc de checkout (commande) ne supporte pas encore les filtres traditionnels. Cependant, ils ont assuré que des solutions sont en cours de développement. Elles pensent mettre en place des options de compatibilité avec les filtres dans une future mise à jour. Cette réponse est encourageante, mais pour le moment, les développeurs doivent faire face à cette limitation.

Solutions temporaires pour contourner le problème

En attendant que WooCommerce rétablisse la compatibilité avec les filtres, il existe quelques solutions temporaires que vous pouvez envisager pour contourner ces limitations :

1 – Désactiver les blocs WooCommerce pour revenir à l’ancien système

Si votre site ne dépend pas des nouveaux blocs WooCommerce, vous pouvez désactiver l’utilisation des blocs. Cela réactivera les anciens filtres.

add_filter( 'woocommerce_blocks_checkout_is_enabled', '__return_false' );
add_filter( 'woocommerce_blocks_cart_is_enabled', '__return_false' );

2 – Utiliser des plugins tiers

Certains développeurs de plugins ont déjà commencé à combler cette lacune en offrant des solutions qui permettent d’ajouter des champs personnalisés.

Quelques exemples :

• Checkout Field Editor for WooCommerce
• WooCommerce Blocks Customizer
• Flexible Checkout Fields

3 – Utiliser le shortcode WooCommerce pour la page de commande

WooCommerce fournit un shortcode pour afficher la page de commande classique, qui est toujours compatible avec les filtres WooCommerce. Vous pouvez l’utiliser dans une page ou un modèle personnalisé de votre thème.

• Shortcode pour afficher la page de commande :

[woocommerce_checkout]

Vous pouvez remplacer les blocs WooCommerce par ce shortcode pour restaurer la compatibilité avec les filtres.

   Ajouter des champs personnalisés via des filtres (qui fonctionnent avec le shortcode)

Une fois que vous avez activé le shortcode sur la page de commande, vous pouvez ajouter vos champs personnalisés comme avant, en utilisant les filtres WooCommerce classiques, par exemple pour ajouter un champ de pourboire.

• Exemple d’ajout d’un champ de pourboire :

// Ajouter un champ pourboire sur le formulaire de commande
add_action( 'woocommerce_after_order_notes', 'ajouter_champ_pourboire' );
function ajouter_champ_pourboire( $checkout ) {
echo '<div id="champ_pourboire"><h3>' . __('Ajouter un pourboire') . '</h3>';

woocommerce_form_field( 'tip_amount', array(
'type' => 'number',
'class' => array('form-row-wide'),
'label' => __('Montant du pourboire'),
'placeholder' => __('Entrez un montant'),
), $checkout->get_value( 'tip_amount' ));

echo '</div>';
}

• Validation du champ de pourboire :

// Valider le champ pourboire
add_action('woocommerce_checkout_process', 'valider_champ_pourboire');
function valider_champ_pourboire() {
if ( ! $_POST['tip_amount'] || $_POST['tip_amount'] < 0 )
wc_add_notice( __( 'Veuillez entrer un montant valide pour le pourboire.' ), 'error' );
}

• Sauvegarder la valeur du pourboire avec la commande :

// Sauvegarder le pourboire
add_action( 'woocommerce_checkout_update_order_meta', 'sauvegarder_pourboire' );
function sauvegarder_pourboire( $order_id ) {
if ( ! empty( $_POST['tip_amount'] ) ) {
update_post_meta( $order_id, '_tip_amount', sanitize_text_field( $_POST['tip_amount'] ) );
}
}

Contribuer à WooCommerce Blocks

Si vous êtes à l’aise avec le développement open-source, vous pouvez contribuer au projet WooCommerce Blocks en proposant des améliorations ou en soumettant des pull requests pour faciliter l’ajout de nouvelles fonctionnalités et filtres.

Conclusion

L’absence actuelle de support pour ces filtres dans les blocs de commande peut être frustrante, mais des solutions temporaires existent pour maintenir la flexibilité des pages en attendant les mises à jour promises par WooCommerce.

En tant que développeurs, il est essentiel de rester informés des changements dans l’écosystème WordPress et WooCommerce. Vous pouvez également adapter vos méthodes de travail en conséquence. Nous espérons que cet article vous a aidé à comprendre la situation actuelle et à trouver des alternatives en attendant la prise en charge complète des filtres dans les blocs WooCommerce.