Reorder Woocommerce checkout fields

As @Byeongin correctly mentions in his answer, apart from the backend ordering (that @Frits answer covers) there is also ordering that happens via JavaSrcipt in the front-end when the user selects specific countries from the dropdown menu.

If you also want to stop this front-end reordering from happening, the best solution I've encountered so far would be to hook into the woocommerce_get_country_locale filter and remove the priority overrides that are added there.

Something like the following will do the trick (tested with WooCommerce v3.5.4):

add_filter( 'woocommerce_get_country_locale', function( $locale ) {
    foreach ( $locale as $country_code => $locale_fields ) {
        foreach ( $locale_fields as $field_key => $field_options ) {
            if ( isset( $field_options['priority'] ) ) {
                unset( $field_options['priority'] );
            }

            $locale[ $country_code ][ $field_key ] = $field_options;
        }
    }

    return $locale;
} );

To change woocommerce checkout fields you need to also change field order and required class base on display. you can add below code in functions.php and it work.

add_filter("woocommerce_checkout_fields", "woocommerce_reorder_checkout_fields", 9999);

if ( ! function_exists( 'woocommerce_reorder_checkout_fields' ) ) {
    function woocommerce_reorder_checkout_fields( $fields ) {

        /* To reorder state field you need to add this array. */
        $order = array(
        "billing_first_name", 
        "billing_last_name", 
        "billing_country", 
        "billing_state", 
        "billing_address_1", 
        "billing_address_2", 
        "billing_email", 
        "billing_phone"
        );

        foreach($order as $field) {
        $ordered_fields[$field] = $fields["billing"][$field];
        }

        $fields["billing"] = $ordered_fields;

        /* To change email and phone number you have to add only class no need to add priority. */

        $fields['billing']['billing_email']['class'][0] = 'form-row-first';
        $fields['billing']['billing_phone']['class'][0] = 'form-row-last';

    return $fields;
    }
}

See attached image For more info check this link

The ordering(sorting) works on address-i18n.min.js not in php code.

In my case, I did something wrong on my js code. So, the ordering didn't work well( javascript stop there ).

Please check dev console and js error.

And this is php code which change only priority.

function rpf_edit_default_address_fields($fields) {

  /* ------ reordering ------ */
  $fields['country']['priority'] = 10;
  $fields['first_name']['priority'] = 20;
  $fields['last_name']['priority'] = 30;
  $fields['address_1']['priority'] = 40;
  $fields['address_2']['priority'] = 50;
  $fields['city']['priority'] = 60;
  $fields['state']['priority'] = 70;
  $fields['postcode']['priority'] = 80;

  return $fields;
}
add_filter( 'woocommerce_default_address_fields', 'rpf_edit_default_address_fields', 100, 1 );

Good Luck!

The method you are using no longer works (since the WooCommerce 3.0.4 update - link to github issue here). It's not exactly a bug, but rather a change of spec.

To fix this, you simply need to adjust the priority of each of the fields to fit the order that you want.

add_filter("woocommerce_checkout_fields", "custom_override_checkout_fields", 1);
function custom_override_checkout_fields($fields) {
    $fields['billing']['billing_first_name']['priority'] = 1;
    $fields['billing']['billing_last_name']['priority'] = 2;
    $fields['billing']['billing_company']['priority'] = 3;
    $fields['billing']['billing_country']['priority'] = 4;
    $fields['billing']['billing_state']['priority'] = 5;
    $fields['billing']['billing_address_1']['priority'] = 6;
    $fields['billing']['billing_address_2']['priority'] = 7;
    $fields['billing']['billing_city']['priority'] = 8;
    $fields['billing']['billing_postcode']['priority'] = 9;
    $fields['billing']['billing_email']['priority'] = 10;
    $fields['billing']['billing_phone']['priority'] = 11;
    return $fields;
}

add_filter( 'woocommerce_default_address_fields', 'custom_override_default_locale_fields' );
function custom_override_default_locale_fields( $fields ) {
    $fields['state']['priority'] = 5;
    $fields['address_1']['priority'] = 6;
    $fields['address_2']['priority'] = 7;
    return $fields;
}

Please note that it's not the line in code that adjusts the placement in the order, but the priority assigned to the field. In this case, I changed the ['billing_state'] priority to 5 which is (in this example) after ['billing_country'] and before ['billing_address_1'].

---

EDIT:

As per the comments, this wasn't working for some reason (it worked on my first test WooCommerce installation, but I managed to get it to fail after changing the store location).

After some digging, I found that the default locale settings get applied on top of the override (not sure how else to explain this, but bear with me).

I managed to get an install running where the above code was not working, and managed to fix it by adding the following code as well:

add_filter( 'woocommerce_default_address_fields', 'custom_override_default_locale_fields' );
function custom_override_default_locale_fields( $fields ) {
    $fields['state']['priority'] = 5;
    $fields['address_1']['priority'] = 6;
    $fields['address_2']['priority'] = 7;
    return $fields;
}

I have added the extra snippet to the first code block to validate the entire block.