Cómo agregar una opción vacía a los elementos de un desplegable

Introducción

¿Te gustaría añadir una selección de menú desplegable vacía a tus Campos de pago sin mostrar un precio cero? Al usar el campo Elementos de menú desplegable de Campos de pago, habilitar la opción Mostrar precio después de las etiquetas de los elementos muestra automáticamente 0,00 para las selecciones vacías.

Esta guía te mostrará cómo mantener una opción limpia de “–Seleccionar–” sin la visualización del precio cero.

Comprensión del problema

Cuando creas un campo Elementos de menú desplegable en tu formulario de pago y habilitas la opción Mostrar precio después de las etiquetas de los elementos, cualquier selección vacía (como –Seleccionar–) se muestra automáticamente como –Seleccionar– 0,00 €. Es posible que esta no sea la presentación ideal para tus clientes.

El fragmento de código de esta guía te permitirá:

• Mantener tu selección vacía en la parte superior del menú desplegable
• Eliminar la visualización del precio “0,00 €”
• Mantener la visualización del precio para todas las demás opciones

Configuración del formulario

Primero, crea tu formulario y añade un campo Elementos de menú desplegable de la sección Campos de pago.

En tu campo Elementos de menú desplegable:

1. Añade tus opciones habituales con sus respectivos precios
2. Añade una opción vacía (como –Seleccionar–) en la parte superior de la lista
3. Habilita la casilla de verificación Mostrar precio después de las etiquetas de los elementos en la configuración del campo

Añadir el fragmento de código

Añade este fragmento de código a tu sitio para eliminar la visualización del precio de tu selección vacía:

Este código funciona:

1. Buscando cualquier opción de menú desplegable con un data-amount de 0,00
2. Reemplazando su contenido de texto con –Seleccionar–
3. Eliminando la visualización del precio solo para esta opción

Puedes personalizar el texto “–Seleccionar–” modificando la línea 9 del código. Por ejemplo, para cambiarlo a “Elige una opción”, actualiza la línea a:

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

¡Y eso es todo! A continuación, ¿te gustaría personalizar aún más el campo de menú desplegable en tu formulario? Nuestra guía sobre cómo dar estilo al campo de menú desplegable cubre todos los pasos en detalle.