Introduction
Vous souhaitez personnaliser les étiquettes du formulaire de paiement en supprimant le trait d'union qui apparaît lorsque vous choisissez d'afficher le prix après l'étiquette ? Le comportement par défaut des champs Paiement inclut un trait d'union entre l'étiquette et le prix affiché, ce qui ne correspond pas toujours à vos préférences en matière de conception.
Ne craignez rien ! Dans ce tutoriel, nous allons vous guider dans le processus de personnalisation des libellés de vos champs Paiement. Que vous souhaitiez supprimer le trait d'union ou le remplacer par un autre caractère, nous avons tout ce qu'il vous faut. Découvrez deux méthodes, l'une sans nippes et l'autre basée sur PHP, pour obtenir sans effort l'affichage de l'étiquette et du prix qui convient à l'esthétique de votre formulaire.
Création du formulaire
Pour commencer, nous allons créer un formulaire de commande standard comportant tous les champs obligatoires et acceptant les paiements. Si vous avez besoin d'aide pour créer ce type de formulaire, consultez ce guide utile.
Suppression du trait d'union
Méthode 1 : sans bribes
Comme promis, si vous souhaitez modifier ou supprimer complètement le trait d'union tout en affichant le prix dans le champ, saisissez manuellement le libellé exactement comme vous voulez qu'il apparaisse.
Vous remarquerez que cette méthode ne nécessite aucun extrait de code et que nous avons également veillé à ce que l'option Afficher le prix après les étiquettes des articles soit désactivée. Il vous suffit de taper l'étiquette exactement comme vous voulez qu'elle apparaisse sur votre formulaire, c'est-à-dire sans le trait d'union ou en remplaçant le trait d'union par 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 devez d'abord cliquer sur vos champs de paiement et, dans l'onglet Avancé de chaque champ, cliquer sur l'option Afficher le prix après l'étiquette de l'article afin que le formulaire place automatiquement l'étiquette et le prix de l'article séparés par le trait d'union.
Une fois le formulaire sauvegardé, il est temps d'ajouter le snippet. Il suffit de copier et de coller 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 recherchera n'importe quel champ de paiement et remplacera le trait d'union ( - ) par deux points ( : ).
Et c'est tout ce dont vous avez besoin pour personnaliser les étiquettes du formulaire de paiement ! Vous souhaitez également effectuer cette modification pour les notifications par e-mail ? Consultez notre article intitulé Comment modifier le délimiteur de paiement dans les notifications par courriel.
En rapport
Référence de l'action : wpforms_wp_footer_end
FAQ
Q : Qu'est-ce que j'utiliserais si je ne voulais pas de séparateur du tout ?
R : Pour ne laisser qu'un espace entre l'étiquette et le prix, utilisez plutôt cet extrait.
/**
* 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 apportée à ces extraits est la ligne suivante replace(' – ', ' : '); à cette replace(' – ', ' ');Ici, nous laissons un seul espace pour le séparateur.