27+ crochets de paiement WooCommerce illustrés

Dans cet article, vous apprendrez à utiliser les hooks de paiement dans WooCommerce. Tenez-vous en à la fin, car nous examinerons les principaux crochets et vous donnerons des exemples de ce que vous pouvez faire avec eux. Ils vous aident à personnaliser la page de paiement pour augmenter vos taux de conversion.

Crochets WooCommerce

Les crochets sont des fonctions puissantes qui vous permettent de modifier ou d'ajouter du code sans modifier les fichiers principaux. Ils offrent une grande flexibilité et les développeurs les utilisent pour modifier les fonctionnalités par défaut de WooCommerce.

A noter qu'il existe deux types de crochets différents :

• Crochets d'action - Ils vous permettent d'ajouter du code personnalisé pour effectuer certaines actions lorsqu'un événement se produit.
• Crochets de filtre - Ils modifient le comportement d'une variable ou d'une fonction existante.

Crochets de paiement WooCommerce

Les crochets aident les développeurs à créer des solutions personnalisées de manière pratique et flexible. Les crochets de paiement sont un type parmi plusieurs crochets pris en charge par WooCommerce. Les crochets de paiement peuvent être utilisés pour ajouter du contenu avant les champs de facturation, appliquer une logique pour augmenter le prix ou limiter les utilisateurs par rôle, avant l'examen de la commande ou après le formulaire de paiement, et bien d'autres.

Vous devez noter que les hooks WooCommerce fonctionnent exactement comme les hooks natifs de WordPress. Avant de commencer, je vous recommande fortement de créer un thème enfant afin que vos modifications ne soient pas perdues.

La page de paiement WooCommerce a les crochets suivants :

1. woocommerce_before_checkout_form

Le crochet woocommerce_before_checkout_form est défini avant le formulaire de paiement. Il est placé au-dessus du champ du coupon sur la page de paiement.

 add_action( 'woocommerce_before_checkout_form', 'njengah_before_checkout_form', 10 );
		


fonction njengah_before_checkout_form(){

            echo '<h2>woocommerce_before_checkout_form</h2>' ;

} 

2. woocommerce_checkout_before_customer_details

Le crochet woocommerce_checkout_before_customer_details est défini dans le formulaire de paiement juste avant les détails du client.

 add_action( 'woocommerce_checkout_before_customer_details', 'njengah_checkout_before_customer_details', 10 );

fonction njengah_checkout_before_customer_details(){

echo '<h2>woocommerce_checkout_before_customer_details</h2>' ;

} 

3. woocommerce_checkout_billing

Le woocommerce_checkout_billing est un nouveau crochet ajouté à la page de paiement. Le modèle de formulaire de facturation sur la page de paiement est inclus à l'aide de ce crochet.

 add_action('woocommerce_checkout_billing', 'njengah_checkout_billing');
		


function njengah_checkout_billing() {

echo '<h2>woocommerce_checkout_billing</h2>' ;

} 

4. woocommerce_before_checkout_billing_form

Le hook woocommerce_before_checkout_billing_form est défini avant le début du formulaire de facturation.

 add_action( 'woocommerce_before_checkout_billing_form', 'njengah_before_checkout_billing_form', 10 );

fonction njengah_before_checkout_billing_form(){

echo '<h2>woocommerce_before_checkout_billing_form</h2>' ;

} 

5. woocommerce_after_checkout_billing_form

Le hook woocommerce_after_checkout_billing_form est défini après avoir rempli le formulaire de facturation.

 add_action( 'woocommerce_after_checkout_billing_form', 'njengah_after_checkout_billing_form', 10 );
		


fonction njengah_after_checkout_billing_form(){

echo '<h2>woocommerce_after_checkout_billing_form</h2>' ;

} 

6. woocommerce_before_checkout_registration_form

Le crochet woocommerce_before_checkout_registration_form est défini dans le modèle de formulaire de facturation après le formulaire de création de compte. Ceci sera exécuté pour les utilisateurs invités.

 add_action('woocommerce_before_checkout_registration_form', 'njengah_checkout_billing');

function njengah_checkout_billing() {

echo '<h2>woocommerce_before_checkout_registration_form</h2>' ;
		


} 

7. woocommerce_after_checkout_registration_form

Le crochet woocommerce_after_checkout_registration_form est défini dans le modèle de formulaire de facturation. Ceci sera exécuté pour les utilisateurs invités.

 add_action('woocommerce_after_checkout_registration_form', 'njengah_after_checkout_registration_form');

function njengah_after_checkout_registration_form() {

echo '<h2>woocommerce_after_checkout_registration_form</h2>' ;

} 

8. woocommerce_checkout_shipping

Le crochet woocommerce_checkout_shipping est défini dans le modèle de formulaire d'expédition avant le formulaire d'expédition.

 add_action('woocommerce_checkout_shipping', 'njengah_checkout_shipping');
		


