Comment ajouter des champs conditionnels à la caisse WooCommerce

Voulez-vous créer une logique conditionnelle pour votre boutique ? Vous êtes arrivé au bon endroit. Dans ce guide, vous apprendrez à ajouter des champs conditionnels au paiement WooCommerce .

La caisse est l'une des pages les plus cruciales pour toute boutique de commerce électronique. Il existe des millions de sites en concurrence pour les mêmes utilisateurs. Alors pour être en avance sur vos concurrents, vous devez personnaliser et optimiser au maximum votre passage en caisse. L'une des options les plus intéressantes pour ce faire est d' ajouter des champs conditionnels à votre paiement WooCommerce .

Ces champs vous permettent de créer une logique conditionnelle et d'afficher uniquement les champs que les clients doivent remplir sur la page de paiement pour accélérer le processus d'achat. Alors, comprenons mieux ce que sont les champs conditionnels et comment ils peuvent vous aider à faire passer votre boutique au niveau supérieur.

Que sont les champs conditionnels ?

Les champs conditionnels sont des champs qui ont une logique conditionnelle de sorte que lorsque la condition est remplie, un autre champ apparaît ou est masqué. Pour créer une logique conditionnelle, vous avez besoin d'au moins un champ parent et d'un ou plusieurs champs enfants qui dépendent des valeurs prises par le champ parent . Par exemple, si vous offrez à vos clients la possibilité de payer avec PayPal ou par carte de crédit, vous souhaiterez peut-être afficher les champs de détail de la carte de crédit uniquement si les utilisateurs sélectionnent l'option Carte de crédit . S'ils veulent payer avec PayPal, ces champs n'apparaîtront pas. De cette façon, vous améliorez l'expérience utilisateur sur votre site et augmentez vos taux de conversion.

Qu'est-ce que la logique conditionnelle ?

Vous devez avoir une idée claire de ce qu'est la logique conditionnelle avant de commencer, alors creusons un peu plus. Lorsque vous créez une logique conditionnelle, vous souhaitez que le champ conditionnel fasse X si la condition est remplie ou vraie, mais qu'il fasse Y si la condition est fausse ou non remplie .

Suivant notre exemple de carte de crédit, nous souhaitons que les champs de détail de la carte de crédit n'apparaissent que si le client sélectionne l'option de paiement par carte de crédit. Cet exemple est assez simple mais la logique conditionnelle peut atteindre un niveau de complexité plus élevé lorsque vous travaillez avec plusieurs types de champs et/ou ajoutez plusieurs conditions et actions.

Sur la page de paiement WooCommerce, vous pouvez définir une condition pour un seul champ. La valeur que le client entre dans ce champ sera vérifiée par rapport aux paramètres et si la condition est remplie, l'action consistera à afficher le champ.

Pour créer une logique conditionnelle sur la page de paiement, vous devez utiliser au moins deux champs. Un parent et son enfant. Le champ dans lequel les valeurs sont vérifiées est appelé le champ parent . Et celui où vous créez la logique conditionnelle pour la faire apparaître ou non uniquement si la condition est vraie est le champ enfant . Comme nous le verrons dans ce guide, un champ parent peut avoir plusieurs champs enfants et plusieurs conditions qui lui sont appliquées.

Comment ajouter des champs conditionnels à la caisse WooCommerce

Dans cette section, nous verrons comment utiliser et ajouter une logique conditionnelle et des champs conditionnels à la caisse dans WooCommerce. Créer une logique conditionnelle utile par programmation nécessite beaucoup de codage, nous vous recommandons donc d'utiliser un plugin. Pour cette démonstration, nous utiliserons Checkout Manager.

Ce plugin vous permet d'ajouter, de personnaliser et de supprimer différents types de champs sur la page de paiement. En plus de cela, vous pouvez appliquer des validations conditionnelles illimitées à l'aide de plusieurs champs personnalisés sur la page de paiement WooCommerce. Avec plus de 80 000 téléchargements actifs , c'est l'un des meilleurs plugins de paiement. Il a une version gratuite avec des fonctionnalités de base que vous pouvez télécharger à partir d'ici et trois plans premium qui commencent à 19 USD.

Nous avons divisé la publication en différentes sections afin que vous puissiez accéder directement à la section qui vous intéresse. Sans plus tarder, voyons comment ajouter des champs conditionnels à la page de paiement dans WooCommerce .

