Zahlungsformular-Beschriftungen anpassen

Einleitung

Möchten Sie die Bezeichnungen des Zahlungsformulars anpassen, indem Sie den Bindestrich entfernen, der angezeigt wird, wenn Sie den Preis nach der Bezeichnung anzeigen? Das Standardverhalten der Zahlungsfelder beinhaltet einen Bindestrich zwischen der Bezeichnung und dem angezeigten Preis, was möglicherweise nicht immer Ihren Designvorstellungen entspricht.

Keine Sorge! In diesem Tutorial führen wir Sie durch den Prozess der Anpassung Ihrer Zahlungsfeldbezeichnungen. Egal, ob Sie den Bindestrich ganz entfernen oder durch ein anderes Zeichen ersetzen möchten, wir haben alles für Sie. Entdecken Sie zwei Methoden – ohne Code-Schnipsel und PHP-basiert –, um die Anzeige von Bezeichnung und Preis, die zu Ihrer Formularästhetik passt, mühelos zu erreichen.

Erstellung des Formulars

Zunächst erstellen wir ein Standard-Bestellformular mit allen erforderlichen Feldern, das Zahlungen akzeptiert. Wenn Sie Hilfe beim Erstellen dieser Art von Formular benötigen, sehen Sie sich bitte diesen nützlichen Leitfaden an.

Entfernen des Bindestrichs

Methode 1: Ohne Code-Schnipsel

Wie versprochen: Wenn Sie den Bindestrich ändern oder ganz entfernen möchten, aber den Preis weiterhin im Feld anzeigen möchten, geben Sie die Bezeichnung manuell genau so ein, wie sie erscheinen soll.

Sie werden feststellen, dass bei dieser Methode kein Code-Schnipsel erforderlich ist und wir auch sichergestellt haben, dass Preis nach Elementbezeichnungen anzeigen deaktiviert ist. Sie geben einfach die Bezeichnung genau so ein, wie sie in Ihrem Formular erscheinen soll, was ohne Bindestrich sein kann oder den Bindestrich durch einen Doppelpunkt ersetzt, wie wir es in diesem Beispiel getan haben.

Methode 2: PHP-basiert

Wenn Sie PHP verwenden möchten, um diesen Bindestrich zu entfernen oder zu ändern, müssen Sie zuerst auf Ihre Zahlungsfelder klicken und auf der Registerkarte Erweitert jedes Feldes auf Preis nach Elementbezeichnungen anzeigen klicken, damit das Formular Ihre Bezeichnung und den Preis für das Element automatisch mit einem Bindestrich getrennt platziert.

Sobald das Formular gespeichert ist, ist es nun an der Zeit, den Schnipsel hinzuzufügen. Kopieren Sie diesen Schnipsel einfach und fügen Sie ihn 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 );

Dieser Schnipsel sucht nach jedem Zahlungsfeld und ersetzt den Bindestrich ( – ) durch einen Doppelpunkt ( : ).

Und das ist alles, was Sie brauchen, um die Bezeichnungen des Zahlungsformulars anzupassen! Möchten Sie diese Änderung auch für E-Mail-Benachrichtigungen vornehmen? Schauen Sie sich unseren Artikel an So ändern Sie den Zahlungsbegrenzer in E-Mail-Benachrichtigungen.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end

FAQ

F: Was würde ich verwenden, wenn ich überhaupt keinen Trennstrich haben möchte?

A: Um nur ein Leerzeichen zwischen Bezeichnung und Preis zu lassen, verwenden Sie stattdessen diesen Schnipsel.

/**
 * 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 replace(' – ', ' : '); zu dieser replace(' – ', ' '); ist. Hier lassen wir nur ein einzelnes Leerzeichen als Trennzeichen.