function njengah_checkout_shipping() {

echo '<h2>woocommerce_checkout_shipping</h2>' ;

} 

9. woocommerce_before_checkout_shipping_form

Le hook woocommerce_before_checkout_shipping_form est défini juste avant le début du formulaire d'expédition.

 add_action( 'woocommerce_before_checkout_shipping_form', 'njengah_before_checkout_shipping_form', 10 );

fonction njengah_before_checkout_shipping_form(){

echo '<h2>woocommerce_before_checkout_shipping_form</h2>' ;

} 

10. woocommerce_after_checkout_shipping_form

Le crochet woocommerce_after_checkout_shipping_form est défini après avoir rempli le formulaire d'expédition.

 add_action( 'woocommerce_after_checkout_shipping_form', 'njengah_after_checkout_shipping_form', 10 );
		


fonction njengah_after_checkout_shipping_form(){

echo '<h2>woocommerce_after_checkout_shipping_form</h2>' ;

} 

11. woocommerce_before_order_notes

Le crochet woocommerce_before_order_notes est défini avant le champ des notes de commande sur la page de paiement.

 add_action( 'woocommerce_before_order_notes', 'njengah_before_order_notes', 10 );

fonction njengah_before_order_notes(){

echo '<h2>woocommerce_before_order_notes</h2>' ;

} 

12. woocommerce_after_order_notes

Le crochet woocommerce_after_order_notes est défini après le champ des notes de commande sur la page de paiement.

 add_action('woocommerce_after_order_notes', 'njengah_after_order_notes', 10);
		


fonction njengah_after_order_notes(){

echo '<h2>woocommerce_after_order_notes</h2>' ;

} 

13. woocommerce_checkout_after_customer_details

Le crochet woocommerce_checkout_after_customer_details est placé après la saisie des détails du client, c'est-à-dire après les champs de facturation et d'expédition.

 add_action( 'woocommerce_checkout_after_customer_details', 'njengah_checkout_after_customer_details', 10 );

fonction njengah_checkout_after_customer_details(){

echo '<h2>woocommerce_checkout_after_customer_details</h2>' ;

} 

14. woocommerce_checkout_before_order_review_heading

Le crochet woocommerce_checkout_before_order_review_heading est défini dans le modèle de paiement avant l'en-tête de révision de la commande qui est "Votre commande". Ce crochet a été ajouté dans WooCommerce v3.6.0.

 add_action('woocommerce_checkout_before_order_review_heading', 'njengah_checkout_before_order_review_heading');
		


function njengah_checkout_before_order_review_heading() {

echo '<h2>woocommerce_checkout_before_order_review_heading</h2>' ;

} 

15. woocommerce_checkout_order_review

Le crochet woocommerce_checkout_order_review est défini dans le modèle de paiement principal. Le modèle de tableau de révision des commandes est inclus à l'aide de ce crochet.

 add_action('woocommerce_checkout_order_review', 'njengah_checkout_order_review');

function njengah_checkout_order_review() {

echo '<h2>woocommerce_checkout_order_review</h2>' ;

} 

16. woocommerce_checkout_before_order_review

Le hook woocommerce_checkout_before_order_review est défini avant les détails de la commande sur la page de paiement.

 add_action( 'woocommerce_checkout_before_order_review', 'njengah_checkout_before_order_review', 10 );
		


fonction njengah_checkout_before_order_review(){

echo '<h2>woocommerce_checkout_before_order_review</h2>' ;

} 

17. woocommerce_review_order_before_cart_contents

Le crochet woocommerce_review_order_before_cart_contents est défini dans le corps de la table de commande avant le contenu.

 add_action( 'woocommerce_review_order_before_cart_contents', 'njengah_review_order_before_cart_contents', 10);

fonction njengah_review_order_before_cart_contents(){

echo '<h2>woocommerce_review_order_before_cart_contents</h2>' ;

} 

18. woocommerce_review_order_after_cart_contents

Le crochet woocommerce_review_order_after_cart_contents est défini dans le corps de la table de commande après tout le contenu.

 add_action( 'woocommerce_review_order_after_cart_contents', 'njengah_review_order_after_cart_contents', 10);
		


fonction njengah_review_order_after_cart_contents(){

echo '<h2>woocommerce_review_order_after_cart_contents</h2>' ;

} 

19. woocommerce_review_order_before_shipping

Le crochet woocommerce_review_order_before_shipping est défini avant la section d'expédition dans le tableau des commandes.

 add_action( 'woocommerce_review_order_before_shipping', 'njengah_review_order_before_shipping', 10 );

fonction njengah_review_order_before_shipping(){

echo '<h2>woocommerce_review_order_before_shipping</h2>' ;

} 

20. woocommerce_review_order_after_shipping

