如何阻止woocommerce_simple_add_to_cart点击后跳转至购物车页面？

问题根因 #

• 第一版代码仅添加了ajax_add_to_cart类，但缺少WooCommerce AJAX加购要求的data-product_id等必填属性，且默认AJAX逻辑无法读取自定义表单内的数量参数
• 第二版代码直接调用do_action('woocommerce_simple_add_to_cart')不符合循环场景的结构要求，且未返回过滤后的正确HTML，结构错误导致AJAX逻辑失效

修复步骤 #

1. 替换PHP过滤代码 #

将原有PHP代码替换为以下内容，可添加到主题functions.php文件或自定义代码片段插件中：

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<div class="loop-add-to-cart-wrapper">';
        // 生成数量选择器
        $html .= woocommerce_quantity_input( array(
            'input_name'  => 'quantity_' . $product->get_id(),
            'input_value' => 1,
            'min_value'   => 1,
            'max_value'   => $product->get_max_purchase_quantity(),
        ), $product, false );
        // 生成携带必要属性的加购按钮
        $html .= sprintf(
            '<button type="button" class="button alt product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="%s" data-product_sku="%s">%s</button>',
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_html( $product->add_to_cart_text() )
        );
        $html .= '</div>';
    }
    return $html;
}

2. 添加自定义AJAX处理JS代码 #

将以下JS代码添加到主题自定义JS区域、子主题footer.php的</body>标签前，或自定义JS插件中：

jQuery(function($){
    // 监听自定义加购按钮点击事件
    $(document).on('click', '.loop-add-to-cart-wrapper .ajax_add_to_cart', function(e){
        e.preventDefault();
        const $addBtn = $(this);
        const productId = $addBtn.data('product_id');
        // 获取对应商品的选中数量
        const quantity = $addBtn.siblings('.quantity').find('input.qty').val();

        // 加载状态提示
        $addBtn.addClass('loading');

        // 调用WooCommerce原生加购接口
        $.ajax({
            url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
            type: 'POST',
            data: {
                product_id: productId,
                quantity: quantity
            },
            success: function(response) {
                $addBtn.removeClass('loading');
                if(response && response.fragments) {
                    // 更新页面上的购物车动态内容（如页眉购物车数量、浮层等）
                    $.each(response.fragments, function(key, value) {
                        $(key).replaceWith(value);
                    });
                    // 触发WooCommerce加购成功原生事件，兼容主题自带的加购提示效果
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $addBtn]);
                }
            }
        });
    });
});

3. 后台配置校验 #

进入WordPress后台完成以下配置：

• 路径：WooCommerce → 设置 → 商品 → 商品库存
• 确认添加到购物车后重定向到购物车页面选项处于未勾选状态
• 确认在商品存档页启用 AJAX 加入购物车按钮选项处于勾选状态
• 保存设置后清空站点缓存、浏览器缓存即可测试

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