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 enabled the price to show after the labels, this will automatically show the 0.00 if you want 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 like to further customize the dropdown field on your form? Our guide on styling the Dropdown field covers all the steps in detail.