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
Name | Priority |
---|---|
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_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 |
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.


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
Great post and very helpful! Just a quick note: The code for woocommerce_default_address_fields needs to return $address_fields instead of $checkout_fields.
Thank you! 🙃 Updated
Hi
thank you very much
first solution worked for me
best regards
Thanks a lot!
Very useful and practical
nice and simple thanks
This worked like a charm. Thank you so much for sharing.