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