Les Hooks WooCommerce pour la modification du panier semblent ne plus fonctionner

Les Hooks WooCommerce pour la modification du panier semblent ne plus fonctionner

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, qui a introduit des blocs pour la page de panier et de commande. Bien que ces blocs modernisent l’expérience utilisateur, ils apportent également des changements significatifs qui peuvent poser des défis pour les développeurs.

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

L’un des problèmes majeurs observés avec cette migration est la perte de compatibilité avec les filtres et hooks utilisés 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, puisque nous avions réalisé cette tâche de nombreuses fois dans le passé. 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 et qui 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, ce qui 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 utilisés par les développeurs pour personnaliser les pages. Cependant, ils ont assuré que des solutions sont en cours de développement et que la compatibilité avec les filtres sera réintroduite 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 via les paramètres ou en utilisant des hooks pour forcer le retour à l’ancienne interface. 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 sur les nouvelles pages de panier et de commande basées sur les blocs.

3. Personnaliser via des blocs personnalisés : Une autre approche consiste à créer des blocs personnalisés pour ajouter les fonctionnalités manquantes. Cela demande une maîtrise de la création de blocs dans WordPress, mais offre une solution pérenne avec les nouvelles mises à jour de WooCommerce.

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

Pour contourner le problème des filtres WooCommerce qui ne fonctionnent plus avec les nouveaux blocs de la page de panier et de commande, vous pouvez utiliser des shortcodes WooCommerce comme alternative. Ces shortcodes fonctionnent encore avec les filtres et permettent d’ajouter des champs personnalisés tout en contournant les limitations actuelles des blocs. Voici comment procéder en utilisant les shortcodes WooCommerce pour la page de commande et de paiement dans le thème.

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

2. 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'] ) );
}
}

3. Modifier le thème de la page de commande et de paiement

Pour utiliser ce shortcode dans votre thème, vous devez soit créer une nouvelle page WooCommerce personnalisée, soit modifier celle existante pour inclure le shortcode et conserver le support des filtres. Vous pouvez modifier la page de commande dans votre thème enfant en créant un modèle spécifique pour la page de paiement.

• Étape pour créer un modèle de page personnalisé :

1. Accédez à votre dossier de thème, puis dans le dossier de WooCommerce (/woocommerce/checkout/).
2. Si le dossier checkout n’existe pas, créez-le.
3. Ajoutez un fichier appelé checkout-custom.php (ou un autre nom selon votre besoin).
4. Utilisez le shortcode WooCommerce dans ce fichier pour afficher la page de commande classique :

<?php
/**
* Template Name: Checkout Custom
*/
get_header();
?>

<div class="woocommerce">
<?php echo do_shortcode('[woocommerce_checkout]'); ?>
</div>

<?php get_footer(); ?>

5. Appliquez ce modèle à une page dans votre admin WordPress pour remplacer la page de checkout classique.

4. Finaliser en désactivant les blocs WooCommerce (si nécessaire)

Si vous souhaitez désactiver les blocs WooCommerce pour éviter les conflits avec le shortcode, voici comment le faire :

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

Ce code désactive les blocs de checkout et de panier et permet de revenir à la version classique basée sur les shortcodes, tout en garantissant que les filtres fonctionneront correctement.

Conclusion

En attendant que WooCommerce intègre pleinement le support des filtres dans ses nouveaux blocs, l’utilisation des shortcodes reste une solution fiable. Non seulement cela permet de restaurer la compatibilité avec les hooks et filtres traditionnels, mais cela vous donne également le temps de vous adapter à la nouvelle architecture de WooCommerce sans perdre en flexibilité dans vos personnalisations.

Conclusion

Bien que les blocs WooCommerce offrent une nouvelle expérience plus moderne et optimisée pour les utilisateurs, ils représentent également un défi pour les développeurs qui ont été habitués à personnaliser la page de panier et de commande via des hooks et filtres. 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, et d’adapter nos 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.