Comment utiliser WooCommerce Hooks - Un guide complet

Publié: 2022-05-03

Dans cet article, nous expliquerons comment vous pouvez utiliser les crochets WooCommerce pour étendre votre boutique WooCommerce en fonction de vos besoins.

Vous êtes-vous déjà demandé comment WordPress est devenu si grand ? Plus de 40% des sites Web mondiaux utilisent désormais WordPress comme CMS. Tout cela a été rendu possible par des crochets et des filtres à l'aide desquels les gens ont créé des milliers de plugins.

De temps en temps, vous pourriez entendre des gens dire que PHP va bientôt mourir, mais la part de WordPress continue de croître et WordPress est entièrement basé sur PHP. Eh bien, seul le temps nous le dira.

Si vous n'avez jamais développé de plugin WordPress, alors vous devez consulter ce guide car vous devez savoir comment créer un plugin WordPress avant de pouvoir utiliser ce guide.

Table des matières

Que sont les crochets ?

Il est possible de modifier ou d'ajouter du code dans WordPress sans modifier les fichiers principaux à l'aide de crochets.

WordPress et WooCommerce utilisent largement les crochets, qui sont des fonctions que les développeurs WordPress et WooCommerce peuvent personnaliser. Les crochets sont de deux sortes

  1. Actions : Ces types de crochets vous permettent d'exécuter du code personnalisé chaque fois qu'ils sont déclenchés.
  2. Filtres : les crochets de filtre vous permettent de manipuler et de renvoyer une valeur (par exemple, le prix d'un produit) lors de son passage dans certaines fonctions.

WooCommerce est un plugin WordPress qui a également été créé à l'aide d'actions et de crochets, cependant, chaque plugin peut également créer ses propres crochets et filtres que d'autres développeurs de plugins peuvent utiliser pour étendre davantage les fonctionnalités du plugin.

Crochets WooCommerce

Maintenant, dans ce didacticiel, nous expliquerons divers crochets WooCommerce, vous donnerons également des exemples visuels ainsi que des exemples de code. Initialement, notre code de plugin ressemble à

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); }

Au fur et à mesure que nous poursuivrons le didacticiel, nous continuerons d'ajouter du code à ce fichier.

Crochets de produits WooCommerce

Nous allons d'abord commencer par les crochets que vous pouvez utiliser sur les pages de produits, puis nous vous donnerons un exemple de code sur la façon d'utiliser woocommerce_before_single_product pour afficher quelque chose au-dessus de votre produit.

Crochets affichés en haut et en bas de la page Produit

  • woocommerce_before_main_content
  • woocommerce_after_main_content
crochets woocommerce

Crochets affichés au-dessus et au-dessous d'une description de produit

  • woocommerce_before_single_product_summary
  • woocommerce_after_single_product_summary

Crochets affichés en haut et en bas de la page Produit

  • woocommerce_before_single_product
  • woocommerce_after_single_product

Crochets affichés dans la description courte du produit

  • woocommerce_single_product_summary
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_share

Crochets affichés dans les commentaires

  • woocommerce_review_before
  • woocommerce_review_before_comment_meta
  • woocommerce_review_meta
  • woocommerce_review_before_comment_text
  • woocommerce_review_comment_text
  • woocommerce_review_after_comment_text

woocommerce_before_single_product

Supposons maintenant que vous souhaitiez afficher quelque chose en haut de votre page de produit unique, vous pouvez utiliser les crochets WooCommerce appelés woocommerce_before_single_product , notre code pour cela ressemblait à :

 add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

Vous pouvez maintenant voir dans l'image ci-dessous que hello world est imprimé en haut de l'image du produit

De même, vous pouvez utiliser d'autres crochets dans le tableau ci-dessous pour ajouter des informations sur la page du produit. Aspect actuel de notre fichier de plugin :

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberwp.cloud * Description: Manage multiple CyberPanel installations via WordPress. * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberwp.cloud * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

Panier Crochets WooCommerce

Voyons maintenant tous les crochets utilisés sur la page du panier, divisés en trois catégories pour votre commodité.

Crochets affichés avant la liste des produits dans le panier

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents

Crochets affichés après la liste des produits dans le panier

  • woocommerce_cart_coupon
  • woocommerce_cart_actions
  • woocommerce_after_cart_table
  • woocommerce_cart_collaterals
  • woocommerce_before_cart_totals

Hameçons affichés à la fin d'une commande

  • woocommerce_cart_totals_before_shipping
  • woocommerce_cart_totals_after_shipping
  • woocommerce_cart_totals_before_order_total
  • woocommerce_cart_totals_after_order_total
  • woocommerce_after_shipping_rate
  • woocommerce_before_shipping_calculator
  • woocommerce_proceed_to_checkout
  • woocommerce_after_cart_totals
  • woocommerce_after_cart

Et s'il n'y a pas de produits dans le panier, le crochet suivant sera utilisé

woocommerce_cart_is_empty

woocommerce_before_cart

Voyons comment nous pouvons utiliser le crochet woocommerce_before_cart pour afficher quelque chose avant la table du panier

Et l'extrait de code pour cela est

 add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

Et le code final ressemblera à ceci

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; } add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

De même, vous pouvez utiliser d'autres crochets dans votre code et vous pouvez faire presque n'importe quoi avec votre code.

Paiement - Crochets WooCommerce

La page de paiement est une page très importante et fonctionnelle dans une boutique WooCommerce. Plusieurs catégories de crochets utilisés sur les pages de paiement sont mentionnées ci-dessous.

Crochets utilisés avant le formulaire d'informations de contact de l'utilisateur

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form

Crochets utilisés pour définir le balisage des détails de facturation

  • woocommerce_after_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes

Crochets utilisés avant le récapitulatif du produit dans la commande

  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_after_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_shipping
  • woocommerce_review_order_before_order_total
  • woocommerce_review_order_after_order_total

Crochets affichés sous le bon de commande

  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form

Crochets de catégorie WooCommerce

Affichage du titre de la catégorie

woocommerce_archive_description

woocommerce_shop_loop

Il s'affiche avant la fiche Produit dans la liste.

woocommerce_before_shop_loop

Il s'affiche au-dessus de la liste des produits dans la catégorie.

woocommerce_after_shop_loop

Il est affiché sous la liste des produits dans la catégorie.

woocommerce_after_shop_loop_item

Il est affiché à la fin de chaque fiche Produit.

Crochets qui marquent en plus la fiche Produit dans la liste.

  • woocommerce_after_shop_loop_item_title
  • woocommerce_shop_loop_item_title
  • woocommerce_before_shop_loop_item_title

Conclusion

Nous avons fait de notre mieux pour vous donner une représentation visuelle de presque tous les crochets d'importation que vous pouvez utiliser pour étendre votre boutique WooCommerce.

En dehors de cela, nous avons donné deux exemples de code pratiques pour montrer à quel point il est facile d'utiliser ces crochets dans le code de votre plugin. Vous pouvez facilement utiliser ces crochets WooCommerce pour même ajouter des champs de paiement ou ajouter des zones de saisie pour collecter plus d'informations auprès des utilisateurs au cours de leur processus de commande.

Il y a des possibilités illimitées à votre disposition, si vous avez encore des questions, n'hésitez pas à les poser dans la boîte de commentaires ci-dessous.