WooCommerce: Turn Checkout Field Into a Drop-down

Talking about UX optimization, the WooCommerce checkout is where you should focus most of your time. Shopping cart abandonment is a huge issue – think about hidden charges, lack of payment methods, checkout bugs and, also, too many checkout fields to fill out manually.

Today, we will see how to turn a checkout text field into a select dropdown. Why not let customers pick from a list instead of typing in? Enjoy!

Turn the WooCommerce checkout address field into a dropdown select

PHP Snippet: Turn “Address 2” Field Into a Select Dropdown @ WooCommerce Checkout

Of course, you can pick whatever checkout field. In this case I’ve used “address_2” but you can also apply the same to “city” (so you can select billing/shipping city from a list), and so on.

/**
 * @snippet       Turn Text Field Into Select - WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
*/

add_filter( 'woocommerce_default_address_fields' , 'bbloomer_address_field_dropdown' );

function bbloomer_address_field_dropdown( $address_fields ) {
   $location_array = array(
      'Location 1' => 'Location 1',
      'Location 2' => 'Location 2',
      'Location 3' => 'Location 3',
      'Location 4' => 'Location 4',
   );
   $address_fields['address_2']['label'] = 'Location'; // RENAME LABEL
   $address_fields['address_2']['type'] = 'select'; // SWITCH TO SELECT
   $address_fields['address_2']['options'] = $location_array; // SET OPTIONS
   return $address_fields;
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.3.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

31 thoughts on “WooCommerce: Turn Checkout Field Into a Drop-down

  1. Can you add a dropdown menu with options, but if an unknown option is written then it stays?

    1. Hi Ivan, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Hi Rodolfo,

    I used this code to see the effect but then removed it.

    Now the “Location 1” field still shows on checkout with id #billing_address_2_field in inspector

    How can I now remove that please.

    1. ..also shows on my Basket: Shipping to: Location 1

      Eeek! Help me undo this please.

      1. You’ll need some adjustments to make it match to your theme and custom plugins. Simply remove the snippet and you’ll get back to default.

        1. Hi Rodolfo,

          I removed the snippet but the “Shipping to: Location 1” field was still displaying on my Basket and Checkout page. It’s been some time since this error so I reverted to a backup from before to get rid of it.

          1. I see. Sounds like a cache-not-cleared issue

  3. Hello thanks for info any question how add class in the options

    1. Hi Jose, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  4. Hi, do you think that it could be posible with the Postal Code / Zip Code? Thanks

    1. Hi Jose, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  5. How to make it searchable dropdown list can you please help me this

    1. Hey Rafi, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  6. Thanks
    I have one question
    When i use this snippet, the drop-down list appear with no placeholder and it select the first value “Location 1”.
    so if user not interested to (and leave it as it is), the value was sent to database is “Location 1” and this may be wrong choose of user.
    How can i add placeholder to this drop-down list to enhance user to choose on value?
    thanks again for you effort

    1. Hi Tamer, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  7. Hi Rodolfo, I have billing and shipping, as I do a personal delivery to certain drop off points, can this be used just under the shipping where customers can choose where to pick up from?

    1. Hello Lisa, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  8. Hello,
    is it possible to change city to a drop down based on state, that will help us on shipping for the big states
    Regards

    1. Hi Mahmoud, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  9. Hi, Code works great.
    I have more than 60 locations to select from so a search within dropdown is more user friendly. Like a user types first 1 or 2 letter and gives relevant options in dropdown to select from

    1. Hi Naveen, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  10. hi how can i display on the order email the option selected

    1. It should already work, as long as you haven’t changed the input name?

      1. Hi yes it work now thanks

        1. Awesome!

  11. Hi, Rodolfo!

    What if I want to dropdown for all cityes of Country? It is to difficult to add each of them by raw.

    1. Hey Mike πŸ™‚ Maybe you could “read” the cities from a public, external database of cities… Hope this helps πŸ™‚

  12. I’m a little confused by why you’d do this. The reason for Address 2 field is for things like adding your Apartment number, or Suite number, etc. A preset dropdown doesn’t allow for that.

    1. Hey Jon, thanks for your comment! It really depends on the particular case and locations I suppose, so this snippet was mostly to show how to turn an input text field into a select box. A client needed this for their unique address requirements, so I thought of sharing it anyway πŸ™‚

  13. Very Very Cool, thanks Business Bloomer!

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.