Insights & News

How to Reorder WooCommerce Checkout Fields by Priority

Overview

If you need to reorganise checkout fields on WooCommerce's final order details page, this can be accomplished relatively straightforwardly. While the WooCommerce Checkout Field Editor plugin exists, theme-specific sorting functions may prevent the drag-and-drop reordering feature from functioning properly.

Solution

Add code to your child theme's functions.php file to manage field ordering through priority levels. The approach leverages WooCommerce's built-in add_filter("woocommerce_checkout_fields") hook.

The implementation involves:

  1. Creating an ordered array of field names
  2. Iterating through the array to reorganise fields
  3. Assigning numerical priority values to each field (incrementing by 10s)

Code Implementation

add_filter("woocommerce_checkout_fields", "custom_order_fields");

function custom_order_fields($fields) {
$order = array(
"billing_first_name",
"billing_last_name",
"billing_email",
"billing_phone",
"billing_country",
"billing_company",
"billing_address_1",
"billing_address_2",
"billing_city",
"billing_postcode",
"po-number2",
"account-number2",
"nc2",
);

foreach($order as $field) {
$ordered_fields[$field] = $fields["billing"][$field];
}

$fields["billing"] = $ordered_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_country']['priority'] = 50;
$fields['billing']['billing_company']['priority'] = 60;
$fields['billing']['billing_address_1']['priority'] = 70;
$fields['billing']['billing_address_2']['priority'] = 80;
$fields['billing']['billing_city']['priority'] = 90;
$fields['billing']['billing_postcode']['priority'] = 95;
$fields['billing']['po-number2']['priority'] = 100;
$fields['billing']['account-number2']['priority'] = 101;
$fields['billing']['nc2']['priority'] = 102;

return $fields;
}

Testing

This solution was validated using a custom theme with WooCommerce version 3.4.3.

Grow your pipeline with Revio.

Tell us your growth target and we'll show you exactly how we'd get there — channels, timeline and the numbers we'd hold ourselves to.