### [How to Add an Empty Dropdown to Dropdown Items](https://wpforms.com/developers/how-to-add-an-empty-dropdown-to-dropdown-items/)

**Published:** March 30, 2021
**Author:** David Ozokoye

**Excerpt:** This tutorial will show you how to add an empty dropdown to payment dropdown items using a small code snippet. 

**Content:**

## Introduction

Would you like to add an empty dropdown selection to your Payment Fields without showing a zero price? When using the Dropdown Items field from Payment Fields, enabling the **Show price after item labels** option automatically displays **0.00** for empty selections.

This guide will show you how to maintain a clean “–Select–” option without the zero price display.

![by default the zero price will show up in your form](https://wpforms.com/wp-content/uploads/2022/05/wpforms-empty-dropdown-zero-price.jpg)## Understanding the Issue

When you create a Dropdown Items field in your payment form and enable the **Show price after item labels** option, any empty selection (like **–Select–**) automatically shows as **–Select– $0.00**. This might not be the ideal presentation for your customers.

The code snippet in this guide will allow you to:

- Keep your empty selection at the top of the dropdown
- Remove the “$0.00” price display
- Maintain the price display for all other options

## Setting Up the Form

First, create your form and add a **Dropdown Items** field from the Payment Fields section.

For assistance with creating a form, check out guide on [creating your first form](https://wpforms.com/docs/creating-first-form/).

In your Dropdown Items field:

1. Add your regular options with their respective prices
2. Add an empty option (like **–Select–**) at the top of the list
3. Enable the **Show price after item labels** checkbox in the field settings

![just add an empty price dropdown selection to the form](https://wpforms.com/wp-content/uploads/2022/05/wpforms-payment-dropdown-field-show-price.jpg)## Adding the Code Snippet

Add this code snippet to your site to remove the price display from your empty selection:

If you need help in adding code snippets to your site, check out our guide on [adding custom PHP or JavaScript for WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

This code works by:

1. Finding any dropdown option with a data-amount of **0.00**
2. Replacing its text content with **–Select–**
3. Removing the price display for this option only

![Now the form will show Select as the first dropdown item without a price](https://wpforms.com/wp-content/uploads/2022/05/wpforms-remove-zero-price.jpg)You can customize the “–Select–” text by modifying **line 9** of the code. For example, to change it to “Choose an option”, update the line to:

```

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

And that’s it! Next, would you like to further customize the dropdown field on your form? Our guide on [styling the Dropdown field](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "styling the Dropdown field") covers all the steps in detail.

**Categories:** Tutorials

**Tags:** JS

---