KI-Zusammenfassung
Einleitung
Möchten Sie Ihrer Zahlungsfeld-Auswahl eine leere Dropdown-Auswahl hinzufügen, ohne einen Nullpreis anzuzeigen? Wenn Sie das Feld Dropdown-Elemente aus Zahlungsfeldern verwenden, zeigt die Aktivierung der Option Preis nach Element-Labels anzeigen automatisch 0,00 für leere Auswahlen an.
Diese Anleitung zeigt Ihnen, wie Sie eine saubere „–Auswählen–“-Option ohne Anzeige des Nullpreises beibehalten.
Das Problem verstehen
Wenn Sie ein Feld für Dropdown-Elemente in Ihrem Zahlungsformular erstellen und die Option Preis nach Element-Labels anzeigen aktivieren, wird jede leere Auswahl (wie –Auswählen–) automatisch als –Auswählen– 0,00 $ angezeigt. Dies ist möglicherweise nicht die ideale Darstellung für Ihre Kunden.
Der Code-Schnipsel in dieser Anleitung ermöglicht es Ihnen:
- Ihre leere Auswahl am Anfang des Dropdowns beibehalten
- Die Anzeige „0,00 $“ entfernen
- Die Preisanzeige für alle anderen Optionen beibehalten
Einrichtung des Formulars
Erstellen Sie zuerst Ihr Formular und fügen Sie ein Feld Dropdown-Elemente aus dem Abschnitt Zahlungsfelder hinzu.
In Ihrem Dropdown-Elemente-Feld:
- Fügen Sie Ihre regulären Optionen mit den entsprechenden Preisen hinzu
- Fügen Sie eine leere Option (wie –Auswählen–) am Anfang der Liste hinzu
- Aktivieren Sie das Kontrollkästchen Preis nach Element-Labels anzeigen in den Feld-Einstellungen
Hinzufügen des Code-Snippets
Fügen Sie diesen Code-Schnipsel zu Ihrer Website hinzu, um die Preisanzeige für Ihre leere Auswahl zu entfernen:
Dieser Code funktioniert, indem er:
- Jede Dropdown-Option mit einem Datenbetrag von 0,00 $ findet
- Seinen Textinhalt durch –Auswählen– ersetzt
- Die Preisanzeige nur für diese Option entfernt
Sie können den Text „–Auswählen–“ anpassen, indem Sie Zeile 9 des Codes ändern. Um ihn beispielsweise in „Wählen Sie eine Option“ zu ändern, aktualisieren Sie die Zeile wie folgt:
jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Choose an option');
Und das ist alles! Möchten Sie als Nächstes das Dropdown-Feld in Ihrem Formular weiter anpassen? Unsere Anleitung zum Styling des Dropdown-Feldes behandelt alle Schritte im Detail.