如何用Jcodex WooCommerce结账字段编辑器实现购物车关联自定义选择字段

步骤1：在Jcodex插件中创建基础选择字段 #

• 进入WooCommerce后台，打开Jcodex WooCommerce Checkout Field Editor
• 在结账字段编辑界面，添加一个新的Select Field（选择字段）
• 填写字段核心信息：字段标签设为「关联购物车商品」，字段名称设为cart_items_select（自定义唯一标识，后续代码会用到）
• 无需手动添加选项，直接保存字段设置

步骤2：添加自定义代码实现动态选项 #

将以下代码添加到当前主题的functions.php文件，或使用代码片段插件（如Code Snippets）执行：

add_filter('jcodex_checkout_field_options', 'dynamic_cart_items_select_options', 10, 2);
function dynamic_cart_items_select_options($options, $field) {
    // 仅针对我们创建的目标选择字段
    if ($field['name'] !== 'cart_items_select') {
        return $options;
    }

    $new_options = array();
    // 遍历购物车所有商品生成选项
    foreach (WC()->cart->get_cart() as $cart_item) {
        $product = $cart_item['data'];
        // 以商品ID为选项值，商品名称为选项文本（可按需调整为SKU/型号等）
        $new_options[$product->get_id()] = $product->get_name();
    }

    // 购物车为空时添加提示选项
    if (empty($new_options)) {
        $new_options[''] = '购物车中无商品';
    }

    return $new_options;
}

代码说明 #

• jcodex_checkout_field_options是Jcodex插件提供的过滤钩子，专门用于修改选择字段的选项列表
• 代码通过判断字段标识，确保只修改目标字段的选项，不影响其他字段
• 自动同步购物车商品：添加/移除商品时，结账页面的选择选项会实时更新

验证效果 #

• 往购物车添加「鼠标」「键盘」等商品，进入结账页面即可看到对应选项
• 移除购物车商品后，选项会自动同步减少

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