Comment ajouter un champ supplémentaire dans le formulaire de paiement WooCommerce

Publié: 2020-09-21

Comment ajouter un champ supplémentaire dans le formulaire de paiement WooCommerce Si vous exploitez une boutique WooCommerce, vous connaissez déjà l'importance d'une page de paiement. Cependant, il arrive parfois que vous deviez ajouter un champ supplémentaire dans le formulaire de paiement WooCommerce ou d'autres champs de paiement personnalisés sur une page de paiement en fonction des exigences de votre projet. Cela peut être un travail lourd pour certains propriétaires de magasins WooCommerce et c'est pourquoi j'ai décidé de créer un bref tutoriel sur la façon dont vous pouvez ajouter un champ supplémentaire dans le formulaire de paiement WooCommerce.

Page de paiement WooCommerce

En général, la 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 systématique, à la dernière étape avant qu'il n'effectue l'achat. Il existe plusieurs façons d'améliorer les conversions de page de paiement, mais l'une d'entre elles consiste à ajouter un champ supplémentaire dans le formulaire de paiement WooCommerce lié à votre produit spécifique, ainsi qu'à supprimer tous les autres champs de page de paiement inutiles.

Cette page contient des champs que les clients doivent remplir. Il convient également de mentionner qu'il s'agit de la page la plus importante pour le vendeur et le client, car les clients doivent fournir des informations importantes telles que les adresses, les détails de facturation, le mode de paiement, ce qui aidera le vendeur à livrer le produit au client. . page de paiement par défaut

Lorsqu'il y a des erreurs sur cette page, aucun client ne pourra effectuer d'achat. Cela affecterait considérablement les performances de votre magasin, car vous ne pourrez réaliser aucune vente.

Si vous utilisez WooCommerce pour alimenter votre boutique en ligne, vous obtenez également votre page de paiement. Cependant, si vous connaissez WooCommerce, vous savez qu'il ne vous donne pas la possibilité de personnaliser votre page de paiement à partir des paramètres.

Ajouter un champ supplémentaire dans le formulaire de paiement WooCommerce

Il existe de nombreuses façons de modifier la page de paiement de vos boutiques WooCommerce, comme l'utilisation d'un plug-in tiers, d'extensions WooCommerce ou d'un développement personnalisé.

Comme je l'avais mentionné précédemment, le champ de paiement personnalisé de WooCommerce est important dans l'assemblage pour obtenir des données supplémentaires des acheteurs avant qu'ils ne terminent une commande.

Il y a des moments où vous avez besoin d'informations supplémentaires de la part de vos clients, et vous avez besoin d'un champ supplémentaire pour le faire.

Maintenant que vous connaissez les bases, plongeons dans le didacticiel. Pour ajouter un champ personnalisé à la page de paiement, nous utiliserons deux approches :

Utilisation d'un plug-in.
Création d'un code personnalisé.

a) Étapes pour ajouter un champ supplémentaire à votre page de paiement WooCommerce à l'aide de code

Cette solution est destinée aux personnes qui savent coder comme les développeurs. Ce code personnalisé vous aidera à ajouter le champ personnalisé à la page de paiement en quelques étapes simples.

Voici les étapes simples que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l' éditeur de thème est ouverte, recherchez le fichier de fonctions de thème où nous ajouterons la fonction qui ajoutera un champ supplémentaire à la page de paiement dans WooCommerce .
Ajoutez le code suivant au fichier php :

 /**

* Ajouter un champ personnalisé à la page de paiement

*/

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

fonction custom_checkout_field($checkout)

{

echo '<div id="custom_checkout_field"><h2>' . __('Nouveau titre') . '</h2>' ;

woocommerce_form_field('custom_field_name', array(

'type' => 'texte',

'classe' => tableau(

'my-field-class form-row-wide'

) ,

'label' => __('Champ supplémentaire personnalisé') ,

'placeholder' => __('Nouveau champ personnalisé') ,

) ,

$checkout->get_value('custom_field_name'));

echo '</div>' ;

}

