WooCommerce自定义选项购物车求助：复选框价格更新与数据保存问题

嘿，Leonardo，我看了你遇到的问题——自定义复选框能触发购物车更新，但选中值存不下来，还没法同步到结账、邮件和后台订单。咱们一步步来修复这个问题：

核心问题分析 #

你的现有代码只完成了渲染复选框和触发购物车更新这两步，但缺少了关键环节：

• 复选框与购物车项的关联（name属性不正确，导致提交后无法识别对应商品）
• 选中值的存储逻辑（没有把选项保存到购物车项的元数据中）
• 附加价格的计算与更新
• 选中选项同步到结账、订单邮件和后台的逻辑

完整解决方案代码 #

1. 修正购物车页面的复选框渲染 #

首先让复选框的name属性关联到具体的购物车项，确保提交时能准确识别对应商品的选项：

add_filter( 'woocommerce_cart_item_name', 'custom_cart_item_name', 10, 3 );
function custom_cart_item_name( $item_name, $cart_item, $cart_item_key ) {
    if( ! is_cart() ) return $item_name;

    // 获取自定义元数据
    $option_titles = $cart_item['data']->get_meta('_varArrayTitle');
    $option_prices = $cart_item['data']->get_meta('_preciosCata');
    
    if( empty($option_titles) || empty($option_prices) ) return $item_name;

    // 渲染复选框容器
    $item_name .= '<div class="lineList">';
    
    foreach( $option_titles as $index => $title ) {
        // 获取已保存的选中状态
        $is_checked = isset($cart_item['custom_options'][$index]) ? 'checked' : '';
        $price = isset($option_prices[$index]) ? $option_prices[$index] : 0;
        
        // 关键：name属性关联购物车项key，确保提交时能对应到具体商品
        $item_name .= sprintf( 
            '<div class="lineOne lorem">
                <input type="checkbox" 
                       id="_checkbox_%s_%d" 
                       name="%s[custom_options][%d]" 
                       value="%s" 
                       class="checkedBox" 
                       %s /> 
                <span class="custom-field">%s (+%s)</span>
            </div>',
            esc_attr($cart_item_key),
            $index,
            esc_attr($cart_item_key),
            $index,
            esc_attr($price),
            $is_checked,
            esc_html($title),
            wc_price($price)
        );
    }
    
    $item_name .= '</div>';
    return $item_name;
}

2. 保存选中选项并更新购物车价格 #

添加购物车更新时的处理逻辑，把选中的选项保存到购物车项元数据，同时计算附加价格：

add_action( 'woocommerce_cart_updated', 'save_custom_cart_options_and_update_price' );
function save_custom_cart_options_and_update_price() {
    if( empty($_POST['cart']) ) return;

    foreach( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
        // 获取提交的当前商品选项
        $submitted_options = isset($_POST[$cart_item_key]['custom_options']) ? $_POST[$cart_item_key]['custom_options'] : [];
        
        // 保存选中的选项到购物车项
        $cart_item['custom_options'] = array_filter($submitted_options); // 过滤未选中的选项
        WC()->cart->set_cart_item($cart_item_key, $cart_item);

        // 计算附加总价
        $additional_total = array_sum($cart_item['custom_options']);
        
        // 更新购物车项的价格（基础价+附加价）
        $cart_item['data']->set_price( $cart_item['data']->get_regular_price() + $additional_total );
    }
}

3. 在结账页面显示选中的选项 #

让用户在结账时能清晰看到自己选择的附加选项：

add_filter( 'woocommerce_checkout_cart_item_quantity', 'display_custom_options_in_checkout', 10, 3 );
function display_custom_options_in_checkout( $quantity_html, $cart_item, $cart_item_key ) {
    if( empty($cart_item['custom_options']) ) return $quantity_html;

    $option_titles = $cart_item['data']->get_meta('_varArrayTitle');
    $selected_options = [];

    foreach( $cart_item['custom_options'] as $index => $price ) {
        if( isset($option_titles[$index]) ) {
            $selected_options[] = $option_titles[$index] . ' (' . wc_price($price) . ')';
        }
    }

    if( !empty($selected_options) ) {
        $quantity_html .= '<br><small>' . __('Selected options:', 'woocommerce') . ' ' . implode(', ', $selected_options) . '</small>';
    }

    return $quantity_html;
}

4. 同步选项到订单元数据（邮件+后台可见） #

把选中的选项保存到订单里，确保后台订单详情和订单邮件都能显示这些信息：

add_action( 'woocommerce_checkout_create_order_line_item', 'save_custom_options_to_order', 10, 4 );
function save_custom_options_to_order( $item, $cart_item_key, $cart_item, $order ) {
    if( empty($cart_item['custom_options']) ) return;

    $option_titles = $cart_item['data']->get_meta('_varArrayTitle');
    $selected_options = [];

    foreach( $cart_item['custom_options'] as $index => $price ) {
        if( isset($option_titles[$index]) ) {
            $selected_options[] = $option_titles[$index] . ' (' . wc_price($price) . ')';
        }
    }

    if( !empty($selected_options) ) {
        $item->add_meta_data( __('Custom Options', 'woocommerce'), implode(', ', $selected_options) );
    }
}

5. 修正JS购物车更新逻辑 #

确保点击复选框后，购物车能正确提交表单并完成更新：

add_action( 'wp_footer', 'bbloomer_cart_refresh_update_qty' );
function bbloomer_cart_refresh_update_qty() {
    if (is_cart()) {
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 复选框改变时触发购物车更新
            $('body').on('change', '.checkedBox', function(){
                // 启用更新按钮并触发点击
                $("[name='update_cart']").prop("disabled", false).trigger("click");
            });
        });
    </script>
    <?php
    }
}

关键说明 #

• name属性格式：$cart_item_key[custom_options][$index] 是核心，确保提交时能准确对应到每个购物车项的选项。
• 购物车项元数据：通过$cart_item['custom_options']存储选中值，让选项在整个购物流程中都能被访问。
• 价格更新：直接修改商品的价格（基础价+附加价），确保购物车总价计算准确。
• 订单同步：通过woocommerce_checkout_create_order_line_item动作把选项添加到订单元数据，后台和邮件会自动显示这些信息。

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