Como Adicionar um Dropdown Vazio aos Itens do Dropdown

Introdução

Pretende adicionar uma seleção de menu suspenso vazia aos seus Campos de Pagamento sem mostrar um preço zero? Ao usar o campo Itens de Menu Suspenso dos Campos de Pagamento, ativar a opção Mostrar preço após os rótulos dos itens exibe automaticamente 0,00 para seleções vazias.

Este guia mostrar-lhe-á como manter uma opção limpa “–Selecione–” sem a exibição do preço zero.

Compreender o Problema

Quando cria um campo Itens de Menu Suspenso no seu formulário de pagamento e ativa a opção Mostrar preço após os rótulos dos itens, qualquer seleção vazia (como –Selecione–) é exibida automaticamente como –Selecione– 0,00 €. Isto pode não ser a apresentação ideal para os seus clientes.

O trecho de código neste guia permitir-lhe-á:

• Manter a sua seleção vazia no topo do menu suspenso
• Remover a exibição do preço “0,00 €”
• Manter a exibição do preço para todas as outras opções

Configuração do Formulário

Primeiro, crie o seu formulário e adicione um campo Itens de Menu Suspenso da secção Campos de Pagamento.

No seu campo Itens de Menu Suspenso:

1. Adicione as suas opções regulares com os seus respetivos preços
2. Adicione uma opção vazia (como –Selecione–) no topo da lista
3. Ative a caixa de verificação Mostrar preço após os rótulos dos itens nas definições do campo

Adicionar o Excerto de Código

Adicione este trecho de código ao seu site para remover a exibição do preço da sua seleção vazia:

Este código funciona:

1. Encontrar qualquer opção de menu suspenso com um data-amount de 0,00
2. Substituir o seu conteúdo de texto por –Selecione–
3. Remover a exibição do preço apenas para esta opção

Pode personalizar o texto “–Selecione–” modificando a linha 9 do código. Por exemplo, para o alterar para “Escolha uma opção”, atualize a linha para:

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

E é tudo! Em seguida, gostaria de personalizar ainda mais o campo de menu suspenso no seu formulário? O nosso guia sobre estilização do campo de Menu Suspenso cobre todos os passos em detalhe.