Home » WooCommerce: Turn Checkout Field Into a Drop-down

WooCommerce: Turn Checkout Field Into a Drop-down

by Tutor Aspire

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 tutoraspire.com FREE
 * @author        Tutor Aspire
 * @testedwith    WooCommerce 6
 * @donate $9     https://tutoraspire.com
 */
*/

add_filter( 'woocommerce_default_address_fields' , 'tutoraspire_address_field_dropdown' );

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

You may also like