如何在WooCommerce结账页面添加两个联动的下拉选择(combobox)字段

总共分为3个部分，你可以根据自己的需求选择： #

1. 前端联动逻辑（核心实现） #

将以下代码添加到你主题的functions.php文件中即可实现字段联动效果：

add_action('wp_footer', 'postcode_delivery_date_linkage_script');
function postcode_delivery_date_linkage_script() {
    // 仅在结算页加载脚本
    if (is_checkout() && !is_wc_endpoint_url()) :
    ?>
    <script>
    jQuery(document).ready(function($){
        // 配置邮编对应的可选项
        const postcodeDeliveryMap = {
            '28001': ['周一', '周三'],
            '28002': ['周二', '周四'],
            '28923': ['周五', '周日']
        };
        // 缓存配送日期字段元素，如果你自己的字段ID不是delivery_date请替换成实际值
        const $deliveryField = $('#delivery_date');
        // 保存配送日期原始全量选项（首次加载时获取）
        let originDeliveryOptions = [];
        if ($deliveryField.length) {
            $deliveryField.find('option').each(function(){
                originDeliveryOptions.push({
                    value: $(this).val(),
                    text: $(this).text()
                });
            });
        }

        // 监听邮编字段变化
        $('select#billing_postcode, select#shipping_postcode').on('change', function(){
            const selectedPostcode = $(this).val();
            $deliveryField.empty();

            // 未选择邮编时显示提示
            if (!selectedPostcode || !postcodeDeliveryMap[selectedPostcode]) {
                $deliveryField.append('<option value="">请先选择邮政编码</option>');
                return;
            }

            // 加载对应邮编的可选配送日
            const allowedDates = postcodeDeliveryMap[selectedPostcode];
            $deliveryField.append('<option value="">请选择配送日期</option>');
            originDeliveryOptions.forEach(option => {
                if (allowedDates.includes(option.text)) {
                    $deliveryField.append(`<option value="${option.value}">${option.text}</option>`);
                }
            });
        });

        // 页面加载完成后触发一次，适配用户已经填过邮编的场景
        $('select#billing_postcode, select#shipping_postcode').trigger('change');
    });
    </script>
    <?php
    endif;
}

注意：如果你的配送日期字段ID不是delivery_date，可以在浏览器结算页右键点击配送日期下拉框→检查，查看对应的元素ID替换即可。

2. 后端提交校验（避免前端限制被绕过） #

仅靠前端JS可以被用户恶意修改绕过，建议添加以下后端校验逻辑，同样加入functions.php：

add_action('woocommerce_checkout_process', 'validate_postcode_delivery_date_match');
function validate_postcode_delivery_date_match() {
    // 配置匹配规则和前端保持一致
    $postcodeDeliveryMap = [
        '28001' => ['周一', '周三'],
        '28002' => ['周二', '周四'],
        '28923' => ['周五', '周日']
    ];
    // 获取用户提交的邮编和配送日期，这里用收货地址邮编，你也可以改成 billing_postcode 用账单邮编
    $postcode = !empty($_POST['shipping_postcode']) ? wc_clean($_POST['shipping_postcode']) : wc_clean($_POST['billing_postcode']);
    $deliveryDate = !empty($_POST['delivery_date']) ? wc_clean($_POST['delivery_date']) : '';

    if (empty($postcode) || empty($deliveryDate)) return;

    // 校验是否匹配
    if (isset($postcodeDeliveryMap[$postcode]) && !in_array($deliveryDate, $postcodeDeliveryMap[$postcode])) {
        wc_add_notice(sprintf('邮政编码%s仅支持%s配送，请重新选择', $postcode, implode('、', $postcodeDeliveryMap[$postcode])), 'error');
    }
}

3. （可选）完全不用插件实现配送日期字段 #

如果你想彻底卸载WooCommerce Checkout Field Editor插件，可以用以下代码直接添加配送日期字段，替换掉插件的功能：

add_filter('woocommerce_checkout_fields', 'add_delivery_date_field');
function add_delivery_date_field($fields) {
    $fields['billing']['delivery_date'] = [
        'type' => 'select',
        'label' => '配送日期',
        'required' => true,
        'options' => [
            '' => '请选择配送日期',
            '周一' => '周一',
            '周二' => '周二',
            '周三' => '周三',
            '周四' => '周四',
            '周五' => '周五',
            '周六' => '周六',
            '周日' => '周日'
        ],
        'priority' => 120 // 调整字段显示位置，数值越大越靠后
    ];
    return $fields;
}

// 保存配送日期到订单元数据
add_action('woocommerce_checkout_update_order_meta', 'save_delivery_date_to_order');
function save_delivery_date_to_order($order_id) {
    if (!empty($_POST['delivery_date'])) {
        update_post_meta($order_id, '配送日期', wc_clean($_POST['delivery_date']));
    }
}

// 后台订单详情页显示配送日期
add_action('woocommerce_admin_order_data_after_billing_address', 'admin_show_delivery_date', 10, 1);
function admin_show_delivery_date($order) {
    $deliveryDate = get_post_meta($order->get_id(), '配送日期', true);
    if ($deliveryDate) {
        echo '<p><strong>配送日期：</strong>' . esc_html($deliveryDate) . '</p>';
    }
}

内容的提问来源于stack exchange，提问作者Luis Vasquez