如何根据所选配送方式显示必填额外订单备注字段？

以下是适配你需求的完整解决方案：通过监听配送方式的选择状态，动态显示/隐藏订单备注字段，并仅在选中特定配送方式时将其设为必填项，同时包含前端交互和后端验证逻辑。

// 默认隐藏订单备注并设置初始状态
add_filter( 'woocommerce_checkout_fields', 'customize_order_notes_default_state' );
function customize_order_notes_default_state( $fields ) {
    // 默认隐藏订单备注
    $fields['order']['order_comments']['class'][] = 'hidden-note';
    // 初始设为非必填，后续通过JS动态修改
    $fields['order']['order_comments']['required'] = false;
    return $fields;
}

// 添加配送方式切换的控制逻辑
add_action( 'woocommerce_before_order_notes', 'shipping_method_toggle_order_notes' );
function shipping_method_toggle_order_notes() {
    // 替换成你的目标配送方式ID，比如'local_pickup'或自定义配送方式ID
    $target_shipping_id = 'your_target_shipping_method_id';
    ?>
    <style>
        .hidden-note { display: none !important; }
    </style>
    <script type="text/javascript">
    jQuery(function($){
        // 元素选择器定义
        const shippingSelect = 'input[name^="shipping_method"]';
        const orderNoteField = '#order_comments_field';
        const orderNoteInput = '#order_comments';

        // 初始化备注状态
        $(orderNoteField).addClass('hidden-note');
        $(orderNoteInput).prop('required', false);

        // 核心切换逻辑函数
        function toggleOrderNote() {
            const isTargetSelected = $(shippingSelect + '[value="<?php echo esc_js($target_shipping_id); ?>"]').is(':checked');
            
            if (isTargetSelected) {
                // 显示备注并设为必填
                $(orderNoteField).removeClass('hidden-note');
                $(orderNoteInput).prop('required', true);
                $(orderNoteInput).closest('p').addClass('validate-required');
            } else {
                // 隐藏备注、取消必填并清空内容
                $(orderNoteField).addClass('hidden-note');
                $(orderNoteInput).prop('required', false);
                $(orderNoteInput).val('');
                $(orderNoteInput).closest('p').removeClass('validate-required');
            }
        }

        // 页面加载时执行一次，处理默认选中的配送方式
        toggleOrderNote();

        // 监听配送方式切换事件
        $(document.body).on('change', shippingSelect, toggleOrderNote);
        // 监听WooCommerce配送方式更新事件（如购物车刷新后）
        $(document.body).on('updated_shipping_method', toggleOrderNote);
    });
    </script>
    <?php
}

// 服务器端验证：防止前端验证被绕过
add_action( 'woocommerce_checkout_process', 'validate_order_note_for_target_shipping' );
function validate_order_note_for_target_shipping() {
    $target_shipping_id = 'your_target_shipping_method_id'; // 和上方保持一致
    $selected_shipping = WC()->session->get('chosen_shipping_methods')[0] ?? '';

    if ($selected_shipping === $target_shipping_id && empty(trim($_POST['order_comments']))) {
        wc_add_notice( __('请填写另一地址信息。', 'woocommerce'), 'error' );
    }
}

关键配置说明 #

1. 替换目标配送方式ID：将代码中的your_target_shipping_method_id替换为你实际需要触发的配送方式ID。你可以通过以下方式获取：

   • 进入WooCommerce后台的配送设置页面查看
   • 在结账页面打开浏览器开发者工具，查看配送选项的value属性值

2. 逻辑说明

   • 前端：监听配送方式的选择变化，包括用户主动切换和页面自动更新配送方式的场景，动态切换备注字段的显示状态和必填属性
   • 后端：增加服务器端验证，确保选中目标配送方式时用户确实填写了备注，避免前端验证被绕过

内容的提问来源于stack exchange，提问作者HB.