Reordering WooCommerce checkout fields 2024

In this post, you will learn how the WooCommerce checkout page is constructed and how to reorder WooCommerce checkout fields. This is an extremely powerful skillset to have as you can modify the checkout field to your unique requirements.

First, the checkout field form comprises 4 main sections:

• Billing: The billing section comprises the form fields necessary for the billing details for the order. These details are often used by payment gateways.
• Shipping: The shipping fields comprise similar form fields as the billing fields and are designed to capture the delivery address of the shopper. The WooCommerce checkout can automatically populate these fields based on the billing field data.
• Account: The account section allows existing users to log into their account or create a new account.
• Order: Additional information (order notes)

Each of these fields contain the necessary form fields to place an order, and in the billing and shipping form groups each one is ordered by priority starting at 10 and increasing by 10 each with each field. The list of fields is shown below with the priority each field is assigned.

As you can see, there is plenty of room to move the order around, which can be done by assigning a new priority to each field. Now, let’s look at how you can practically implement these changes in your WooCommerce store.

How to Reorder WooCommerce Checkout Fields

To modify the order of the checkout fields, you will need to use the woocommerce_checkout_fields filter. This filter allows you to change properties of the checkout fields, including their order, by modifying the priority attribute.

Here is a simple example of how you can reorder some of the billing and shipping fields:

/*
 * Snippet: Reordering WooCommerce checkout fields 2024
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?751
 * Tested with WooCommerce 8.8.2
*/
function wcsuccess_reorder_checkout_fields( $fields ) {
    // Reorder billing fields
    $fields['billing']['billing_first_name']['priority'] = 10;
    $fields['billing']['billing_last_name']['priority'] = 20;
    $fields['billing']['billing_email']['priority'] = 30;
    $fields['billing']['billing_phone']['priority'] = 40;
    $fields['billing']['billing_address_1']['priority'] = 50;
    $fields['billing']['billing_address_2']['priority'] = 60;
    $fields['billing']['billing_city']['priority'] = 70;
    $fields['billing']['billing_state']['priority'] = 80;
    $fields['billing']['billing_postcode']['priority'] = 90;
    $fields['billing']['billing_country']['priority'] = 100;
    
    // Reorder shipping fields
    $fields['shipping']['shipping_first_name']['priority'] = 10;
    $fields['shipping']['shipping_last_name']['priority'] = 20;
    $fields['shipping']['shipping_address_1']['priority'] = 30;
    $fields['shipping']['shipping_address_2']['priority'] = 40;
    $fields['shipping']['shipping_city']['priority'] = 50;
    $fields['shipping']['shipping_state']['priority'] = 60;
    $fields['shipping']['shipping_postcode']['priority'] = 70;
    $fields['shipping']['shipping_country']['priority'] = 80;

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wcsuccess_reorder_checkout_fields' );

Explanation of the Code

• woocommerce_checkout_fields filter: This hook allows you to modify the existing checkout fields.
• Reordering Fields: You change the priority for each field. Lower numbers mean the field will appear earlier in the checkout form. In the example above, we’ve prioritized contact information (like email and phone) before the address details in the billing section.

Implementing the Code

To implement this, simply add the code to your theme’s functions.php file or a site-specific plugin. This will override the default order of the checkout fields on your WooCommerce site.

Conclusion

Reorganizing the checkout fields on your WooCommerce site can help create a more streamlined checkout process, tailored to your business and your customers’ needs. By understanding how to manipulate these fields, you can significantly enhance the user experience and potentially increase conversions by reducing friction during checkout.

Adjusting the priorities as per your business logic and customer flow can make a big difference in how users interact with your checkout page. Remember, always backup your website before making any changes to the code!

John Cook

I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.

Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science.  I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.

Google Scholar ID: https://scholar.google.com.au/citations?user=0KvpwNEAAAAJ&hl=en

ORCID: https://orcid.org/0000-0001-8113-1296