wooCommerce_checkout_fields - 20 exemples de code pour personnaliser la caisse woocommerce

Personnalisez votre paiement WooCommerce sans plugin? C'est possible - si vous êtes à l'aise avec quelques lignes de PHP. Dans cet article, vous trouverez 20 extraits de code prêts à l'emploi à l'aide du filtre woocommerce_checkout_fields . Ils couvrent des cas réels comme la suppression des champs, le renommer des étiquettes ou l'ajout de nouvelles options.

Si vous n'êtes pas dans le codage, ne vous inquiétez pas - nous vous montrerons également comment utiliser le plugin Flexible Checkout Fields pour obtenir le même résultat visuellement.

Qu'est-ce que la personnalisation de la caisse et comment cela aide à améliorer les conversions?

Votre paiement est l'endroit où les visiteurs deviennent des clients. Mais s'il est encombré de champs inutiles ou manque de flexibilité, cela peut provoquer des frictions. La personnalisation du paiement aide à réduire l'abandon, à accélérer les achats et à créer une meilleure expérience.

WooCommerce est livré avec un filtre flexible: woocommerce_checkout_fields . Vous pouvez l'utiliser pour modifier la facturation, l'expédition ou les champs supplémentaires. Il est parfait pour les développeurs qui souhaitent contrôler la visibilité, l'ordre et le contenu du terrain.

20 exemples de code utilisant wooCommerce_checkout_fields filtre

Vous trouverez ci-dessous 20 exemples. Ajoutez ces extraits aux functions.php de thème de votre enfant. PHP ou un plugin personnalisé.

1. Retirez le deuxième champ d'adresse

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. Cacher le champ du téléphone

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. Rendez le champ de messagerie en option

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

4. Changer les espaces réservés pour les champs de nom et de famille

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5. Renommer le «nom de famille» au «nom de famille»

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. Ajouter un champ de texte personnalisé

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. Ajouter une TextArea pour les instructions de livraison

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. Définir la classe CSS personnalisée

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. Changer la priorité du champ de messagerie

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. Supprimer le champ du code postal

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. Réorganiser le prénom après le nom de famille

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. Ajouter une case à cocher pour la demande de facture

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. Ajouter une liste déroulante SELECT pour la livraison

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. Commentaires de la commande avant le remplissage

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. Ajouter un champ de numéro personnalisé

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. Ajouter un cueilleur de date

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. Désactiver la validation du téléphone

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. faire apparaître le champ de pays d'expédition en dernier

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. Supprimer le champ de code postal d'expédition

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. Ajouter un champ personnalisé après les détails de la commande

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

Comment personnaliser le paiement sans codage à l'aide de champs de paiement flexibles

Pas un développeur? Aucun problème. Le plugin Flexible Checkout Fields vous permet de faire tout ce qui précède - visuellement, à partir de votre tableau de bord WordPress.

• Ajouter, retirer et réorganiser les champs à l'aide de glisser-déposer
  

  

• Modifier les étiquettes, les espaces réservés et les valeurs par défaut
• Définir les champs selon les besoins, facultatifs ou cachés
  

  

• Appliquer les cours CSS ou les règles de validation
  

  

• Choisissez la section: facturation, expédition ou informations supplémentaires
• Attribuer des valeurs par défaut à des fins de test ou UX
• Tout sans modifier PHP ou écrire du code personnalisé

Résultats sans frais de développement.

Flexibles de caisse Fields Pro - fonctionnalités avancées

Vous voulez plus de puissance et de flexibilité? La version Pro ajoute des capacités avancées:

• Logique conditionnelle pour afficher / masquer les champs en fonction des contenus de panier ou des données utilisateur
• Prise en charge des types de champs supplémentaires: sélecteur de dattes, sélecteur de temps, radio avec couleurs ou images, et plus
• Contrôle de la visibilité pour les rôles utilisateur - Affichez différents champs vers les utilisateurs B2B et B2C
• Affichage sur le terrain en fonction de la méthode d'expédition ou de paiement sélectionnée
• Prix ​​supplémentaire par paramètres de champ

Vous pouvez voir les fonctionnalités du plugin sur sa page de produit.

Résumé: Quelle méthode est la meilleure pour votre paiement?

L'utilisation woocommerce_checkout_fields est un moyen puissant de personnaliser la caisse de WooCommerce - mais cela nécessite un codage et des tests soigneux. De plus, il faut s'occuper des mises à jour du code et du thème.

Si vous êtes confiant à modifier votre thème, les 20 exemples ci-dessus devraient vous aider à gérer les scénarios les plus courants.

Mais pour tout le monde, les champs de paiement flexibles pour le plugin WooCommerce offre une alternative sans code et conviviale avec encore plus d'options dans la version Pro.

Points clés

• Le filtre woocommerce_checkout_fields vous permet de personnaliser le formulaire de paiement avec PHP
• Vous pouvez l'utiliser pour ajouter, supprimer, renommer, réorganiser ou style
• Le plugin Flexible Checkout Fields fait de même - mais sans avoir besoin de coder
• La version pro ajoute une logique conditionnelle, des types de champs supplémentaires et des règles de tarification du champ
• Choisissez la méthode qui correspond à votre flux de travail: code pour le contrôle, plugin pour la vitesse