Résumé IA
Introduction
Souhaitez-vous ajouter une sélection déroulante vide à vos champs de paiement sans afficher de prix zéro ? Lorsque vous utilisez le champ Éléments déroulants des champs de paiement, l'activation de l'option Afficher le prix après les étiquettes d'élément affiche automatiquement 0,00 pour les sélections vides.
Ce guide vous montrera comment maintenir une option « –Sélectionner– » propre sans l'affichage du prix zéro.
Comprendre le problème
Lorsque vous créez un champ Éléments déroulants dans votre formulaire de paiement et que vous activez l'option Afficher le prix après les étiquettes d'élément, toute sélection vide (comme –Sélectionner–) s'affiche automatiquement sous la forme –Sélectionner– 0,00 $. Cela peut ne pas être la présentation idéale pour vos clients.
L'extrait de code de ce guide vous permettra de :
- Conserver votre sélection vide en haut de la liste déroulante
- Supprimer l'affichage du prix « 0,00 $ »
- Conserver l'affichage du prix pour toutes les autres options
Configuration du formulaire
Tout d'abord, créez votre formulaire et ajoutez un champ Éléments déroulants de la section Champs de paiement.
Dans votre champ Éléments déroulants :
- Ajoutez vos options régulières avec leurs prix respectifs
- Ajoutez une option vide (comme –Sélectionner–) en haut de la liste
- Activez la case à cocher Afficher le prix après les étiquettes d'élément 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 en :
- Trouver toute option déroulante avec une valeur data-amount de 0,00
- Remplacer son contenu textuel par –Sélectionner–
- Supprimer l'affichage du prix pour cette option uniquement
Vous pouvez personnaliser le texte « –Sélectionner– » en modifiant la ligne 9 du code. Par exemple, pour le changer en « Choisissez une option », mettez à jour la ligne avec :
jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Choose an option');
Et voilà ! Ensuite, souhaitez-vous personnaliser davantage le champ déroulant de votre formulaire ? Notre guide sur la personnalisation du champ Déroulant couvre toutes les étapes en détail.