Le crochet woocommerce_review_order_after_shipping est défini après la section d'expédition dans le tableau des détails de la commande.

 add_action( 'woocommerce_review_order_after_shipping', 'njengah_review_order_after_shipping', 10 );

fonction njengah_review_order_after_shipping(){

echo '<h2>woocommerce_review_order_after_shipping</h2>' ;

} 

21. woocommerce_review_order_before_order_total

Le crochet woocommerce_review_order_before_order_total est défini avant la section total et après la section expédition dans le tableau des détails de la commande.

 add_action( 'woocommerce_review_order_before_order_total', 'njengah_review_order_before_order_total', 10 );

fonction njengah_review_order_before_order_total(){

echo '<h2>woocommerce_review_order_before_order_total</h2>' ;

} 

22. woocommerce_review_order_after_order_total

Le crochet woocommerce_review_order_after_order_total est défini après la section total et dans le tableau des détails de la commande.

 add_action( 'woocommerce_review_order_after_order_total', 'njengah_review_order_after_order_total', 10 );

fonction njengah_review_order_after_order_total(){

echo '<h2>woocommerce_review_order_after_order_total</h2>' ;

} 

23. woocommerce_review_order_before_payment

Le crochet woocommerce_review_order_before_payment est défini avant la section des méthodes de paiement sur la page de paiement.

 add_action( 'woocommerce_review_order_before_payment', 'njengah_review_order_before_payment', 10 );

fonction njengah_review_order_before_payment(){

echo '<h2>woocommerce_review_order_before_payment</h2>' ;

} 

24. woocommerce_review_order_before_submit

Le hook woocommerce_review_order_before_submit est défini avant le bouton "Passer la commande" sur la page de paiement.

 add_action( 'woocommerce_review_order_before_submit', 'njengah_review_order_before_submit', 10 );

fonction njengah_review_order_before_submit(){

echo '<h2>woocommerce_review_order_before_submit</h2>' ;

} 

25. woocommerce_review_order_after_submit

Le crochet woocommerce_review_order_after_submit est défini après le bouton "Passer la commande" sur la page de paiement.

 add_action('woocommerce_review_order_after_submit', 'njengah_review_order_after_submit', 10);

fonction njengah_review_order_after_submit(){

echo '<h2>woocommerce_review_order_after_submit</h2>' ;

} 

26. woocommerce_review_order_after_payment

Le crochet woocommerce_review_order_after_payment est défini après toute la section de paiement, y compris le bouton "Passer la commande".

 add_action( 'woocommerce_review_order_after_payment', 'njengah_review_order_after_payment', 10 );

fonction njengah_review_order_after_payment(){

echo '<h2>woocommerce_review_order_after_payment</h2>' ;

} 

27. woocommerce_checkout_after_order_review

Le hook woocommerce_checkout_after_order_review est défini après la section de révision de la commande sur la page de paiement, qui comprend le tableau des détails de la commande et la section de paiement.

 add_action( 'woocommerce_checkout_after_order_review', 'njengah_checkout_after_order_review', 10 );

fonction njengah_checkout_after_order_review(){

echo '<h2>woocommerce_checkout_after_order_review</h2>' ;

} 

28. woocommerce_after_checkout_form

Le crochet woocommerce_after_checkout_form est défini à la fin après le formulaire de paiement.

 add_action( 'woocommerce_after_checkout_form', 'njengah_after_checkout_form', 10 );

fonction njengah_after_checkout_form(){

echo '<h2>woocommerce_after_checkout_form</h2>' ;

} 

Conclusion

Cet article illustre tous les hooks WooCommerce disponibles sur la page de paiement. Ces crochets vous permettent de personnaliser la page de paiement en fonction de vos besoins.

Si c'est la première fois que vous utilisez des hooks, vous pouvez copier ces scripts et les coller directement dans le fichier functions.php de votre thème enfant. Vous pouvez maintenant faire preuve de créativité et personnaliser la page de paiement pour augmenter les taux de conversion.

Alternativement, vous pouvez utiliser des plugins pour personnaliser cette section si vous n'êtes pas familier avec les codes. Si vous avez besoin d'une personnalisation supplémentaire, veuillez envisager de faire appel à un développeur WordPress qualifié.

Articles similaires

1. Qu'est-ce que le thème WooCommerce Storefront ? [A répondu]
2. Comment mettre le panier WooCommerce et le paiement sur une seule page
3. Comment ajouter un champ supplémentaire dans le formulaire de paiement WooCommerce
4. Comment personnaliser la page de paiement de la vitrine
5. Comment supprimer le thème WooCommerce Storefront de la page de panier
6. Comment masquer la taxe à la caisse si la valeur du champ existe WooCommerce
7. Comment masquer le champ du nom de l'entreprise Page de paiement WooCommerce
8. Comment supprimer le bouton de paiement WooCommerce
9. Comment changer la quantité lors du paiement WooCommerce
10. Comment supprimer la page de paiement des informations supplémentaires WooCommerce