Résumé IA
Introduction
Souhaitez-vous personnaliser les libellés du formulaire de Paiement en supprimant le trait d'union qui apparaît lorsque vous choisissez d'afficher le prix après le libellé ? Le comportement par défaut des champs de Paiement inclut un trait d'union entre le libellé et le prix affiché, ce qui peut ne pas toujours correspondre à vos préférences de conception.
N'ayez crainte ! Dans ce tutoriel, nous vous guiderons tout au long du processus de personnalisation des libellés de vos champs de Paiement. Que vous souhaitiez éliminer complètement le trait d'union ou le remplacer par un autre caractère, nous avons ce qu'il vous faut. Découvrez deux méthodes, sans extrait de code et basée sur PHP, pour obtenir sans effort l'affichage des libellés et des prix qui convient à l'esthétique de votre formulaire.
Création du formulaire
Pour commencer, nous allons créer un formulaire de commande standard avec tous nos champs requis qui acceptera les paiements. Si vous avez besoin d'aide pour créer ce type de formulaire, veuillez consulter ce guide utile.
Supprimer le trait d'union
Méthode 1 : Sans extrait de code
Comme promis, si vous souhaitez modifier ou simplement supprimer complètement le trait d'union tout en affichant le prix dans le champ, tapez manuellement le libellé exactement comme vous souhaitez qu'il apparaisse.
Vous remarquerez que pour cette méthode, aucun extrait de code n'est nécessaire et nous avons également désactivé l'option Afficher le prix après les libellés des articles. Il vous suffit de taper le libellé exactement comme vous souhaitez qu'il apparaisse sur votre formulaire, ce qui peut être sans le trait d'union ou en remplaçant le trait d'union par un deux-points, comme nous l'avons fait dans cet exemple.
Méthode 2 : Basée sur PHP
Si vous souhaitez utiliser PHP pour supprimer ou modifier ce trait d'union, vous devrez d'abord cliquer sur vos champs de Paiement et, dans l'onglet Avancé de chaque champ, cliquer pour activer Afficher le prix après les libellés des articles afin que le formulaire place automatiquement votre libellé et le prix de l'article séparés par le trait d'union.
Une fois le formulaire enregistré, il est temps d'ajouter l'extrait de code. Copiez et collez simplement cet extrait sur votre site.
/**
* Remove or change hyphen payment form labels
*
* @link https://wpforms.com/developers/how-to-customize-payment-form-labels/
*/
function wpf_remove_hyphen_separator() {
?>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
// The querySelectorAll targets all Payment fields:
// .wpforms-image-choices-label is for Multiple / Checkbox Items with image choices turned on
// .wpforms-icon-choices-label is for Multiple / Checkbox Items with icon choices turned on
// .wpforms-field-payment-checkbox input + .wpforms-field-label-inline is for Checkbox Items without icon or image choices - in this case we know the label follows the checkbox input which allows us to target it only for this case
// .wpforms-field-payment-multiple input + .wpforms-field-label-inline is for Multiple Items without icon or image choices - same as above
// .wpforms-field-payment-select option is for Dropdown Items (both Classic and Modern)
var labelElements = document.querySelectorAll( ".wpforms-image-choices-label, .wpforms-icon-choices-label, .wpforms-field-payment-checkbox input + .wpforms-field-label-inline, .wpforms-field-payment-multiple input + .wpforms-field-label-inline, .wpforms-field-payment-select option" );
labelElements.forEach(function(labelElement) {
labelElement.textContent = labelElement.textContent.replace(' – ', ' : ');
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_remove_hyphen_separator', 10 );
Cet extrait de code recherchera n'importe quel champ de paiement et remplacera le trait d'union ( – ) par un deux-points ( : ).
Et voilà tout ce dont vous avez besoin pour personnaliser les libellés du formulaire de paiement ! Souhaitez-vous également apporter cette modification pour les notifications par e-mail ? Consultez notre article sur Comment modifier le délimiteur de paiement dans les notifications par e-mail.
Articles associés
Référence d’action : wpforms_wp_footer_end
FAQ
Q : Que devrais-je utiliser si je ne voulais aucun séparateur ?
R : Pour laisser juste un espace entre le libellé et le prix, utilisez plutôt cet extrait de code.
/**
* Remove or change hyphen payment form labels
*
* @link https://wpforms.com/developers/how-to-customize-payment-form-labels/
*/
function wpf_remove_hyphen_separator() {
?>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
// The querySelectorAll targets all Payment fields:
// .wpforms-image-choices-label is for Multiple / Checkbox Items with image choices turned on
// .wpforms-icon-choices-label is for Multiple / Checkbox Items with icon choices turned on
// .wpforms-field-payment-checkbox input + .wpforms-field-label-inline is for Checkbox Items without icon or image choices - in this case we know the label follows the checkbox input which allows us to target it only for this case
// .wpforms-field-payment-multiple input + .wpforms-field-label-inline is for Multiple Items without icon or image choices - same as above
// .wpforms-field-payment-select option is for Dropdown Items (both Classic and Modern)
var labelElements = document.querySelectorAll( ".wpforms-image-choices-label, .wpforms-icon-choices-label, .wpforms-field-payment-checkbox input + .wpforms-field-label-inline, .wpforms-field-payment-multiple input + .wpforms-field-label-inline, .wpforms-field-payment-select option" );
labelElements.forEach(function(labelElement) {
labelElement.textContent = labelElement.textContent.replace(' – ', ' ');
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_remove_hyphen_separator', 10 );
Vous remarquerez que la seule modification de cet extrait est la ligne replace(' – ', ' : '); en replace(' – ', ' ');, ici nous laissons juste un seul espace comme séparateur.