1. Comment créer une logique conditionnelle
2. Logique conditionnelle avec plusieurs champs personnalisés enfants
3. Comment utiliser plusieurs champs personnalisés et des conditions enchaînées
4. Ce que vous ne pouvez pas faire lorsque vous utilisez la logique conditionnelle

1. Comment créer une logique conditionnelle

Donc, maintenant que vous avez une idée claire de ce qu'est la logique conditionnelle et de son fonctionnement, voyons comment créer un champ de logique conditionnelle à l'aide du plugin WooCommerce Checkout Manager. Créons une condition pour afficher un message lorsqu'un utilisateur tape « admin » comme prénom dans le formulaire de facturation. Pour ce faire, allez d'abord dans WooCommerce > Paiement > Facturation dans votre tableau de bord WordPress. Là, appuyez sur le bouton Ajouter un nouveau champ .

Une fenêtre s'ouvrira. C'est l'éditeur de champ du nouveau champ. Là, sélectionnez Message comme type et remplissez les options telles que Étiquette, Type et Message. De plus, sélectionnez le prénom comme champ parent dans la colonne de droite. Enfin, écrivez « admin » sous le prénom et appuyez sur Enregistrer .

Comme vous pouvez le voir, nous définissons le champ Prénom comme champ parent. Il est maintenant temps de le tester. Alors, allez sur votre page de paiement sur le frontend et tapez « admin » dans le champ du prénom. Vous devriez voir un message d'avertissement comme celui-ci.

Il s'agit d'un exemple simple, mais les conditions peuvent inclure de nombreux champs et les choses peuvent devenir très complexes lors de l'utilisation de nombreux champs conditionnels et personnalisés. Ainsi, pour les gérer facilement, vous pouvez voir quel champ a une condition et le champ parent dans l'écran du gestionnaire de champs du formulaire de paiement correspondant ( Facturation, expédition, supplémentaire ).

C'est ainsi que vous pouvez ajouter un champ conditionnel à la caisse dans WooCommerce à l'aide de Checkout Manager. Voyons maintenant un exemple plus complexe. Et bien sûr, le meilleur de tous est qu'il n'y a pas de limitation sur le nombre de champs personnalisés pouvant appliquer des conditions identiques ou différentes au même champ parent.

2. Logique conditionnelle avec plusieurs champs enfants personnalisés

Supposons maintenant que vous souhaitiez donner à vos clients la possibilité de recevoir les produits qu'ils ont achetés dans l'un de vos centres de distribution ou de choisir une livraison standard à un emplacement spécifique. Pour cela, vous pouvez utiliser un champ de type radio afin que les clients puissent choisir l'une des deux options.

Créer un nouveau champ parent

Alors, allez d'abord dans WooCommerce > Checkout et créez un champ de type radio. Pour cet exemple, nous appellerons ce champ "Livraison". Entrez ensuite dans les Options. Nous les appellerons Takeaway et Delivery. Ici, vous pouvez également sélectionner un prix pour chaque option et en définir un par défaut. Comme nous voulons afficher différents champs pour les clients en fonction de la case à cocher qu'ils cochent, nous allons utiliser certains des champs de paiement WooCommerce par défaut pour l'option Livraison . Ainsi, les acheteurs peuvent renseigner leurs coordonnées pour recevoir leurs produits à l'adresse de leur choix. Modifiez donc les champs WooCommerce par défaut : état, ville, code postal et adresse postale. Ensuite, créez la même logique conditionnelle pour chacun d'eux. De plus, nous allons créer une condition et sélectionner le type de champ radio Livraison comme champ parent et afficher le champ État si les utilisateurs sélectionnent l'option Livraison. Bien sûr, vous pouvez faire de même pour tous ces champs ou certains d'entre eux. Dans cet exemple, nous allons créer une condition dans les champs suivants :

• état_facturation
• billing_city
• code_postal de facturation
• Adresse de facturation 1

Créer un champ enfant personnalisé

