Come aggiungere un menu a discesa vuoto agli elementi del menu a discesa

Introduzione

Desideri aggiungere una selezione vuota nel menu a discesa ai tuoi Campi di Pagamento senza mostrare un prezzo zero? Quando utilizzi il campo Elementi del menu a discesa dai Campi di Pagamento, l'abilitazione dell'opzione Mostra prezzo dopo le etichette degli elementi visualizza automaticamente 0,00 per le selezioni vuote.

Questa guida ti mostrerà come mantenere un'opzione pulita “–Seleziona–” senza la visualizzazione del prezzo zero.

Comprensione del problema

Quando crei un campo Elementi del menu a discesa nel tuo modulo di pagamento e abiliti l'opzione Mostra prezzo dopo le etichette degli elementi, qualsiasi selezione vuota (come –Seleziona–) viene visualizzata automaticamente come –Seleziona– $0,00. Questa potrebbe non essere la presentazione ideale per i tuoi clienti.

Lo snippet di codice in questa guida ti permetterà di:

• Mantenere la selezione vuota in cima al menu a discesa
• Rimuovere la visualizzazione del prezzo “$0,00”
• Mantenere la visualizzazione del prezzo per tutte le altre opzioni

Impostazione del modulo

Innanzitutto, crea il tuo modulo e aggiungi un campo Elementi del menu a discesa dalla sezione Campi di Pagamento.

Nel tuo campo Elementi del menu a discesa:

1. Aggiungi le tue opzioni regolari con i rispettivi prezzi
2. Aggiungi un'opzione vuota (come –Seleziona–) in cima all'elenco
3. Abilita la casella di controllo Mostra prezzo dopo le etichette degli elementi nelle impostazioni del campo

Aggiunta dello snippet di codice

Aggiungi questo snippet di codice al tuo sito per rimuovere la visualizzazione del prezzo dalla tua selezione vuota:

Questo codice funziona:

1. Trovare qualsiasi opzione del menu a discesa con un data-amount di 0,00
2. Sostituire il suo contenuto testuale con –Seleziona–
3. Rimuovere la visualizzazione del prezzo solo per questa opzione

Puoi personalizzare il testo “–Seleziona–” modificando la riga 9 del codice. Ad esempio, per cambiarlo in “Scegli un'opzione”, aggiorna la riga in:

jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Choose an option');

E questo è tutto! Successivamente, desideri personalizzare ulteriormente il campo del menu a discesa sul tuo modulo? La nostra guida su come stilizzare il campo Menu a discesa copre tutti i passaggi in dettaglio.