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 Get CustomizeWoo.com FREE * @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;   }

WooCommerce: Move Order Notes @ Checkout

 We already saw how to hide Order Notes on the WooCommerce checkout page. This time around, however, our goal is to “move” them – and specifically remove them from their default position (under the shipping form) and add them back under the billing form.

As you can imagine, this is a combo snippet: (1) we remove them (and we’ll use the snippet as per the link above) and (2) we create a new billing field. Finally, (3) we also need to “save” this new field value into the original order notes custom field meta.

If this is difficult to understand don’t worry – just copy/paste the snippet into your functions.php and see magic happen. Enjoy!

Moving order notes from below shipping to the billing form @ WooCommerce Checkout

PHP Snippet: Move Order Notes @ WooCommerce Checkout

/**  * @snippet       Move Order Notes @ WooCommerce Checkout  * @how-to        Get CustomizeWoo.com FREE  * @author        Rodolfo Melogli  * @compatible    WooCommerce 3.9  * @donate $9     https://businessbloomer.com/bloomer-armada/  */   // 1. Hide default notes   add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );   // 2. Create new billing field   add_filter( 'woocommerce_checkout_fields' , 'bbloomer_custom_order_notes' );   function bbloomer_custom_order_notes( $fields ) {    $fields['billing']['new_order_notes'] = array(       'type' => 'textarea',       'label' => 'New Order Notes',       'class' => array('form-row-wide'),       'clear' => true,       'priority' => 999,    );    return $fields; }   // 3. Save to existing order notes   add_action( 'woocommerce_checkout_update_order_meta', 'bbloomer_custom_field_value_to_order_notes', 10, 2 );   function bbloomer_custom_field_value_to_order_notes( $order_id, $data ) {    if ( ! is_object( $order_id ) ) {       $order = wc_get_order( $order_id );    }    $order->set_customer_note( isset( $data['new_order_notes'] ) ? $data['new_order_notes'] : '' );    wc_create_order_note( $order_id, $data['new_order_notes'], true, true );    $order->save(); }