Ensuite, vous devez créer un nouveau champ personnalisé qui apparaîtra lorsque le client sélectionnera l'option À emporter afin que vous puissiez envoyer le produit à l'un des centres de distribution. Encore une fois, allez dans les paramètres du plugin et créez un type de champ Select . Activez la case à cocher conditionnelle, sélectionnez Delivery en tant que parent et appelez-le Take away sous Delivery . Après cela, vous devez créer les adresses des centres de distribution. Alors, allez dans la section Options et ajoutez quelques adresses. Enfin, enregistrez les modifications. Maintenant, il est temps de vérifier le frontend. Accédez à la page de paiement et sélectionnez certaines des options que vous venez de créer. Par exemple, lorsque les utilisateurs sélectionnent l'option À emporter, vous pouvez choisir l'un des centres de distribution. En revanche, s'ils sélectionnent Livraison , ils doivent saisir l'adresse où ils souhaitent recevoir leurs produits. REMARQUE : Nous avons ajouté deux champs supplémentaires pour afficher le message d'information, un pour chaque option, en utilisant les mêmes conditions que nous avons utilisées dans les autres champs. Vous savez maintenant comment ajouter des champs conditionnels à la caisse WooCommerce en utilisant une logique plus complexe. Cependant, vous pouvez aller un peu plus loin et créer une logique encore plus complexe. Voyons comment créer des conditions enchaînées .

3. Comment utiliser plusieurs champs personnalisés et conditionnels enchaînés

Lorsque vous travaillez avec de nombreuses conditions liées, les choses peuvent devenir assez complexes. Les conditionnels enchaînés en sont un excellent exemple. C'est quand il y a une condition appliquée à un champ qui a une autre condition sur un champ différent. Pour mieux le comprendre, vous pouvez penser à un conditionnel avec un sous-conditionnel, qui a un autre sous-conditionnel, et ainsi de suite. Le niveau de hiérarchie des conditions et le nombre de champs personnalisés que vous pouvez utiliser sont illimités, vous pouvez donc créer une logique très complexe avec de nombreuses dépendances.

Création d'un conditionnel chaîné

Alors, créons un exemple plus complexe en utilisant des conditions enchaînées. Supposons que vous souhaitiez offrir à vos clients la possibilité d'ajouter un colis supplémentaire à leur commande. Les options seront Carton, Cadeau et Styrofoam. Tout d'abord, ajoutez un type de champ de case à cocher afin que le client puisse demander le package Extra. Dans l'onglet Prix de l'éditeur de champ, saisissez le prix que vous souhaitez ajouter à la commande en cours lorsque le client coche la case Forfait supplémentaire. Ensuite, vous devez travailler sur les options d'emballage que vous proposerez à vos clients. Nous permettrons aux acheteurs de sélectionner plusieurs options, nous allons donc créer un type de champ à sélection multiple. Ajoutez une étiquette et sélectionnez Extra Package comme champ parent pour que votre logique conditionnelle ressemble à ceci : Ensuite, allez dans l'onglet Options et créez les options pour vos clients. Sur cet écran, vous pouvez définir un prix différent pour chaque alternative. Puisque nous avons déjà défini le prix lorsque nous avons créé le champ de case à cocher, nous n'utiliserons pas cette option ici. Une fois que vous avez terminé, il est temps de vérifier l'interface. Si tout fonctionne correctement, vous devriez pouvoir sélectionner plusieurs options lors de la vérification du champ Emballage supplémentaire : Nous avons utilisé ici une seule condition pour afficher un champ à sélection multiple. Maintenant, créons une condition enchaînée avec chacune des options/valeurs du champ parent.

Ajouter plusieurs options

Alors, choisissons l'option Emballage cadeau et appliquons quelques conditions. Créons un champ personnalisé radio et remplissons l'éditeur comme suit. Nous allons proposer plusieurs impressions papier pour les emballages cadeaux, nous allons donc utiliser ce champ pour laisser les clients en choisir un. Pour ce faire, allez dans la section Options et configurez les impressions papier pour le champ radio. Nous avons configuré les options comme ceci : Et sur le frontend, vous verrez quelque chose comme ceci : Comme nous affichons des emballages cadeaux, il est préférable d'afficher des images plutôt que du texte. Pour afficher les images dans chaque option, nous avons utilisé des images que nous avions précédemment téléchargées dans la bibliothèque. Vous pouvez entrer des images pour l'étiquette de chaque option avec le code suivant : <img class=”paper-style” src=”#path of your image url”> Jusqu'à présent, vous avez créé une logique conditionnelle chaînée qui comprend deux niveaux et deux conditions qui dépendent l'une de l'autre. Emballage supplémentaire ->(condition 1)-> Type d'emballage ->(condition 2)-> Emballage cadeau

Ajout d'un autre niveau conditionnel

