How to Add an Empty Dropdown to Dropdown Items

Introduction

Would you like to put add an empty dropdown selection to your Dropdown Items in the Payment Fields? With a small code snippet, you can alter this so that it won’t display a zero price for you.

When you have placed a Dropdown Items field from the Payment Fields in your form and have enabled the price to show after the labels, this will automatically show the 0.00 if you’re wanting to have a blank selection at the top of the list.

As you can see from our form, we’re trying to create a dropdown item called –Select– so our customers know to click the bar to select their product. However, we also want to show the price as well so we end up showing –Select– with a 0.00 price beside it. In this tutorial, we’ll show you the steps to remove the price but still have an empty option for our first dropdown item.

Creating the form

First, you’ll need to create your form and add your fields. If you need any help with this, please see this documentation.

Simply add the fields you’d like on your form. In the next step, we’ll be adding a Payment Field.

Adding an empty dropdown to dropdown items

Since we know we are going to be selling, we’re going to add the Dropdown Items field to our form from the Payment Fields section of the form builder.

Simply add your options and set your prices but make sure you have added a blank option at the top of the list. Next, click the checkbox to Show price after item labels.

Adding the code snippet

Finally, we’ll just need to add our code snippet that will still allow for the empty dropdown item but won’t display the price. To complete this, just copy and paste this snippet to your site.

If you need any help in adding code snippets to your site, please see this tutorial.

/**
 * Empty dropdown item with out the price showing for payment dropdown selection.
 *
 * @link   https://wpforms.com/developers/how-to-add-an-empty-dropdown-to-dropdown-items/
 */

function wpf_dev_empty_dropdown_item( ) {
?>
<script type="text/javascript">

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

</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_empty_dropdown_item', 30 );

So let’s take a closer look at this snippet. We’re looking for the item in our dropdown list that has the 0.00 data-amount and we’re setting the text to –Select–.

And that’s it! Would you also like to add a coupon code that gets validated on your forms? Check out our tutorial on How to Add Coupon Code Field Validation on Your Forms.