WooCommerce结账页自定义选择框更新购物车数量及价格故障排查

需求明确 #

• 结账页添加“单人/双人”下拉选择框
• 选「单人」：购物车对应商品数量设为1，价格按单份计算
• 选「双人」：购物车对应商品数量设为2，价格同步更新为两份
• 限制购物车仅存在该商品的一个条目（用户无法添加多件，仅通过下拉调整数量）

现存问题 #

1. 初始代码中Ajax函数内$cart变量为空，无法触发购物车更新
2. 代码调整后Ajax可执行，但结账页总价计算错误，购物车数量、价格未随选择同步刷新

问题排查与修复方案 #

1. 修复Ajax函数中购物车未初始化问题 #

初始$cart为空是因为Ajax请求未加载WooCommerce核心环境，需手动初始化：

// 注册Ajax动作（登录/未登录用户均可用）
add_action('wp_ajax_update_cart_quantity', 'update_cart_quantity');
add_action('wp_ajax_nopriv_update_cart_quantity', 'update_cart_quantity');

function update_cart_quantity() {
    // 强制加载WooCommerce核心
    if (!class_exists('WC')) {
        require_once WP_PLUGIN_DIR . '/woocommerce/woocommerce.php';
    }
    WC()->initialize();

    $cart = WC()->cart;
    if (empty($cart)) {
        wp_send_json_error('购物车初始化失败');
        wp_die();
    }

    // 获取前端传递的数量值
    $target_qty = isset($_POST['quantity']) ? intval($_POST['quantity']) : 1;

    // 仅更新购物车中第一件商品（符合"仅添加一件商品"的限制）
    foreach ($cart->get_cart() as $item_key => $item) {
        $cart->set_quantity($item_key, $target_qty);
        break;
    }

    // 重新计算购物车总价
    $cart->calculate_totals();

    // 返回更新后的关键数据
    wp_send_json_success([
        'total'        => wc_price($cart->get_total()),
        'quantity'     => $target_qty,
        'subtotal'     => wc_price($cart->get_subtotal()),
        'cart_hash'    => $cart->get_cart_hash() // 返回新的哈希值用于后续验证
    ]);
    wp_die();
}

2. 前端JS优化：确保Ajax请求正确触发页面更新 #

修改add_quantity.js，完善请求逻辑并同步更新页面元素：

jQuery(document).ready(function($) {
    const $select = $('#custom_quantity_select');
    
    // 绑定下拉框切换事件
    $select.on('change', function() {
        const targetQty = $(this).val() === 'single' ? 1 : 2;

        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'update_cart_quantity',
                quantity: targetQty,
                security: wc_add_to_cart_params.cart_hash // 安全验证
            },
            beforeSend: () => $('.cart-totals').addClass('loading'),
            success: function(res) {
                if (res.success) {
                    // 更新页面数量显示（如购物车图标旁的数字）
                    $('.cart-contents .count').text(res.data.quantity);
                    // 更新结账页小计、总价
                    $('.cart-subtotal .amount').html(res.data.subtotal);
                    $('.order-total .amount').html(res.data.total);
                    // 强制触发结账页重新计算（修复总价错误）
                    $(document.body).trigger('update_checkout');
                    // 更新安全哈希值
                    wc_add_to_cart_params.cart_hash = res.data.cart_hash;
                } else {
                    alert(`更新失败：${res.data}`);
                }
            },
            complete: () => $('.cart-totals').removeClass('loading'),
            error: () => alert('请求出错，请刷新后重试')
        });
    });
});

3. 在结账页插入自定义下拉选择框 #

通过WooCommerce钩子在结账页添加选择框，默认选中当前购物车数量对应的选项：

add_action('woocommerce_checkout_before_order_review', 'render_custom_quantity_select');
function render_custom_quantity_select() {
    $currentQty = WC()->cart->get_cart_contents_count();
    $selectedSingle = $currentQty === 1 ? 'selected' : '';
    $selectedDouble = $currentQty === 2 ? 'selected' : '';

    echo '<div class="checkout-quantity-select" style="margin-bottom:15px;">
            <label style="display:block;margin-bottom:5px;">选择人数：</label>
            <select id="custom_quantity_select" style="padding:8px;">
                <option value="single" ' . $selectedSingle . '>单人</option>
                <option value="double" ' . $selectedDouble . '>双人</option>
            </select>
          </div>';
}

4. 修复总价计算错误的核心点 #

结账页总价计算错误是因为未触发WooCommerce内置的update_checkout事件，该事件会强制结账页重新计算所有费用（包括税费、运费等）。在Ajax成功回调中添加$(document.body).trigger('update_checkout');即可解决。

关键注意事项 #

• 确保WooCommerce插件路径正确，若你的WooCommerce安装在非默认目录，需调整WP_PLUGIN_DIR . '/woocommerce/woocommerce.php'的路径
• 必须携带安全验证参数security，避免CSRF攻击
• 测试前清空浏览器缓存和WordPress缓存，确保加载最新代码

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