Posted on

WooCommerce: Turn Address Checkout Field Into Drop-down

Talking about UX optimization, the WooCommerce checkout is where you should focus most of your time. The checkout page of an ecommerce website is one of the main reasons for shopping cart abandonment – additional hidden charges, lack of trust, confusion and also, too many fields to fill out.

Today, we will see how to turn the “Address 2” field into a dropdown. This is if you sell to specific areas and you want to minimize the writing time – why not let customers pick from a list instead?

Turn the WooCommerce checkout address field into a dropdown select

PHP Snippet: Turn Address Checkout Field Into Drop-down – WooCommerce


/**
* @snippet Turn Address Checkout Field Into Drop-down  - WooCommerce
* @how-to Watch tutorial @ https://businessbloomer.com/?p=19055
* @sourcecode https://businessbloomer.com/?p=73350
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.2.5
*/

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';
$address_fields['address_2']['type'] = 'select';
$address_fields['address_2']['options'] = $location_array;

return $address_fields;

}

Where to add this code?

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

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.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

6 thoughts on “WooCommerce: Turn Address Checkout Field Into Drop-down

  1. 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 ๐Ÿ™‚

  2. 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 ๐Ÿ™‚

  3. Very Very Cool, thanks Business Bloomer!

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.