How to Reorder Checkout Fields in WooCommerce

By, WooCommerce displays the billing and shipping fields in a specific order on the checkout page. However, you may want to customize the order in which these fields are displayed to suit your business needs better. Fortunately, WooCommerce provides a simple way to reorder checkout fields using the woocommerce_default_address_fields hook.

Here’s how you can use this hook to reorder the checkout fields:

Step 1: Identify the Field Keys

Before reordering the checkout fields, we need to identify the field keys. You can do this by using the woocommerce_default_address_fields hook to print out the fields and their keys.

Add the following code snippet to your child theme’s functions.php file or to a custom plugin:

add_action( 'woocommerce_before_checkout_billing_form', 'wp_daily_show_billing_fields', 5 );
function wp_daily_show_billing_fields() {
	$fields = WC()->checkout()->get_checkout_fields( 'billing' );
	echo '<pre>';
	print_r( $fields );
	echo '</pre>';
}

This will display an array of all the billing fields and their keys on the checkout page. You can repeat this process for the shipping fields by changing 'billing' to 'shipping'.

Step 2: Reorder the Fields

Once you have identified the field keys, you can use the woocommerce_default_address_fields hook to reorder the fields. Add the following code snippet to your child theme’s functions.php file or a custom plugin:

add_filter( 'woocommerce_default_address_fields', 'wp_daily_checkout_fields_order' );

function wp_daily_checkout_fields_order( $fields ) {
	// fields priorities:
	// 'first_name' - 10
	// 'last_name' - 20
	// 'company' - 30
	// 'country' - 40
	// 'address_1' - 50
	// 'address_2' - 60
	// 'city' - 70
	// 'state' - 80
	// 'postcode' - 90
	$fields['first_name']['priority'] = 10;
	$fields['last_name']['priority'] = 20;
	$fields['company']['priority'] = 30;
	$fields['country']['priority'] = 40;
	
	return $fields;
}

Conclusion

Reordering the checkout fields using the woocommerce_default_address_fields hook is a simple yet powerful way to improve the checkout experience for your customers. By tailoring the checkout fields to match the specific needs of your business, you can create a more streamlined and user-friendly checkout process that can help boost your sales. Additionally, you can use this hook even for the backend order creation page in WooCommerce. Follow this guide to customize the order of billing and shipping fields in WooCommerce and improve the checkout process for your customers.