WooCommerce结账页Ajax更新异常：移除商品/改数量无响应

问题根源分析 #

• 自定义订单结构后，WooCommerce默认的update_checkout JS事件未绑定到新元素上
• 移除商品链接未阻止默认跳转行为，且未触发前端DOM更新
• 数量输入框未监听change事件，也未发起Ajax请求同步购物车

分步解决代码 #

1. 完善后端Ajax处理（functions.php） #

确保Ajax处理函数能正确处理数量更新和商品移除，并返回更新后的订单预览HTML：

// 注册Ajax动作，支持前台未登录用户
add_action('wp_ajax_update_checkout_cart', 'update_checkout_cart_callback');
add_action('wp_ajax_nopriv_update_checkout_cart', 'update_checkout_cart_callback');

function update_checkout_cart_callback() {
    // 验证请求合法性
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'checkout_cart_update_nonce')) {
        wp_send_json_error('无效的请求验证');
    }

    $response = [];

    // 处理商品移除
    if (isset($_POST['remove_item'])) {
        $cart_item_key = sanitize_text_field($_POST['remove_item']);
        WC()->cart->remove_cart_item($cart_item_key);
        $response['message'] = '商品已移除';
    }

    // 处理数量更新
    if (isset($_POST['update_qty']) && isset($_POST['cart_item_key'])) {
        $cart_item_key = sanitize_text_field($_POST['cart_item_key']);
        $qty = absint($_POST['update_qty']);
        if ($qty > 0) {
            WC()->cart->set_quantity($cart_item_key, $qty);
            $response['message'] = '数量已更新';
        } else {
            WC()->cart->remove_cart_item($cart_item_key);
            $response['message'] = '商品已移除';
        }
    }

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

    // 获取更新后的订单预览HTML（对应自定义的order-review.php）
    ob_start();
    wc_get_template('checkout/order-review.php');
    $response['order_review_html'] = ob_get_clean();

    // 返回总价数据（可选，用于单独更新总价显示）
    $response['cart_total'] = WC()->cart->get_total();

    wp_send_json_success($response);
}

2. 前端JS事件绑定与Ajax请求 #

在主题自定义JS文件（如checkout-custom.js）中添加以下代码，绑定数量修改和移除按钮的事件：

jQuery(document).ready(function($) {
    // 调用WooCommerce全局参数，获取Ajax地址和验证nonce
    const ajaxUrl = wc_checkout_params.ajax_url;
    const checkoutNonce = wc_checkout_params.checkout_nonce;

    // 监听数量输入框变化
    $(document).on('change', '.custom-cart-item-qty', function() {
        const $input = $(this);
        const cartItemKey = $input.data('cart-item-key');
        const qty = parseInt($input.val());

        if (isNaN(qty) || qty < 1) return;

        $.ajax({
            url: ajaxUrl,
            type: 'POST',
            data: {
                action: 'update_checkout_cart',
                nonce: checkoutNonce,
                cart_item_key: cartItemKey,
                update_qty: qty
            },
            beforeSend: function() {
                $('.order-review').addClass('loading'); // 添加加载状态
            },
            success: function(res) {
                if (res.success) {
                    // 替换订单预览区域的HTML
                    $('.order-review').html(res.data.order_review_html);
                    // 可选：单独更新总价显示
                    $('.cart-total').text(res.data.cart_total);
                }
            },
            complete: function() {
                $('.order-review').removeClass('loading');
            },
            error: function() {
                alert('更新失败，请重试');
            }
        });
    });

    // 监听移除商品按钮点击
    $(document).on('click', '.custom-cart-remove', function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        const cartItemKey = $(this).data('cart-item-key');

        $.ajax({
            url: ajaxUrl,
            type: 'POST',
            data: {
                action: 'update_checkout_cart',
                nonce: checkoutNonce,
                remove_item: cartItemKey
            },
            beforeSend: function() {
                $('.order-review').addClass('loading');
            },
            success: function(res) {
                if (res.success) {
                    $('.order-review').html(res.data.order_review_html);
                    $('.cart-total').text(res.data.cart_total);
                }
            },
            complete: function() {
                $('.order-review').removeClass('loading');
            },
            error: function() {
                alert('移除失败，请重试');
            }
        });
    });
});

3. 调整自定义order-review.php结构 #

确保订单元素添加对应类和数据属性，方便JS选择：

<?php foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) : ?>
    <div class="custom-cart-item">
        <h3><?php echo $cart_item['data']->get_name(); ?></h3>
        <!-- 数量输入框：添加类和data-cart-item-key属性 -->
        <input type="number" class="custom-cart-item-qty" data-cart-item-key="<?php echo esc_attr($cart_item_key); ?>" value="<?php echo $cart_item['quantity']; ?>" min="1">
        <!-- 移除链接：添加类和data-cart-item-key属性 -->
        <a href="<?php echo esc_url(wc_get_cart_remove_url($cart_item_key)); ?>" class="custom-cart-remove" data-cart-item-key="<?php echo esc_attr($cart_item_key); ?>">移除</a>
        <p class="item-price"><?php echo wc_price($cart_item['data']->get_price()); ?></p>
    </div>
<?php endforeach; ?>

<!-- 总价显示区域（可选） -->
<div class="cart-total"><?php echo WC()->cart->get_total(); ?></div>

4. 确保JS正确加载 #

在functions.php中添加代码，让自定义JS仅在结账页加载：

add_action('wp_enqueue_scripts', 'enqueue_checkout_custom_js');
function enqueue_checkout_custom_js() {
    // 仅在结账主页面加载（排除订单完成等端点页面）
    if (is_checkout() && !is_wc_endpoint_url()) {
        wp_enqueue_script(
            'checkout-custom-js',
            get_stylesheet_directory_uri() . '/js/checkout-custom.js',
            ['jquery'],
            '1.0',
            true // 放在页面底部加载
        );
        // 传递WooCommerce全局参数到前端
        wp_localize_script('checkout-custom-js', 'wc_checkout_params', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'checkout_nonce' => wp_create_nonce('checkout_cart_update_nonce')
        ]);
    }
}

关键注意事项 #

• 替换代码中的类名（如.custom-cart-item-qty、.custom-cart-remove）为你实际使用的类名
• 确保order-review.php的路径与主题结构匹配，避免模板加载失败
• 测试时禁用缓存插件，防止旧代码干扰
• 查看浏览器控制台的错误信息，快速排查JS或Ajax请求问题

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