Introduction
Vous souhaitez ajouter une sélection déroulante vide à vos champs de paiement sans afficher un prix nul ? Lorsque vous utilisez le champ Éléments de la liste déroulante dans les champs de paiement, l'activation de l'option Afficher le prix après les libellés des éléments permet d'afficher automatiquement 0,00 pour les sélections vides.
Ce guide vous montrera comment maintenir une option "-Select-" propre sans l'affichage du prix zéro.
Comprendre le problème
Lorsque vous créez un champ Articles dans votre formulaire de paiement et que vous activez l'option Afficher le prix après les libellés des articles, toute sélection vide (comme -Sélectionner-) s'affiche automatiquement comme -Sélectionner- 0,00 $. Cette présentation n'est peut-être pas idéale pour vos clients.
L'extrait de code de ce guide vous permettra de.. :
- Conservez votre sélection vide en haut de la liste déroulante.
- Supprimer l'affichage du prix "0.00
- Maintenir l'affichage des prix pour toutes les autres options
Mise en place du formulaire
Tout d'abord, créez votre formulaire et ajoutez un champ "Dropdown Items" dans la section "Payment Fields".
Dans le champ Éléments de la liste déroulante :
- Ajoutez vos options régulières avec leurs prix respectifs
- Ajouter une option vide (comme -Select-) en haut de la liste
- Activez la case à cocher Afficher le prix après l'étiquette de l'article dans les paramètres du champ.
Ajout de l'extrait de code
Ajoutez cet extrait de code à votre site pour supprimer l'affichage du prix de votre sélection vide :
Ce code fonctionne de la manière suivante :
- Recherche d'une option de liste déroulante dont la valeur des données est de 0.00
- Remplacer son contenu textuel par -Select-
- Suppression de l'affichage du prix pour cette option uniquement
Vous pouvez personnaliser le texte "-Select-" en modifiant la ligne 9 du code. Par exemple, pour le remplacer par "Choisissez une option", modifiez la ligne comme suit :
jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Choose an option') ;
Et c'est tout ! Ensuite, vous souhaitez personnaliser davantage le champ déroulant de votre formulaire ? Notre guide sur le style du champ déroulant couvre toutes les étapes en détail.