How to Customize the Display Order of WooCommerce Billing Fields

Understanding WooCommerce Billing Fields

WooCommerce billing fields are the key information collection points on the checkout page, including name, address, phone, etc. By default, the display order of these fields is fixed, but we can reorder them using code or plugins.

Using Official Hooks for Customization

WooCommerce provides a powerful filter system to modify billing fields. The core filter is woocommerce_billing_fields.

Basic Method: Modifying Field Priority

Each field has a priority parameter; a lower number means it appears earlier. We can adjust the order by modifying this parameter.

add_filter('woocommerce_billing_fields', 'customize_billing_fields_order');
function customize_billing_fields_order($fields) {
    $fields['billing_first_name']['priority'] = 10;
    $fields['billing_last_name']['priority'] = 20;
    $fields['billing_company']['priority'] = 40;
    $fields['billing_phone']['priority'] = 30;
    uasort($fields, function($a, $b) {
        return ($a['priority'] ?? 50) <=> ($b['priority'] ?? 50);
    });
    return $fields;
}

Complete Example: Redefining All Field Order

Here is a more comprehensive example defining the complete order from name to country.

add_filter('woocommerce_billing_fields', 'reorder_all_billing_fields');
function reorder_all_billing_fields($fields) {
    $new_order = array(
        'billing_first_name',
        'billing_last_name',
        'billing_email',
        'billing_phone',
        'billing_company',
        'billing_address_1',
        'billing_address_2',
        'billing_city',
        'billing_state',
        'billing_postcode',
        'billing_country'
    );
    $ordered_fields = array();
    foreach ($new_order as $field_key) {
        if (isset($fields[$field_key])) {
            $fields[$field_key]['priority'] = (array_search($field_key, $new_order) + 1) * 10;
            $ordered_fields[$field_key] = $fields[$field_key];
        }
    }
    return array_merge($ordered_fields, $fields);
}

Advanced: Using WooCommerce Action Scheduler

For complex scenarios, such as fields added by other plugins, use the woocommerce_checkout_fields filter with an appropriate priority.

add_action('woocommerce_checkout_fields', 'custom_billing_order_with_actions', 9999);
function custom_billing_order_with_actions($checkout_fields) {
    if (!isset($checkout_fields['billing'])) return $checkout_fields;
    $billing_fields = $checkout_fields['billing'];
    $desired_order = ['billing_email', 'billing_first_name', 'billing_last_name', 'billing_phone'];
    uksort($billing_fields, function($a, $b) use ($desired_order) {
        $pos_a = array_search($a, $desired_order);
        $pos_b = array_search($b, $desired_order);
        $pos_a = $pos_a === false ? 999 : $pos_a;
        $pos_b = $pos_b === false ? 999 : $pos_b;
        return $pos_a - $pos_b;
    });
    $priority = 10;
    foreach ($billing_fields as $key => &$field) {
        $field['priority'] = $priority;
        $priority += 10;
    }
    $checkout_fields['billing'] = $billing_fields;
    return $checkout_fields;
}

Notes and Best Practices

• Code Placement: Add code to your child theme's functions.php or use a code snippets plugin.
• Clear Cache: Clear all caches (page, browser) after changes to see the effect.
• Field Keys: Ensure field keys (e.g., billing_first_name) are accurate.
• Test Environment: Test on a staging site first to avoid affecting your live store.
• Plugin Conflicts: Some plugins may add their own fields or modify order; be mindful of priority settings.

Alternative: Using Plugins

If you prefer not to write code, consider these plugins:

• Checkout Field Editor for WooCommerce: Official extension with a visual interface.
• Flexible Checkout Fields: Powerful, supports drag-and-drop ordering.

Using these methods, you can easily customize the display order of WooCommerce billing fields to better match your business needs and user experience.