La liste des hooks Woocommerce

Laisser un commentaire / Wooommerce, Wordpress
La liste des hooks Woocommerce

WooCommerce est un plugin de commerce électronique pour WordPress, qui permet aux utilisateurs de créer une boutique en ligne sur leur site WordPress existant. Il offre des fonctionnalités telles que la gestion des produits, des commandes et des paiements, ainsi que la possibilité d’intégrer des passerelles de paiement en ligne. Il est très populaire parmi les propriétaires de petites entreprises et les commerçants en ligne en raison de sa facilité d’utilisation et de sa flexibilité, parfois le propriétaire de site besoin de faire quelque modifications sur le fonctionnement de boutique, et pour éviter de perdre les modification avec une mise à jour de l’extension woocommerce ou toucher le core de l’extension, woocommerce offre plusieurs hooks pour adapté l’extension à vos besoin specifique. Et dans le reste de l’artcile on va voir la liste des hooks woocommerce et comment travailler avec ces hooks.

C’est quoi un hooks Woocommerce ?

WooCommerce utilise des “hooks” pour permettre aux développeurs de personnaliser le comportement et l’apparence de la boutique en ligne. Les hooks sont des points d’accroche ou des points d’ancrage dans le code, qui permettent aux développeurs d’insérer leur propre code à des endroits spécifiques de WooCommerce sans avoir à modifier directement le code de base du plugin. Il existe deux types de hooks dans WooCommerce : les actions et les filtres. Les actions permettent de déclencher des événements à des moments spécifiques dans l’exécution de WooCommerce, tandis que les filtres permettent de modifier les données avant qu’elles ne soient utilisées. et dans le reste de l’article on va voir la liste des hooks Woocommerce en details avec des exemples d’utilisation.

Comment ajouter les hooks WooCommerce?

Avant de commencer de lister les hooks avec des exemples voila comme ajouter les hooks woocommerce. Il y a plusieurs façons d’ajouter des hooks WooCommerce à votre site WordPress, voici quelques exemples:

  1. Utiliser un plugin de personnalisation de WooCommerce: Il existe des plugins dédiés à la personnalisation de WooCommerce qui vous permettent d’ajouter des hooks de manière simple et intuitive, sans avoir à écrire de code.
  2. Ajouter des hooks via un fichier functions.php: Vous pouvez ajouter des hooks WooCommerce à votre fichier functions.php de votre thème enfant, cela permet de les enregistrer de manière permanente et d’éviter les pertes lors des mises à jour.
  3. Utiliser un plugin de code personnalisé: Il existe des plugins qui permettent d’ajouter du code personnalisé en toute sécurité sur votre site WordPress, vous pouvez utiliser ces plugins pour ajouter vos hooks WooCommerce.

Il est important de noter qu’avant de modifier ou d’ajouter des choses dans les fichiers de votre site, il est préférable de faire une sauvegarde de votre site et de vérifier que les modifications que vous effectuez ne causent pas de conflits avec d’autres plugins ou thèmes.

La liste des hooks Woocommerce pour la page produit

Voici la liste des “hooks” (points d’accroche) le plus utiliser dans WooCommerce pour personnaliser les fonctionnalités de votre boutique en ligne :

  • woocommerce_before_single_product : exécuté avant le contenu de la page de produit
  • woocommerce_before_single_product_summary : exécuté avant le résumé du produit (image, titre, prix, etc.)
  • woocommerce_single_product_summary : exécuté pendant le résumé du produit
  • woocommerce_after_single_product_summary : exécuté après le résumé du produit
  • woocommerce_product_meta_start : exécuté avant les métadonnées du produit (catégories, étiquettes)
  • woocommerce_product_meta_end : exécuté après les métadonnées du produit
  • woocommerce_after_single_product : exécuté après le contenu de la page de produit
  • woocommerce_before_add_to_cart_form : exécuté avant le formulaire d’ajout au panier
  • woocommerce_after_add_to_cart_form : exécuté après le formulaire d’ajout au panier
  • woocommerce_before_add_to_cart_button : exécuté avant le bouton d’ajout au panier
  • woocommerce_after_add_to_cart_button : exécuté après le bouton d’ajout au panier

