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.

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

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.

See also  How To Add A Checkbox To Woocommerce Checkout Page

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.9.3
*/ 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.
See also  WooCommerce Dynamic Pricing Based on Cart Contents - 2024

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!

0 0 votes
Article Rating

Stay In Touch

Was this post helpful? Why not show your support and buy me a coffee?

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Scroll to Top
×