在 WooCommerce 自定义结帐字段上设置特定的显示顺序

Question

我正在向 woocommerce 结帐计费部分页面添加 20 个自定义结帐字段。它以前工作正常。但是最近发现字段的显示顺序乱了。我希望有人能帮我按添加的顺序显示自定义字段。

我已经禁用了除 woocommerce 之外的所有插件。我正在使用二十九主题。我删除了所有自定义字段，然后一次添加一个。奇怪的是，我能够添加 11 个按顺序显示的字段。当我们添加 12 个或更多字段时，显示会变得混乱。我用一个简单的测试字段的多个副本替换了所有定制的自定义字段，但问题仍然存在。

主题中添加了以下代码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;

}

布局应该是：-

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

实际布局是：-

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

Answer 1

您错过了表单字段“priority”参数，该参数允许对表单字段重新排序……在下面的代码中，我使用 for 循环动态生成 20 字段（仅用于测试，因为它是最快的）。

这里那些表单字段的优先级从第一个 200 开始，每个增加 10。

代码：

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;
}

代码进入您的活动子主题（或活动主题）的 function.php 文件。已测试并有效。

因此在您的情况下，您将使用（没有 for 循环）：

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;
}

在 WooCommerce 自定义结帐字段上设置特定的显示顺序

Set specific display order on WooCommerce custom checkout fields

php

wordpress

woocommerce

checkout

custom-fields