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;
}

Related posts:

  1. WooCommerce: Show Message Upon Country Selection @ Checkout
  2. WooCommerce: How to Add a Custom Checkout Field
  3. WooCommerce: Add House Number Field @ Checkout
  4. WooCommerce: Set Default Billing City (or other fields) @ Checkout
  5. WooCommerce: Checkbox to Hide/Show Custom Checkout Field
  6. WooCommerce Checkout Fields Customization Guide
  7. WooCommerce: Hide Checkout Fields if Virtual Product @ Cart
  8. WooCommerce: Display Required Field Errors “Inline” @ Checkout
  9. WooCommerce: Rename “State” Label @ Checkout
  10. WooCommerce: Maxlength and Minlength for Checkout 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. Ivan

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

    Reply
    1. Rodolfo Melogli

      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!

      Reply
  2. Dale

    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.

    Reply
    1. Dale

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

      Eeek! Help me undo this please.

      Reply
      1. Rodolfo Melogli

        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.

        Reply
        1. Dale

          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.

          Reply
          1. Rodolfo Melogli

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

            Reply
  3. Jose Monterrey

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

    Reply
    1. Rodolfo Melogli

      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!

      Reply
  4. Jose Pretzanzin

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

    Reply
    1. Rodolfo Melogli

      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!

      Reply
  5. Rafi lathif

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

    Reply
    1. Rodolfo Melogli

      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!

      Reply
  6. Tamer

    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

    Reply
    1. Rodolfo Melogli

      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!

      Reply
  7. Lisa

    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?

    Reply
    1. Rodolfo Melogli

      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!

      Reply
  8. Mahmoud

    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

    Reply
    1. Rodolfo Melogli

      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!

      Reply
  9. Naveen

    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

    Reply
    1. Rodolfo Melogli

      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!

      Reply
  10. esteban

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

    Reply
    1. Rodolfo Melogli

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

      Reply
      1. esteban

        Hi yes it work now thanks

        Reply
        1. Rodolfo Melogli

          Awesome!

          Reply
  11. Mike

    Hi, Rodolfo!

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

    Reply
    1. Rodolfo Melogli

      Hey Mike 🙂 Maybe you could “read” the cities from a public, external database of cities… Hope this helps 🙂

      Reply
  12. Jon

    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.

    Reply
    1. Rodolfo Melogli

      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 🙂

      Reply
  13. conrad

    Very Very Cool, thanks Business Bloomer!

    Reply
    1. Rodolfo Melogli

      🙂

      Reply
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. Required fields are marked *