如何恢复WooCommerce商店页带数量框的Ajax加入购物车功能？

嘿，我完全懂你现在的困扰——好不容易在商店页面加上了数量输入框，结果好用的Ajax加入购物车按钮变成了默认跳转样式，确实挺闹心的。别慌，咱们一步步把功能找回来：

问题根源 #

通常是你添加数量字段的代码覆盖了WooCommerce默认的Ajax加购模板结构，或者没有给新的数量框绑定Ajax事件，导致系统识别不出这是需要触发Ajax请求的按钮。

解决方案 #

1. 正确添加数量框并保留Ajax结构 #

先替换默认的归档页加购按钮，把数量框嵌入到符合WooCommerce Ajax规范的表单里。把这段PHP代码放到你的主题functions.php文件中，或者用自定义代码插件（比如Code Snippets）来添加：

add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_loop_add_to_cart_with_quantity', 10, 3 );
function custom_loop_add_to_cart_with_quantity( $button_html, $product, $args ) {
    // 只对简单产品和带默认属性的可变产品生效（新手先聚焦简单场景）
    if ( ! $product->is_type( 'simple' ) && ! ( $product->is_type( 'variable' ) && $product->has_default_attributes() ) ) {
        return $button_html;
    }

    // 构建数量输入框
    $quantity_html = sprintf(
        '<div class="quantity"><input type="number" name="quantity" value="%d" min="%d" max="%d" step="%d" class="input-text qty text" /></div>',
        1,
        $product->get_min_purchase_quantity(),
        $product->get_max_purchase_quantity(),
        $product->get_purchase_step()
    );

    // 重构加购按钮，保留Ajax必需的class和data属性
    $button_html = sprintf(
        '<form class="cart" method="post" enctype="multipart/form-data">
            %s
            <button type="submit" data-product_id="%d" data-product_sku="%s" data-quantity="1" class="%s button product_type_%s">%s</button>
        </form>',
        $quantity_html,
        $product->get_id(),
        $product->get_sku(),
        $args['class'],
        $product->get_type(),
        esc_html( $product->add_to_cart_text() )
    );

    return $button_html;
}

这段代码的核心是：把加购按钮改成带数量框的表单，同时保留了WooCommerce Ajax脚本识别所需的data-product_id、product_type_simple等关键属性，让系统知道这是要触发Ajax请求的按钮。

2. 绑定数量变化的Ajax事件 #

默认的WooCommerce脚本不会自动监听数量框的变化，所以需要加一段JS代码，确保点击按钮时发送的是用户选择的数量值。把这段代码放到主题的footer.php（</body>标签之前），或者主题的自定义JS选项里：

jQuery(document).ready(function($) {
    // 数量变化时更新按钮的data-quantity属性
    $(document).on('change', '.woocommerce-loop .quantity input.qty', function() {
        const $button = $(this).closest('.cart').find('button[type="submit"]');
        $button.attr('data-quantity', $(this).val());
    });

    // 确保表单提交触发Ajax请求（兼容部分主题的自定义结构）
    $(document).on('submit', '.woocommerce-loop .cart', function(e) {
        e.preventDefault();
        const $form = $(this);
        const productId = $form.find('button[type="submit"]').data('product_id');
        const quantity = $form.find('.qty').val();

        // 调用WooCommerce官方Ajax接口
        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                action: 'woocommerce_add_to_cart',
                product_id: productId,
                quantity: quantity
            },
            success: function(response) {
                if (response.error && response.product_url) {
                    window.location = response.product_url;
                    return;
                }
                // 触发购物车更新事件，让页面顶部的购物车图标同步数量
                $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $form]);
            }
        });
    });
});

3. 简单调整样式（可选） #

添加数量框后可能会排版混乱，加一点CSS让布局更美观：

.woocommerce-loop .cart {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.woocommerce-loop .quantity input.qty {
    width: 60px;
    padding: 5px;
}

最后注意事项 #

• 代码添加后记得清空浏览器缓存和WooCommerce缓存，避免旧代码干扰
• 如果是用子主题，优先把代码放到子主题的functions.php里，防止主题更新丢失代码
• 如果遇到冲突，先暂时禁用其他WooCommerce相关插件排查问题

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