Allons un peu plus loin et ajoutons un nouveau niveau de conditionnel. Dans la dernière capture d'écran, vous verrez qu'il existe un nouveau champ appelé Carte-cadeau pour donner aux utilisateurs la possibilité d'ajouter une carte-cadeau dédiée au package. Pour cela, nous facturerons 4 $ supplémentaires. En plus de cela, nous allons utiliser une condition pour afficher un nouveau champ personnalisé et permettre aux utilisateurs de saisir le texte qu'ils souhaitent imprimer sur la carte-cadeau. Alors, créons un nouveau champ de case à cocher et configurons-le comme suit : Vous pouvez voir comment nous nous référons au même champ parent et utilisons la même condition que celle que nous avons utilisée pour l'emballage cadeau à l'étape précédente. Ensuite, ajoutez une zone de texte afin que les utilisateurs puissent saisir le texte qu'ils souhaitent voir apparaître sur la carte-cadeau et le configurer comme ceci : C'est le dernier conditionnel. Il a le champ personnalisé Carte-cadeau comme champ parent et le Texte de la carte-cadeau comme champ enfant. Désormais, lorsque les acheteurs sélectionnent l'option Carte-cadeau, ils voient ceci : Et c'est ainsi que vous créez une logique complexe et ajoutez plusieurs champs conditionnels à la page de paiement dans WooCommerce. Nous avons enchaîné trois conditions et plusieurs champs personnalisés dans cette commande : Emballage supplémentaire ->(condition 1)-> Type d'emballage ->(condition 2)-> Emballage cadeau ->(condition 3)->Carte cadeau

4. Ce que vous ne pouvez pas faire lorsque vous utilisez la logique conditionnelle

Utiliser des champs de différents formulaires

Dans WooCommerce, les champs conditionnels doivent faire référence à un champ parent situé dans le même formulaire. Il y a trois formulaires sur la page de paiement : Facturation, Expédition et Formulaires supplémentaires. Chacun d'eux fonctionne comme un formulaire séparé et ne peut pas avoir de conditions qui dépendent des champs d'un autre formulaire.

Conditionnel aux champs sans valeur (bouton, titre, messages)

Vous ne pouvez pas utiliser les boutons, les messages et les types de champs d'en-tête comme champs parents, car ils n'ont aucune valeur pour vérifier si la condition est remplie.

Modifier les identifiants ou les noms des champs

Pour garantir une intégration correcte avec WooCommerce, vous ne pouvez pas modifier les noms et les identifiants des champs. Cela s'applique à la fois aux champs WooCommerce par défaut et à tous les champs personnalisés que vous ajoutez.

Déclencher une action différente autre que l'affichage/le masquage d'un champ

Dans WooCommerce, les champs conditionnels peuvent faire une seule action : afficher le champ spécifié lorsque la condition est vraie. Cela signifie que, malheureusement, vous ne pouvez pas ajouter une remise, un produit, modifier la commande ou effectuer toute autre action lorsque la condition est remplie.

Appliquer des conditions aux valeurs des champs en dehors de la caisse

Enfin, les conditions ne peuvent vérifier que les valeurs d'un autre champ de paiement sur le même formulaire. Ainsi, vous ne pouvez pas vérifier les conditions qui vérifient la quantité de produit, le prix total, le rôle de l'utilisateur ou tout autre élément qui n'est pas une valeur de champ de paiement.

Conclusion

Dans l'ensemble, la logique conditionnelle peut vous aider à améliorer l'expérience utilisateur et à augmenter les taux de conversion sur votre site. C'est pourquoi l'ajout de champs conditionnels à votre paiement WooCommerce est un excellent moyen de faire passer votre boutique au niveau supérieur.

Dans ce guide, vous avez appris à créer et à configurer des champs supplémentaires à l'aide du plug-in WooCommerce Checkout Manager. Nous avons ajouté des champs personnalisés et créé à la fois une logique conditionnelle simple et des exemples plus complexes avec des conditions enchaînées. Enfin, nous avons examiné les limites de la logique conditionnelle dans WooCommerce.

Ici, nous avons vu quelques exemples, mais ce n'est que la pointe de l'iceberg. Il y a beaucoup de choses que vous pouvez faire avec les champs conditionnels pour améliorer votre paiement. Nous vous recommandons donc de créer des champs personnalisés et de jouer avec le conditionnel.

Pour plus d'informations sur la façon de tirer le meilleur parti de votre paiement, vous pouvez consulter notre guide pour optimiser le paiement WooCommerce et notre tutoriel pour désactiver la validation du code postal. Faites-nous savoir si vous avez des questions ou des doutes pour ajouter des champs conditionnels à la caisse. Nous serons heureux de vous aider !