Reorder Checkout Fields

In this tutorial I am going to talk about how to change the order of checkout fields in WooCommerce.

Reordering Fields within a Field Group

First things first, you have to keep in mind, that checkout fields in WooCommerce are separated into groups, and actually there are 4 of them:

Each of these groups contains fields, I think you could’ve guess which ones. And you can super-easily reorder them with 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;
}

If you have no idea where to insert the code, please use functions.php file in your current theme. If your theme receives updates from time to time and you install them, then I recommend you to use child theme’s functions.php or even a custom plugin.

The result:

WooCommerce change checkout fields order

Why I set priority to 4 ?

Let me explain – each one 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.

Checkout fields priority

NamePriority
billing_first_name10
billing_last_name20
billing_company30
billing_country40
billing_address_150
billing_address_260
billing_city70
billing_state80
billing_postcode90
billing_phone100
billing_email110
shipping_first_name10
shipping_last_name20
shipping_company30
shipping_country40
shipping_address_150
shipping_address_260
shipping_city70
shipping_state80
shipping_postcode90

Separate fields into columns

Sometimes you’re just rearranging checkout fields and the result doesn’t look like expected, for example if you decided to set email field priority to 15, you may face this.

reorder checkout fields without fixing the styles

On the screenshot above I would suggest to display First name and Email address in one line and then – last name and company name, both on separate lines.

Actually each checkout field has its own style (CSS class) depending on its position, there are 3 main classes:

Knowing that, let’s change the CSS classes via the same woocommerce_checkout_fields hook.

add_filter( 'woocommerce_checkout_fields' , 'misha_checkout_fields_styling', 99 );

function misha_checkout_fields_styling( $checkout_fields ) {

	$checkout_fields[ 'billing' ][ 'billing_email' ][ 'class' ][0] = 'form-row-last';
	$checkout_fields['billing'][ 'billing_last_name' ][ 'class' ][0] = 'form-row-wide';

	return $checkout_fields;

}
change checkout fields alignment in WooCommerce

Moving Fields 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
Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter