WooCommerce结账页添加带搜索下拉框的代码改造咨询

直接替换原有代码即可实现全部需求，不需要额外安装插件。

各需求实现说明 #

1. 下拉搜索功能 #

WooCommerce前端默认加载Select2搜索下拉组件，无需额外引入资源，只要给选择字段加上wc-enhanced-select类，自动开启关键词匹配能力，用户输入姓名、城市任意片段都能实时过滤选项。

2. 存储显示文本而非键名 #

原逻辑直接存表单提交的option value（也就是数组键，比如mariaMarais），所以输出不符合预期。修复方案是把所有营销人员选项抽成公共函数统一维护，提交时先校验键的合法性，再存储对应的显示文本，从根源避免存错内容，后续维护选项也只需要改一处。

3. 200条数据的性能问题 #

完全无压力：

• 200条选项属于极小数据量，Select2本地过滤几千条数据都不会卡顿
• 选项统一抽离后不会造成代码冗余，不需要额外建数据库表或者注册自定义内容类型，实现成本最低
• 页面加载时选项数据随表单一次性输出，不会额外发起请求拖慢速度

完整替换代码 #

// 统一维护营销人员选项，后续增删改查只需要修改这个函数里的数组
function wps_get_marketer_options() {
    return array(
        'headoffice'   => __( 'Head Office', 'wps' ),
        'mariaMarais'  => __( 'Maria Marais - Natal', 'wps' ),
        // 按「'唯一键名' => '姓名 - 城市'」的格式往下追加200条即可，键名只要不重复随便写
    );
}

// 结账页输出带搜索功能的选择框
add_action('woocommerce_before_order_notes', 'wps_add_select_checkout_field');
function wps_add_select_checkout_field( $checkout ) {
    echo '<br><br>';
    woocommerce_form_field( 'myquestion', array(
        'type'          => 'select',
        'class'         => array( 'wps-drop', 'wc-enhanced-select' ),
        'label'         => __( 'Please select your Argilla marketer.' ),
        'required'      => true,
        'options'       => wps_get_marketer_options(),
    ), $checkout->get_value( 'myquestion' ));
}

// 提交时存储合法的显示文本
add_action('woocommerce_checkout_update_order_meta', 'wps_select_checkout_field_update_order_meta');
function wps_select_checkout_field_update_order_meta( $order_id ) {
    if (empty($_POST['myquestion'])) return;
    $options = wps_get_marketer_options();
    $submitted_key = sanitize_text_field($_POST['myquestion']);
    // 校验提交值是否在预设选项内，避免存入非法内容
    if (isset($options[$submitted_key])) {
        update_post_meta( $order_id, 'myquestion', $options[$submitted_key] );
    }
}

// 后台订单详情页显示选择结果
add_action( 'woocommerce_admin_order_data_after_billing_address', 'wps_select_checkout_field_display_admin_order_meta', 10, 1 );
function wps_select_checkout_field_display_admin_order_meta($order){
    $marketer = get_post_meta( $order->get_id(), 'myquestion', true );
    if ($marketer) {
        echo '<p><strong>'.__('My Marketer:').'</strong> ' . esc_html($marketer) . '</p>';
    }
}

// 订单通知邮件中显示选择结果
add_filter('woocommerce_email_order_meta_keys', 'wps_select_order_meta_keys');
function wps_select_order_meta_keys( $keys ) {
    $keys['My Marketer:'] = 'myquestion';
    return $keys;
}

注意事项 #

• 新增营销人员时只需要修改wps_get_marketer_options()内的数组，不需要动其他业务逻辑
• 搜索默认匹配选项全部文本，不需要额外写匹配规则
• 代码兼容WooCommerce 3.0+版本，做了输入校验和输出转义，不会有安全问题
• 200条数据直接写在数组里即可，不会出现代码臃肿、性能下降的问题

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