Comment ajouter un champ supplémentaire à la page de paiement WooCommerce

Si vous faites des affaires en ligne, vous connaissez déjà l’importance d’une page de paiement. Parfois, vous devrez peut-être personnaliser votre site Web de commerce électronique en raison d'exigences spécifiques.

Dans ce didacticiel, nous allons vous montrer comment personnaliser la page de paiement WooCommerce et y ajouter des champs supplémentaires. Nous discuterons de deux façons de faire votre travail :

1. Ajouter des champs supplémentaires à la page de paiement WooCommerce à l'aide du code (pour les utilisateurs techniques)
2. Ajoutez des champs supplémentaires à la page de paiement WooCommerce à l'aide d'un plugin WordPress (pour les utilisateurs non techniques).

Avant de passer au didacticiel, découvrons ce qu'est une page de paiement.

Qu'est-ce qu'une page de paiement WooCommerce ?

Une page de paiement est un terme de commerce électronique qui fait référence à une page présentée à un client lors du processus de paiement étape par étape. Généralement, il s’agit de la page la plus importante tant pour les vendeurs que pour les clients.

Les clients doivent fournir des informations cruciales telles que l'adresse, les détails de facturation et le mode de paiement sur cette page. Et si d’une manière ou d’une autre cette page produit une erreur, aucun client ne pourra effectuer d’achat ! On peut donc imaginer à quel point cette page est importante pour les vendeurs.

Lorsque vous utilisez WordPress pour alimenter votre site Web et WooCommerce comme solution de commerce électronique, vous obtiendrez votre propre page de paiement. Cependant, étant une solution gratuite, WooCommerce ne vous donne pas la possibilité de personnaliser la page de paiement WooCommerce à partir des paramètres.

Alors, comment personnaliseriez-vous la page de paiement de WooCommerce si nécessaire ? Eh bien, nous allons maintenant vous montrer les astuces pour personnaliser la page de paiement WooCommerce.

Comment ajouter un champ supplémentaire à la page de paiement WooCommerce ?

L'ajout de champs personnalisés à une page de paiement WooCommerce peut parfois être une tâche difficile. Ce tutoriel vous guidera tout au long du processus. Après avoir lu ce blog, vous saurez comment ajouter un champ personnalisé à la page de paiement WooCommerce. Allons-y directement :

Imaginons qu'il s'agisse de votre page de paiement par défaut.

Il existe deux approches complètement différentes qui vous aideront à ajouter des champs personnalisés à la page de paiement dans WooCommerce. Ce sont-

• en utilisant un codage personnalisé (pour les codeurs)
• en utilisant un plugin WordPress (pour les non-codeurs)

1. Ajoutez des champs supplémentaires à la page de paiement WooCommerce via le codage

Pour les personnes qui savent coder ou qui ont des connaissances de base en codage peuvent suivre cette approche. Cette méthode ajoute le champ personnalisé à la page de paiement en utilisant le code indiqué ci-dessous. Pour commencer avec le code de la page de paiement WooCommerce, suivez les étapes ci-dessous :

Tout d’abord, vous devez effectuer une action sur notre fichier function.php . Copiez l'intégralité de ce code dans le fichier function.php de votre thème.

 /** * Add custom field to the checkout page */ add_action('woocommerce_after_order_notes', 'custom_checkout_field'); function custom_checkout_field($checkout) { echo '<div><h2>' . __('New Heading') . '</h2>'; woocommerce_form_field('custom_field_name', array( 'type' => 'text', 'class' => array( 'my-field-class form-row-wide' ) , 'label' => __('Custom Additional Field') , 'placeholder' => __('New Custom Field') , ) , $checkout->get_value('custom_field_name')); echo '</div>'; }

Après avoir ajouté ce code, la page de paiement devrait apparaître comme :

Pour la validation des données du champ personnalisé, vous pouvez utiliser le code ci-dessous :

 /** * Checkout Process */ add_action('woocommerce_checkout_process', 'customised_checkout_field_process'); function customised_checkout_field_process() { // Show an error message if the field is not set. if (!$_POST['customised_field_name']) wc_add_notice(__('Please enter value!') , 'error'); }

Nous avons donc ajouté un champ de remplacement à la page de paiement avec le contrôle de validation ! Super!
Confirmons que les détails saisis dans le champ personnalisé par le client sont enregistrés ou non.

Cela peut être fait en utilisant le code ci-dessous :

 /** * Update the value given in custom field */ add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta'); function custom_checkout_field_update_order_meta($order_id) { if (!empty($_POST['customised_field_name'])) { update_post_meta($order_id, 'Some Field',sanitize_text_field($_POST['customised_field_name'])); } }

Ajouter un champ personnalisé à la page de paiement WooCommerce à l'aide d'un plugin

Avec les lignes de code ci-dessus, nous avons ajouté des champs personnalisés à notre boutique en ligne WooCommerce !

Si vous n'êtes pas codeur, vous pouvez également utiliser un plugin pour ajouter un nouveau champ à la page de paiement. Il existe de nombreux plugins qui peuvent être utilisés à cet effet. Certains sont les suivants-

• Gestionnaire de paiement WooCommerce
• Éditeur de champs de paiement
• Éditeur et gestionnaire de champs de paiement pour WooCommerce

En utilisant ces plugins, toute personne n'ayant aucune connaissance en codage peut ajouter des champs personnalisés supplémentaires à la page de paiement WooCommerce. Voyons comment ajouter un champ avec Checkout Field Editor et Manager pour WooCommerce .

Installez et activez simplement le plugin. Vous trouverez un nouveau menu sous WooCommerce qui est « Champs de paiement ». Accédez à Tableau de bord d'administration WP > WooCommerce > Champs de paiement .

Sur le côté gauche, sous l'option Champs , vous pouvez trouver 6 types de champs différents. En fonction du type de champ que vous souhaitez ajouter, choisissez-le en conséquence. Nous souhaitons ajouter un champ pour le numéro de téléphone, nous choisissons donc Text . Nous allons simplement faire glisser le bouton Texte sous les champs de nom.

Lors de l'ajout de nouveaux champs, j'ai remarqué comment nous avons rendu le champ obligatoire . Vous pouvez choisir de ne pas le faire si vous n'avez pas besoin que le champ soit obligatoire.

De la même manière, vous pouvez ajouter n’importe quel type de champ que ce plugin a à offrir.

Vous trouverez le nouveau champ ajouté à votre page de paiement. Facile, non ?

Ajouter des champs à la caisse WooCommerce – Note de fin

A partir de maintenant, vous savez comment ajouter un champ de paiement WooCommerce supplémentaire et ce n'est pas trop difficile du tout.

Désormais, quelle que soit la raison : une demande obligatoire du client ou vos propres besoins, vous êtes prêt à personnaliser la page de paiement de WooCommerce !

Si vous avez des questions, n'hésitez pas à commenter. Nous vous promettons que nous reviendrons vers vous.