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:

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

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:

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

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.

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:

• form-row-first – half-width, first,
• form-row-last – half-width, last,
• form-row-wide – fullwidth.

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;

}

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.

# WooCommerce, Checkout, Checkout Fields

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