Exemples de code des hooks Woocommerce pour page produit

woocommerce_before_single_product 

function my_custom_content_before_single_product() {
    echo '<div class="custom-content">';
}
add_action( 'woocommerce_before_single_product', 'my_custom_content_before_single_product' );

Cela ajoutera un élément div avec la classe “custom-content” avant le contenu de la page de produit.

woocommerce_before_single_product_summary 

function my_custom_content_before_summary() {
    echo '<div class="custom-summary-content">';
}
add_action( 'woocommerce_before_single_product_summary', 'my_custom_content_before_summary' );

Cela ajoutera un élément div avec la classe “custom-summary-content” avant le résumé du produit (image, titre, prix, etc.)

woocommerce_single_product_summary 

function my_custom_summary() {
    echo '<div class="custom-summary"> Mon contenu custom</div>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_summary' );

function my_custom_summary() { echo ‘<div class=”custom-summary”> Mon contenu custom</div>’; } add_action( ‘woocommerce_single_product_summary’, ‘my_custom_summary’ );

woocommerce_after_single_product_summary 

function my_custom_content_after_summary() {
    echo '&lt;/div>';
}
add_action( 'woocommerce_after_single_product_summary', 'my_custom_content_after_summary' );

Cela fermera l’élément div ouvert avant le résumé du produit

woocommerce_product_meta_start 

function my_custom_meta_start() {
    echo '<div class="custom-meta">';
}
add_action( 'woocommerce_product_meta_start', 'my_custom_meta_start' );

Cela ajoutera un élément div avec la classe “custom-meta” avant les métadonnées du produit (catégories, étiquettes)

woocommerce_product_meta_end 

function my_custom_meta_end() {
    echo '</div>';
}
add_action( 'woocommerce_product_meta_end', 'my_custom_meta_end' );

Cela fermera l’élément div ouvert avant les métadonnées du produit

woocommerce_after_single_product 

function my_custom_content_after_single_product() {
    echo '</div>';
}
add_action( 'woocommerce_after_single_product', 'my_custom_content_after_single_product'

woocommerce_before_add_to_cart_form 

function my_custom_content_before_add_to_cart() {
    echo '<div class="custom-add-to-cart-content"> Mon contenu custom avant le formulaire d'ajout au panier </div>';
}
add_action( 'woocommerce_before_add_to_cart_form', 'my_custom_content_before_add_to_cart' );

Cela ajoutera un élément div avec le contenu “Mon contenu custom avant le formulaire d’ajout au panier” avant le formulaire d’ajout au panier.

woocommerce_after_add_to_cart_form 

function my_custom_content_after_add_to_cart() {
    echo '<div class="custom-add-to-cart-content"> Mon contenu custom après le formulaire d'ajout au panier </div>';
}
add_action( 'woocommerce_after_add_to_cart_form', 'my_custom_content_after_add_to_cart' );

Cela ajoutera un élément div avec le contenu “Mon contenu custom après le formulaire d’ajout au panier” après le formulaire d’ajout au panier.

woocommerce_before_add_to_cart_button 

function my_custom_content_before_add_to_cart_button() {
    echo '<div class="custom-add-to-cart-button-content"> Mon contenu custom avant le bouton d'ajout au panier </div>';
}
add_action( 'woocommerce_before_add_to_cart_button', 'my_custom_content_before_add_to_cart_button' );

Cela ajoutera un élément div avec le contenu “Mon contenu custom avant le bouton d’ajout au panier” avant le bouton d’ajout au panier.

woocommerce_after_add_to_cart_button 

function my_custom_content_after_add_to_cart_button() {
    echo '<div class="custom-add-to-cart-button-content"> Mon contenu custom après le bouton d'ajout au panier </div>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'my_custom_content_after_add_to_cart_button' );

Cela ajoutera un élément div avec le contenu “Mon contenu custom après le bouton d’ajout au panier” après le bouton d’ajout au panier.

Liste complémentaire des hooks Woocommerce de page produit

  • woocommerce_before_single_product_summary_sale_flash: exécuté avant l’affichage de l’étiquette de promotion
  • woocommerce_single_product_summary_single_title: exécuté pendant l’affichage du titre du produit
  • woocommerce_single_product_summary_single_price: exécuté pendant l’affichage du prix du produit
  • woocommerce_single_product_summary_single_excerpt: exécuté pendant l’affichage de l’extrait du produit
  • woocommerce_single_product_summary_single_meta: exécuté pendant l’affichage des métadonnées du produit
  • woocommerce_single_product_summary_single_sharing: exécuté pendant l’affichage des boutons de partage
  • woocommerce_single_product_summary_single_add_to_cart: exécuté pendant l’affichage du bouton d’ajout au panier
  • woocommerce_single_product_summary_single_data_tabs: exécuté pendant l’affichage des onglets de données
  • woocommerce_single_product_summary_single_related: exécuté pendant l’affichage des produits connexes
  • woocommerce_single_product_summary_single_reviews: exécuté pendant l’affichage des avis clients
  • woocommerce_after_single_product_summary_data_tabs: exécuté après l’affichage des onglets de données
image explique les emplacement de chaque hook dans la page produit woocommerce
Image explique les emplacements de chaque hook dans la page produit Woocommerce.

La liste des hooks Woocommerce de la page catégorie

  • woocommerce_before_category_loop : Cet hook est appelé avant le début de la boucle pour les catégories.
  • woocommerce_after_category_loop : Cet hook est appelé après la fin de la boucle pour les catégories.
  • woocommerce_before_shop_loop : Cet hook est appelé avant le début de la boucle pour les produits sur la page catégories.
  • woocommerce_after_shop_loop : Cet hook est appelé après la fin de la boucle pour les produits sur la page catégories.
  • woocommerce_no_products_found : Cet hook est appelé lorsqu’aucun produit n’est trouvé pour une catégorie donnée.
  • woocommerce_before_subcategory_loop : Cet hook est appelé avant le début de la boucle pour les sous-catégories.
  • woocommerce_after_subcategory_loop : Cet hook est appelé après la fin de la boucle pour les sous-catégories.
  • woocommerce_before_subcategory : Cet hook est appelé avant l’affichage d’une sous-catégorie.
  • woocommerce_after_subcategory : Cet hook est appelé après l’affichage d’une sous-catégorie.
  • woocommerce_before_subcategory_title : Cet hook est appelé avant l’affichage du titre d’une sous-catégorie.
  • woocommerce_subcategory_title : Cet hook est appelé lors de l’affichage du titre d’une sous-catégorie.
  • woocommerce_after_subcategory_title : Cet hook est appelé après l’affichage du titre d’une sous-catégorie.
  • woocommerce_before_category_title : Cet hook est appelé avant l’affichage du titre de la catégorie.
  • woocommerce_category_title : Cet hook est appelé lors de l’affichage du titre de la catégorie.
  • woocommerce_after_category_title : Cet hook est appelé après l’affichage du titre de la catégorie.
  • woocommerce_after_category : Cet hook est appelé après l’affichage de la catégorie.
  • woocommerce_before_main_content : Cet hook est appelé avant le contenu principal de la page catégories.
  • woocommerce_after_main_content : Cet hook est appelé après le contenu principal de la page catégories.
  • woocommerce_after_category : Cet hook est appelé après l’affichage de la catégorie.
  • woocommerce_before_main_content : Cet hook est appelé avant le contenu principal de la page catégories.
  • woocommerce_after_main_content : Cet hook est appelé après le contenu principal de la page catégories.

Exemples hooks woocommerce de la page catégorie

woocommerce_before_shop_loop

function custom_before_shop_loop() {
    echo '<div class="custom-before-shop-loop">';
}
add_action( 'woocommerce_before_shop_loop', 'custom_before_shop_loop' );

woocommerce_before_shop_loop_item

function custom_before_shop_loop_item() {
    echo '<div class="custom-before-shop-loop-item">';
}
add_action( 'woocommerce_before_shop_loop_item', 'custom_before_shop_loop_item' );

woocommerce_before_shop_loop_item_title

function custom_before_shop_loop_item_title() {
    echo '<div class="custom-before-shop-loop-item-title">';
}
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_before_shop_loop_item_title' );

woocommerce_shop_loop_item_title

function custom_shop_loop_item_title() {
    echo '<h2 class="custom-shop-loop-item-title">' . get_the_title() . '</h2>';
}
add_action( 'woocommerce_shop_loop_item_title', 'custom_shop_loop_item_title' );

woocommerce_after_shop_loop_item_title

function custom_after_shop_loop_item_title() {
    echo '</div>';
}
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_after_shop_loop_item_title' );

woocommerce_after_shop_loop_item

function custom_after_shop_loop_item() {
    echo '</div>';
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_after_shop_loop_item' );

woocommerce_after_shop_loop

function custom_after_shop_loop() {
    echo '</div>';
}
add_action( 'woocommerce_after_shop_loop', 'custom_after_shop_loop' );

Notez que ces exemples sont destinés à donner une idée générale de l’utilisation des hooks dans WooCommerce. Les actions à effectuer peuvent varier en fonction de vos besoins et de vos souhaits pour la page catégories.

La liste des hooks woocommerce de la page checkout

woocommerce_before_checkout_form

function custom_message_before_cart() {
    echo '<p>Vous pouvez modifier les quantités de vos produits ou supprimer des articles de votre panier ci-dessous.</p>';
}
add_action( 'woocommerce_before_cart', 'custom_message_before_cart' );

woocommerce_before_cart_table

function custom_message_before_cart_table() {
    echo '&lt;p>Les articles de votre panier sont affichés ci-dessous :&lt;/p>';
}
add_action( 'woocommerce_before_cart_table', 'custom_message_before_cart_table' );

woocommerce_after_cart_table

function custom_message_after_cart_table() {
    echo '<p>Vous pouvez maintenant procéder à l\'enregistrement ou continuer vos achats.</p>';
}
add_action( 'woocommerce_after_cart_table', 'custom_message_after_cart_table' );

woocommerce_before_cart_totals

function custom_message_before_cart_totals() {
    echo '<p>Vérifiez les détails de votre commande ci-dessous :</p>';
}
add_action( 'woocommerce_before_cart_totals', 'custom_message_before_cart_totals' );

woocommerce_after_cart_totals

function custom_message_after_cart_totals() {
    echo '<p>Vous êtes maintenant prêt à procéder à l\'enregistrement.</p>';
}
add_action( 'woocommerce_after_cart_totals', 'custom_message_after_cart_totals' );

woocommerce_before_checkout_billing_form

function custom_message_before_checkout_billing_form() {
    echo '<p>Veuillez remplir les informations de facturation ci-dessous :</p>';
}
add_action( 'woocommerce_before_checkout_billing_form', 'custom_message_before_checkout_billing_form' );

woocommerce_before_checkout_shipping_form

function custom_message_before_checkout_shipping_form() {
    echo '<p>Veuillez remplir les informations d\'expédition ci-dessous :</p>';
}
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_message_before_checkout_shipping_form' );

woocommerce_before_checkout_registration_form

function custom_message_before_checkout_registration_form() {
    echo '<p>Veuillez remplir les informations d\'expédition ci-dessous :</p>';
}
add_action( 'woocommerce_before_checkout_registration_form', 'custom_message_before_checkout_registration_form' );

Liste des hooks pour la page panier dans WooCommerce

  • woocommerce_before_cart : Cet hook est appelé avant l’affichage de la page panier.
  • woocommerce_after_cart : Cet hook est appelé après l’affichage de la page panier.
  • woocommerce_before_cart_table : Cet hook est appelé avant l’affichage du tableau des produits dans le panier.
  • woocommerce_after_cart_table : Cet hook est appelé après l’affichage du tableau des produits dans le panier.
  • woocommerce_before_cart_contents : Cet hook est appelé avant l’affichage des produits dans le panier.
  • woocommerce_cart_contents : Cet hook est appelé lors de l’affichage des produits dans le panier.
  • woocommerce_after_cart_contents : Cet hook est appelé après l’affichage des produits dans le panier.
  • woocommerce_before_cart_totals : Cet hook est appelé avant l’affichage des totaux du panier.
  • woocommerce_cart_totals_before_shipping : Cet hook est appelé avant l’affichage du total de livraison.
  • woocommerce_after_cart_totals : Cet hook est appelé après l’affichage des totaux du panier.
  • woocommerce_proceed_to_checkout : Cet hook est appelé lors de l’affichage du bouton “Procéder au paiement”.

Ces hooks peuvent être utilisés pour ajouter du contenu ou personnaliser l’affichage de la page panier dans WooCommerce. Il est important de vérifier la documentation officielle pour obtenir la liste complète des hooks disponibles pour la page panier.

Autre regroupement des hooks woocmmerce

  • hooks Globale
    • woocommerce_breadcrumb
    • woocommerce_no_products_found
    • pre_get_product_search_formCart hooks
  • Avant la liste des produits:
    • woocommerce_before_cart
    • woocommerce_cart_contents
    • woocommerce_before_cart_table
    • woocommerce_before_cart_contents
    • woocommerce_after_cart_contents
  • Après liste produits
    • woocommerce_before_cart_totals
    • woocommerce_cart_actions
    • woocommerce_cart_coupon
    • woocommerce_cart_collaterals
    • woocommerce_after_cart_table
  • A la fin d’une commande:
    • woocommerce_cart_coupon
    • woocommerce_cart_actions
    • woocommerce_cart_collaterals
    • woocommerce_after_cart_table
    • woocommerce_before_cart_totals
  • Pnaier vide:
    • woocommerce_cart_is_emptyCheckout hooks
  • Avant le formulaire de contact:
    • woocommerce_checkout_billing
    • woocommerce_before_checkout_form
    • woocommerce_before_checkout_billing_form
    • woocommerce_checkout_before_customer_details
  • Détails facturation
    • woocommerce_before_order_notes
    • woocommerce_after_order_notes
    • woocommerce_checkout_shipping
    • woocommerce_after_checkout_billing_form
    • woocommerce_checkout_after_order_review
  • Avant le récapitulatif du produit dans la commande:
    • woocommerce_review_order_before_shipping
    • woocommerce_review_order_after_shipping
    • woocommerce_checkout_before_order_review
    • woocommerce_review_order_before_order_total
    • woocommerce_review_order_after_order_total
    • woocommerce_review_order_before_cart_contents
    • woocommerce_review_order_after_cart_contents
    • woocommerce_checkout_after_customer_details
  • Ci-dessous le bon de commande:
    • woocommerce_after_checkout_form
    • woocommerce_checkout_order_review
    • woocommerce_review_order_before_submit
    • woocommerce_review_order_after_submit
    • woocommerce_review_order_before_payment
    • woocommerce_review_order_after_payment
  • Dans la liste des produits d’une commande:
    • woocommerce_thankyou
    • woocommerce_order_items_table
    • woocommerce_order_item_meta_end
    • woocommerce_order_item_meta_start
    • woocommerce_order_details_after_order_tableProduct hooks
  • En haut et en bas de la page produit:
    • woocommerce_before_main_content
    • woocommerce_after_main_content
    • woocommerce_before_single_product
    • woocommerce_after_single_product
  • Au-dessus et en dessous de la description du produit :
    • woocommerce_before_single_product_summary
    • woocommerce_after_single_product_summary
  • En bref description du produit:
    • woocommerce_share
    • woocommerce_product_meta_end
    • woocommerce_product_meta_start
    • woocommerce_single_product_summary
  • Dans les commentaires :
    • woocommerce_review_meta
    • woocommerce_review_before
    • woocommerce_review_comment_text
    • woocommerce_review_before_comment_text
    • woocommerce_review_after_comment_text
    • woocommerce_review_before_comment_meta
  • hooks catégorie:
    • woocommerce_shop_loop
    • woocommerce_before_shop_loop
    • woocommerce_after_shop_loop
    • woocommerce_after_shop_loop_item
    • woocommerce_shop_loop_item_title
    • woocommerce_before_shop_loop_item_title
    • woocommerce_after_shop_loop_item_title
    • woocommerce_archive_description
  • hooks mon compte:
    • woocommerce_account_content
    • woocommerce_account_navigation
    • woocommerce_before_account_navigation
    • woocommerce_after_account_navigation
    • woocommerce_before_edit_account_address_form
    • woocommerce_after_edit_account_address_form
    • woocommerce_before_my_account
    • woocommerce_after_my_account
    • woocommerce_account_dashboard
  • Mini cart hooks:
    • woocommerce_before_mini_cart
    • woocommerce_after_mini_cart
    • woocommerce_mini_cart_contents
    • woocommerce_before_mini_cart_contents
    • woocommerce_widget_shopping_cart_buttons
    • woocommerce_widget_shopping_cart_before_buttons
  • Email hooks:
    • woocommerce_email_footer
    • woocommerce_email_header
    • woocommerce_email_order_meta
    • woocommerce_email_order_details
    • woocommerce_email_customer_details
    • woocommerce_email_before_order_table
    • woocommerce_email_after_order_table
  • Autre hooks utilies:
    • woocommerce_auth_page_header
    • woocommerce_auth_page_footer
    • woocommerce_available_download_start
    • woocommerce_available_download_end
    • woocommerce_before_available_downloads
    • woocommerce_after_available_downloads
    • woocommerce_before_account_downloads
    • woocommerce_after_account_downloads
    • woocommerce_before_account_orders
    • woocommerce_after_account_orders
    • woocommerce_before_account_orders_pagination
    • woocommerce_cart_has_errors
    • woocommerce_edit_account_form
    • woocommerce_edit_account_form_start
    • woocommerce_edit_account_form_end
    • woocommerce_before_edit_account_form
    • woocommerce_after_edit_account_form
    • woocommerce_before_account_payment_methods
    • woocommerce_after_account_payment_methods
    • woocommerce_before_checkout_shipping_form
    • woocommerce_after_checkout_shipping_form
    • woocommerce_before_checkout_registration_form
    • woocommerce_after_checkout_registration_form
    • woocommerce_checkout_before_terms_and_conditions
    • woocommerce_checkout_after_terms_and_conditions
    • woocommerce_lostpassword_form
    • woocommerce_order_details_after_customer_details
    • woocommerce_pay_order_before_submit
    • woocommerce_pay_order_after_submit
    • woocommerce_product_thumbnails
    • woocommerce_resetpassword_form
    • woocommerce_shop_loop_subcategory_title
    • woocommerce_before_subcategory
    • woocommerce_after_subcategory
    • woocommerce_before_subcategory_title
    • woocommerce_after_subcategory_title
    • woocommerce_view_order

Conclusion

Il existe de nombreux autres hooks disponibles dans WooCommerce, si vous n’avez pas trouvé le hook recherché dans l’article, essayez de consulter la documentation officielle ou de se renseigner auprès d’un développeur expérimenté pour en savoir plus sur leur utilisation.

Si vous avez n’importe quelle question vous pouvez laisser une commentaire ou me contacter via la page contact ou via le chat.

Voir aussi notre service de fixation des bugs wordpress.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Contactez moi

Contatez moi via le chat en bas de page ou via le formulaire, je suis disponible la plupart de temps sur le site, don vous avez un grande chance de vous repondre rapidement, 

Panier