Les hooks et les filtres de WooCommerce : fonctionnalités et différences
Lors du développement personnalisé de WooCommerce, il est essentiel de comprendre ses deux principaux mécanismes d’extension : les hooks et les filters. Ceux-ci font partie intégrante de l’architecture de base de WordPress, mais ils servent des objectifs différents.
HooksLes “ hooks ” sont des interfaces prévues par WooCommerce lors de l’exécution de certaines étapes du cycle de vie du code, qui vous permettent d’ajouter votre propre code pour exécuter de nouvelles actions ou fonctionnalités. Il existe deux types de hooks :Actions(Action) etFilters(Filtres.) En bref, les crochets d’action sont utilisés pour “faire quelque chose” ; ils ne retournent aucune valeur et offrent simplement l’occasion d’exécuter du code personnalisé à un moment précis. Par exemple, pour ajouter une bannière après le chargement de la page du panier d’achat. Les crochets de filtre, quant à eux, sont utilisés pour “modifier quelque chose” : ils reçoivent une valeur, vous permettent de la modifier, et vous devez ensuite retourner la valeur modifiée. Par exemple, pour modifier le format d'affichage du prix d’un produit.
FiltersUn “ filtre ” est un type de “ crochet ”, mais en raison de sa signification spécifique (“ modifier les données et les retourner ”), il est souvent mentionné en même temps que les « crochets d’action » lors des discussions. Une erreur courante consiste à utiliser un crochet d’action dans le but de retourner une valeur, ce qui peut entraîner des problèmes dans le code. Identifier clairement si votre besoin est d’« exécuter une action » ou de « modifier des données » est la première étape pour choisir l’outil approprié.
Lectures recommandées Comprendre en profondeur les hooks et les filtres de WordPress : de l’initiation à la programmation pratique.。
Les interfaces de hook et de filtre essentielles
L’utilisation des crochets et des filtres repose principalement sur plusieurs fonctions de base fournies par WordPress. Maîtriser ces fonctions est essentiel pour toute personnalisation.
La fonction principale des hooks d'action
La fonction la plus utilisée est…add_action()Cette fonction permet de “ souscrire ” votre fonction personnalisée à un crochet d'action spécifique. Sa syntaxe de base comprend le nom du crochet, la fonction de rappel (callback), la priorité, ainsi que le nombre de paramètres acceptés. La priorité détermine l'ordre d'exécution lorsque plusieurs fonctions sont attachées au même crochet : plus le numéro est petit, plus la priorité est élevée.
add_action(‘woocommerce_before_add_to_cart_button’, ‘my_custom_message’, 10, 0 );
function my_custom_message() {
echo ‘<p>Vérifiez les spécifications avant l’achat !</p>’;
}Le code ci-dessus affiche un message personnalisé avant le bouton “ Ajouter au panier ”.
La fonction principale des hooks de filtrage
Par conséquent, pour modifier les données, il est nécessaire d’utiliser…add_filter()Fonction. Sa structure est similaire à celle…add_action()De manière similaire, mais votre fonction de rappel (callback) doit recevoir une valeur en entrée et en retourner une autre.
add_filter( ‘woocommerce_currency_symbol’, ‘change_currency_symbol’, 10, 2 );
function change_currency_symbol( $currency_symbol, $currency ) {
if ( $currency == ‘USD’ ) {
$currency_symbol = ‘US$’;
}
return $currency_symbol;
}Dans cet exemple, le symbole du dollar américain est modifié de “$” en “US$”.
Lectures recommandées Améliorer les conversions dans le commerce électronique : un regard approfondi sur les stratégies d'optimisation des produits sur la page de WooCommerce。
Cas pratique : Personnalisation des pages de produits
La page du produit est une partie essentielle de WooCommerce, et son layout ainsi que la manière dont les informations y sont affichées peuvent être considérablement modifiés à l’aide des hooks. Les hooks suivants vous aideront à identifier précisément les points que vous souhaitez modifier.
Ajouter du contenu avant la zone “ Ajouter au panier ”.
woocommerce_before_add_to_cart_formetwoocommerce_before_add_to_cart_buttonIl s’agit de deux hooks (mécanismes d’action) fréquemment utilisés. Le premier s’exécute avant tout le formulaire et est idéal pour ajouter des bannières ou des blocs d’avertissement ; le second s’exécute entre les champs de saisie de quantités et les boutons, et est parfait pour y inclure des explications succinctes ou des cases à cocher.
add_action( ‘woocommerce_before_add_to_cart_button’, ‘add_product_notes_field’ );
function add_product_notes_field() {
echo ‘<div class="“product-notes”"><label>Demandes de personnalisation :</label><textarea name="“customer_notes”"></textarea></div>’;
}Modifier l'affichage du résumé du produit.
La brève description du produit est fournie par…woocommerce_short_descriptionContrôle des filtres : Vous pouvez l’utiliser pour modifier le contenu des descriptions, par exemple pour ajouter un texte commun à la fin de toutes les descriptions.
add_filter( ‘woocommerce_short_description’, ‘append_to_short_description’ );
function append_to_short_description( $desc ) {
$desc .= ‘<p><em>Ce produit est éligible à un retour sans raison dans les 7 jours.</em></p>’;
return $desc;
}Cas pratique : Personnalisation du panier d’achat et du processus de règlement
Le panier d’achat et la page de règlement sont des éléments clés du processus de conversion ; leur optimisation peut améliorer directement l’expérience utilisateur et le taux de finalisation des commandes.
Ajouter des informations générales après le tableau du panier de courses.
woocommerce_after_cart_tableLes « hooks » vous permettent d’insérer du contenu après le tableau des articles dans le panier d’achat et avant le résumé du panier, par exemple des conseils concernant des codes promotionnels ou des informations sur les frais de livraison.
add_action( ‘woocommerce_after_cart_table’, ‘add_cart_promotion_notice’ );
function add_cart_promotion_notice() {
echo ‘<div class="“cart-promotion”">Achats de plus de 500 yuans, livraison gratuite !</div>’;
}Modifier les champs de règlementation.
Le système de champs de paiement de WooCommerce est très configurable et fait largement usage de filtres. Par exemple, pour modifier l’étiquette et le placeholder du champ “ Adresse 2 ”, vous pouvez utiliser…woocommerce_default_address_fieldsOu, pour être plus précis…woocommerce_billing_fieldsFiltre.
Lectures recommandées WooCommerce Tutorial : Construire un site de commerce électronique WordPress puissant à partir de zéro !。
add_filter( ‘woocommerce_default_address_fields’, ‘modify_address_2_field’ );
function modify_address_2_field( $fields ) {
if ( isset( $fields[‘address_2’] ) ) {
$fields[‘address_2’][‘label’] = ‘公寓、套房、单元等（可选）’;
$fields[‘address_2’][‘placeholder’] = ‘可不填’;
}
return $fields;
}De cette manière, vous pouvez cacher, réorganiser, renommer ou ajouter n’importe quel champ de règlementation afin qu’il corresponde parfaitement à vos besoins commerciaux.
résumés
La personnalisation via les hooks et les filtres de WooCommerce vous permet de modifier en profondeur chaque détail d’un site e-commerce sans avoir à modifier le code source principal. Commencez par comprendre la différence fondamentale entre les actions (actions) et les filtres (filters), puis maîtrisez leur utilisation.add_action()etadd_filter()Ces deux fonctions clés, combinées à leur application dans des zones essentielles telles que la page du produit, le panier d’achat et le processus de paiement, vous permettront de construire progressivement un magasin en ligne hautement personnalisé et puissant. N’oubliez pas d’ajouter toujours le code personnalisé dans les sous-thèmes (sub-themes) correspondants.functions.phpCela peut être réalisé à l’intérieur du fichier ou à l’aide de plugins personnalisés, et c’est la meilleure pratique pour garantir la sécurité des mises à jour.
FAQ Foire aux questions
Où devrais-je placer mon code personnalisé (####) ?
La méthode la plus sûre et la plus recommandée consiste à le placer dans un sous-thème du thème que vous utilisez actuellement.functions.phpDans le fichier.
Cela permet de garantir que votre code personnalisé ne soit pas supprimé lors des mises à jour du thème. Si vous n’utilisez pas de sous-thèmes, vous pouvez également créer un plugin de fonctionnalité personnalisée spécialement conçu pour héberger ce code.
Comment trouver le crochet ou le filtre spécifique dont j’ai besoin ?
Vous pouvez consulter les documents officiels pour les développeurs de WooCommerce, qui contiennent un index complet des hooks.
De plus, dans l’éditeur de code du back-end de WordPress, ou en utilisant des plugins tels que “ Simply Show Hooks ”, il est possible de visualiser directement sur la page front-end tous les hooks disponibles. Cela est très utile pour localiser rapidement les fonctionnalités nécessaires.
J’ai utilisé des « hooks » (des mécanismes de liaison entre des éléments de code), mais le code n’a pas fonctionné. Comment puis-je diagnostiquer le problème ?
Tout d’abord, vérifiez si votre code contient des erreurs de syntaxe, car celles-ci peuvent provoquer l’échec de la compilation par PHP. Assurez-vous que la fonction de rappel (callback) est bien définie et que…add_actionOuadd_filterLa priorité et le nombre de paramètres sont corrects.
Deuxièmement, vérifiez que le nom du crochet (hook) est correct et qu’il s’exécute bien à l’endroit de la page où vous l’attendez. Utilisez…error_logOuvar_dumpEffectuer des sorties de débogage simples peut vous aider à déterminer si une fonction a été appelée (c’est-à-dire si elle a été exécutée).
Quelle est la différence entre modifier les fichiers de template de WooCommerce et utiliser des hooks ?
Supprimer directement les fichiers de template de WooCommerce (en les copiant dans le répertoire de votre thème) est une méthode simple pour modifier l’apparence et la structure du site, mais elle est principalement utilisée pour modifier la structure de l’affichage HTML.
Les hooks (ou crochets) sont plus adaptés à l’ajout de nouvelles fonctionnalités, à la modification des données ou à l’injection de contenu à des emplacements spécifiques. Ils offrent une plus grande flexibilité et une meilleure maintenabilité, en particulier lors de l’extension des fonctionnalités logiques, et devraient donc être privilégiés. La couverture des templates (modèles) et la technologie des hooks sont souvent utilisées conjointement pour obtenir les meilleurs résultats.
Quelle est la suite, quelle est la suite ?
Lecture approfondie et connaissances pratiques
Les articles suivants sont liés au sujet de cet article et peuvent faire l'objet d'une lecture plus approfondie. Il est souvent préférable de commencer par l'article qui se rapproche le plus de votre problème actuel, puis d'étendre progressivement la lecture aux sujets environnants.
- Découvrez en profondeur WooCommerce : le guide ultime pour une solution d'e-commerce complète, allant de la création à l'optimisation de votre site web.
- Analyse complète de WooCommerce : Construire un site e-commerce WordPress puissant à partir de zéro
- 10 astuces pratiques pour améliorer le taux de conversion de votre site WooCommerce
- Guide complet pour la personnalisation des modèles de pages de produits sur WooCommerce
- Guide d’optimisation des sites WooCommerce compatibles avec les règles SEO : Les stratégies clés pour améliorer les taux de conversion
Français