Pour voir le résultat , vous devez actualiser la page de paiement et vous devriez voir ceci :
Cependant, il est important de noter que nous devons valider les données du champ personnalisé. pour cela, il suffit d'ajouter le code suivant au fichier functions.php :

 /**

* Processus de paiement

*/

add_action('woocommerce_checkout_process', 'customised_checkout_field_process');

fonction customised_checkout_field_process()

{

// Affiche un message d'erreur si le champ n'est pas défini.

if (!$_POST['customised_field_name']) wc_add_notice(__('Veuillez saisir une valeur !') , 'error');

}

S'il n'y a pas d'entrée dans le champ personnalisé, il y aura une erreur et voici le résultat : aucune entrée dans le champ personnalisé

Maintenant que nous avons ajouté le champ de paiement personnalisé et que nous l'avons validé, confirmons maintenant que les détails saisis dans le champ personnalisé sont enregistrés ou non . Cela peut être fait en utilisant le code suivant qui sera ajouté au fichier functions.php :

 /**

* Mettre à jour la valeur donnée dans le champ personnalisé

*/

add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

fonction custom_checkout_field_update_order_meta($order_id)

{

si (!empty($_POST['nom_champ_personnalisé'])) {

update_post_meta($order_id, 'Some Field',sanitize_text_field($_POST['customised_field_name']));

}

}

Comment fonctionne le code.

Ce code fonctionne en trois étapes simples. Dans le premier extrait de code, j'ai créé le champ personnalisé avec le titre. Ensuite, le deuxième extrait sert à valider s'il y a une entrée dans le champ personnalisé.

Le troisième extrait de code est utilisé pour confirmer que les détails saisis dans le champ personnalisé par le client sont enregistrés ou non. Il est également important de noter que ces extraits de code doivent être ajoutés au fichier functions.php de votre boutique WooCommerce.

b) Étapes pour ajouter un champ supplémentaire à votre page de paiement WooCommerce à l'aide d'un plugin

Cette solution est destinée aux utilisateurs de WordPress qui ne sont pas familiarisés avec le codage. Cette solution implique l'utilisation du plugin WooCommerce Checkout Manager. Gestionnaire de paiement WooCommerce

Je vais vous donner un guide systématique détaillé qui vous aidera à télécharger le plugin et à l'utiliser pour ajouter un champ supplémentaire sur la page de paiement.

Voici les étapes que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Ensuite, nous allons installer le plugin que nous avons indiqué précédemment. Si vous l'avez téléchargé en utilisant le lien ci-dessus, accédez simplement à Plugins> Ajouter un nouveau. Après cela, cliquez sur Upload Plugin puis sur Browse pour le fichier téléchargé comme indiqué ci-dessous :
Pour le télécharger directement dans le panneau d'administration, accédez simplement à Plugins> Ajouter un nouveau. Après cela, vous devrez effectuer une recherche par mot-clé pour le plugin 'WooCommerce Checkout Manager'. Vous devez l' installer et l' activer comme indiqué ci-dessous :
Pour créer de nouveaux champs, rendez-vous sur le tableau de bord WordPress et cliquez sur WooCommerce > Paramètres . Ensuite, cliquez sur l' onglet Paiement et cliquez sur l' onglet Supplémentaire . Cliquez sur Ajouter un nouveau champ comme indiqué ci-dessous :
Une nouvelle fenêtre apparaîtra et vous devrez ajouter les détails pertinents. N'oubliez pas d'enregistrer toutes les modifications que vous apportez :
Pour voir le résultat, actualisez la page de paiement et vous verrez le nouveau champ de paiement :

Conclusion

Dans ce bref tutoriel, je vous ai montré comment ajouter un nouveau champ à la page de paiement. Je suis sûr que vous savez maintenant comment ajouter un champ supplémentaire et que ce n'est pas trop difficile du tout. J'ai partagé deux solutions. L'un implique l'utilisation d'un code PHP qui ajoutera le champ supplémentaire et l'autre est avec un plugin. Le plugin a d'autres fonctionnalités supplémentaires que vous pouvez également consulter, et c'est une solution pour les moins férus de technologie. Cependant, vous pouvez modifier le nom des champs en fonction de vos besoins.