Reorder Checkout Fields in WooCommerce

If you didn’t read my complete tutorial about WooCommerce checkout fields, I highly recommend to read it first, then come back here.

Sorting Fields within a Group

First thing you have to keep in mind, that fields are separated into groups, and actually there are 4 groups:

• billing – Billing Address
• shipping – Shipping Address
• account – Account Login
• order – Additional information

Each of these groups contains fields, I think you know which ones. And you can super easily reorder them with a special priority parameter.

Example – I would like to make the email field the first one to display, I can do it with these couple lines of code:

add_filter( 'woocommerce_checkout_fields', 'misha_email_first' );

function misha_email_first( $checkout_fields ) {
	$checkout_fields['billing']['billing_email']['priority'] = 4;
	return $checkout_fields;
}

The result:

Why I set priority to 4 ? Let me explain, each of default fields has its own priority, all of them are listed in the table below. So, according to the table, to make the email field first I have to use a value less than 10.

If you changed the fields order and your result looks weird (for example if you tried to place a fullwidth field between halfwidth fields, e.g. billing email between first and last names), you can fix it easily with this tip.

woocommerce_default_address_fields

There is also a hook – woocommerce_default_address_fields which allows to change the order for both billing and shipping fields at the same time. So, for our example, the code will look like this:

add_filter( 'woocommerce_default_address_fields', 'misha_email_first' );

function misha_email_first( $address_fields ) {
	// as you can see, no needs to specify a field group anymore
	$address_fields['email']['priority'] = 4;
	return $address_fields;
}

Moving a Field to Another Field Group

For me this way of sorting seems a little tricky ✨ and won’t work in 100% situations, for example you can not move the billing country field under Order Notes. Well, actually you can, but (a huge "but"), when you try to change a country to the United States for example, the States won’t appear in the nearest field.

Here is the example, we move the billing email field into another group:

add_filter( 'woocommerce_checkout_fields', 'misha_billing_email_another_group' );

function misha_billing_email_another_group( $checkout_fields ){

	// 1. We assign a field array to another group here
	$checkout_fields['order']['billing_email'] = $checkout_fields['billing']['billing_email'];

	// 2. Remove a field from a previous location
	unset( $checkout_fields['billing']['billing_email'] );

	return $checkout_fields;

}

And it works pretty good.

Misha Rudrastyh

I develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me