Reorder Checkout Fields in WooCommerce

Updated on in
  1. Blog
  2. 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:

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:

WooCommerce change checkout fields order

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.

Group Name Priority
billing billing_first_name 10
billing_last_name 20
billing_company 30
billing_country 40
billing_address_1 50
billing_address_2 60
billing_city 70
billing_state 80
billing_postcode 90
billing_phone 100
billing_email 110
shipping shipping_first_name 10
shipping_last_name 20
shipping_company 30
shipping_country 40
shipping_address_1 50
shipping_address_2 60
shipping_city 70
shipping_state 80
shipping_postcode 90
account account_password –
order order_comments –

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.

Moving WooCommerce checkout fields between field groups

Related Posts

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 11 yrs of experience.

Need some custom developer help? Get in touch