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!
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
* @community https://businessbloomer.com/club/
*/
*/
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;
}
Can you add a dropdown menu with options, but if an unknown option is written then it stays?
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!
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.
..also shows on my Basket: Shipping to: Location 1
Eeek! Help me undo this please.
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.
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.
I see. Sounds like a cache-not-cleared issue
Hello thanks for info any question how add class in the options
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!
Hi, do you think that it could be posible with the Postal Code / Zip Code? Thanks
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!
How to make it searchable dropdown list can you please help me this
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!
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
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!
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?
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!
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
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!
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
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!
hi how can i display on the order email the option selected
It should already work, as long as you haven’t changed the input name?
Hi yes it work now thanks
Awesome!
Hi, Rodolfo!
What if I want to dropdown for all cityes of Country? It is to difficult to add each of them by raw.
Hey Mike 🙂 Maybe you could “read” the cities from a public, external database of cities… Hope this helps 🙂
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.
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 🙂
Very Very Cool, thanks Business Bloomer!
🙂