Set specific display order on WooCommerce custom checkout fields

Question

I am adding 20 custom checkout fields to the woocommerce checkout billing section page. It was previously working fine. But recently we discovered the display order of the fields has been jumbled. I am hoping someone can help me display the custom fields in the order they are added.

I have disabled all plugins except woocommerce. I am using the twenty-nineteen theme. I removed all the custom fields, then added them back one at a time. Curiously I was able to add 11 fields which displayed in order. When 12 or more fields we added the display was jumbled. I replaced all the tailored custom fields with a multiple copies of a simple test field but the problem still persists.

The following code was added to the themes functions.php

add_filter( 'woocommerce_checkout_fields' , 
'custom_override_checkout_fields',10,3 ); 

function custom_override_checkout_fields( $fields ) {

//unset the unwanted billing fields

unset($fields['order']['order_comments']);
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_1']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_postcode']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_phone']);

//add custom fields

$fields['billing']['billing_test1'] = array(
    'label'       => __('test1', 'woocommerce'),
    'placeholder' => _x('', 'placeholder', 'woocommerce'),
    'required'    => true,
    'clear'       => true,
    'class'     => array('form-row'),
    );

$fields['billing']['billing_test2'] = array(
    'label'       => __('test2', 'woocommerce'),
    'placeholder' => _x('', 'placeholder', 'woocommerce'),
    'required'    => true,
    'clear'       => true,
    'class'     => array('form-row'),
    );

//a further 18 copies of the above field test3->test20

 return $fields;

}

The layout should be:-

First name    Last name
Email address
test1
test2 
test3
....
test20

The actual layout is:-

First name
test10
test19
test18
test17
test16
test15
test14
test13
test12
test11
Last name
test9
test8
test7
test6
test5
test4
test3
test2
test1

LoicTheAztec LoicTheAztec · Accepted Answer · 2019-09-12T21:42:20

You have missed the form field "priority" parameter, that allow to reorder form fields… In the below code I am using a for loop to generate dynamically the 20 field (just for testing as it is quickest).

Here those form fields priority start at 200 for the first one and it's increased by 10 for each.

The code:

add_filter( 'woocommerce_checkout_fields', 'customizing_checkout_fields', 10, 1 );
function customizing_checkout_fields( $fields ) {

    ## 1. unset the unwanted billing fields

    unset($fields['order']['order_comments']);
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_city']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_state']);
    unset($fields['billing']['billing_phone']);

    ## 2. Add 20 form fields (from "Test 1" to "Test 20")

    // Using a for loop to make the 20 fields dynamically
    for ( $i = 1, $j = 0; $i <= 20; $i++, $j += 10 ) {

        $fields['billing']['billing_test' . $i] = array(
            'label'       => __('Test', 'woocommerce') . ' ' . $i,
            'placeholder' => _x('', 'placeholder', 'woocommerce'),
            'required'    => true,
            'clear'       => true,
            'class'       => array('form-row'),
            'priority'    => (200 + $j) // <== The priority starting at 200 and increasing by 10 each time
        );
    }

    return $fields;
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

So In your case you will use (without the for loop):

add_filter( 'woocommerce_checkout_fields', 'customizing_checkout_fields', 10, 1 );
function customizing_checkout_fields( $fields ) {

    ## 1. unset the unwanted billing fields

    unset($fields['order']['order_comments']);
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_city']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_state']);
    unset($fields['billing']['billing_phone']);

    ## 2. Add 20 form fields (from "Test 1" to "Test 20")

    $fields['billing']['billing_test1'] = array(
        'label'       => __('Test 1', 'woocommerce'),
        'placeholder' => _x('', 'placeholder', 'woocommerce'),
        'required'    => true,
        'clear'       => true,
        'class'       => array('form-row'),
        'priority'    => 200 // <== <== <== priority
    );

    $fields['billing']['billing_test2'] = array(
        'label'       => __('Test 2', 'woocommerce'),
        'placeholder' => _x('', 'placeholder', 'woocommerce'),
        'required'    => true,
        'clear'       => true,
        'class'       => array('form-row'),
        'priority'    => 210 // <== Increased by 10
    );

    // A further 18 copies of the above field from "Test 3" to "Test 20"

    return $fields;
}

Set specific display order on WooCommerce custom checkout fields

1 Answers