Einführung
Möchten Sie die Beschriftungen des Zahlungsformulars anpassen, indem Sie den Bindestrich entfernen, der erscheint, wenn Sie den Preis nach der Beschriftung anzeigen möchten? Das Standardverhalten der Zahlungsfelder beinhaltet einen Bindestrich zwischen der Beschriftung und dem angezeigten Preis, was nicht immer mit Ihren Designvorlieben übereinstimmt.
Keine Angst! In diesem Tutorial führen wir Sie durch den Prozess der Anpassung Ihrer Zahlungsfeldbeschriftungen. Egal, ob Sie den Bindestrich ganz weglassen oder durch ein anderes Zeichen ersetzen möchten, wir haben alles für Sie vorbereitet. Entdecken Sie zwei Methoden - ohne Snippet und auf PHP-Basis -, mit denen Sie mühelos die Beschriftung und Preisanzeige erreichen, die Ihrer Formularästhetik entspricht.
Erstellen des Formulars
Zunächst werden wir ein Standard-Bestellformular mit allen erforderlichen Feldern erstellen, das Zahlungen akzeptiert. Wenn Sie Hilfe bei der Erstellung eines solchen Formulars benötigen, lesen Sie bitte diesen nützlichen Leitfaden.
Entfernen des Bindestrichs
Methode 1: Ohne Schnipsel
Wenn Sie, wie versprochen, den Bindestrich ändern oder ganz entfernen möchten, aber dennoch den Preis in dem Feld anzeigen möchten, geben Sie die Bezeichnung manuell genau so ein, wie Sie sie haben möchten.
Sie werden feststellen, dass für diese Methode kein Codeschnipsel erforderlich ist, und wir haben auch dafür gesorgt, dass die Option Preis nach Artikelbeschriftungen anzeigen deaktiviert ist. Geben Sie einfach das Etikett genau so ein, wie es in Ihrem Formular erscheinen soll, d. h. ohne Bindestrich oder durch einen Doppelpunkt ersetzt, wie in diesem Beispiel geschehen.
Methode 2: PHP-basiert
Wenn Sie PHP verwenden möchten, um den Bindestrich zu entfernen oder zu ändern, müssen Sie zunächst auf Ihre Zahlungsfelder klicken und auf der Registerkarte Erweitert jedes Feldes die Option Preis nach Artikelbeschriftung anzeigen aktivieren, damit das Formular automatisch Ihre Beschriftung und den Preis für den Artikel durch den Bindestrich getrennt einfügt.
Sobald das Formular gespeichert ist, müssen Sie das Snippet hinzufügen. Kopieren Sie einfach dieses Snippet und fügen Sie es auf Ihrer Website ein.
/**
* 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 );
Dieses Snippet sucht nach einem beliebigen Zahlungsfeld und ersetzt den Bindestrich ( - ) durch einen Doppelpunkt ( : ).
Und das ist alles, was Sie brauchen, um die Etiketten des Zahlungsformulars anzupassen! Möchten Sie diese Änderung auch für E-Mail-Benachrichtigungen vornehmen? Schauen Sie sich unseren Artikel über die Änderung des Zahlungstrennzeichens in E-Mail-Benachrichtigungen an.
Verwandte Seiten
Referenz der Aktion: wpforms_wp_footer_end
FAQ
F: Was würde ich verwenden, wenn ich überhaupt keinen Separator bräuchte?
A: Um nur ein Leerzeichen zwischen dem Label und dem Preis zu lassen, verwenden Sie stattdessen dieses Snippet.
/**
* 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 );
Sie werden feststellen, dass die einzige Änderung bei diesen Schnipseln diese Zeile ist replace(' – ', ' : '); hierzu replace(' – ', ' ');hier lassen wir nur ein einzelnes Leerzeichen für das Trennzeichen stehen.