WooCommerce 商店页面：添加到购物车按钮上的数量输入答案

【问题标题】：WooCommerce Shop page: Quantity input on add to cart buttonWooCommerce 商店页面：添加到购物车按钮上的数量输入
【发布时间】：2025-12-30 07:35:11
【问题描述】：

我正在使用 Divi 主题和 WooCommerce 插件。在商店页面中，我想直接在 添加到购物车 按钮上进行 数量调整。

My web site

目前您必须点击产品进入单个产品页面，然后才能添加到购物车。

我试图弄清楚是什么产生了产品列表，以便我可以修改它，但正如您可能猜到的那样，我对此很陌生。

如何在购物页面产品中添加该功能？

【问题讨论】：

标签： javascript php wordpress woocommerce product

【解决方案1】：

建议：最好使用子主题，以免丢失您在主题更新时要做的更改。所以我假设你现在将使用一个子主题。

检查 WooCommerce > 设置 > 产品 (tab) > 显示 (sub tab) 您已正确设置所需的行为：

在这个活跃的子主题中，您会找到一个function.php文件。如果没有，您将从父主题中复制它，删除里面的所有代码，除了开头的 <?php 标记（如果存在）和 ?> 相同> 最后（如果存在）。

完成后，您将使用 woocommerce_loop_add_to_cart_link 过滤钩将数量添加到您的添加到购物车按钮（对于简单产品）。您将在其中粘贴此代码 sn-p：

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 = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

您还可以自定义此代码以更好地满足您的需求……

参考：Override loop template and show quantities next to add to cart buttons

【讨论】：

感谢您的详细解释。我已经检查了显示设置并签入了启用 AJAX，但我仍然没有在商店页面上看到添加到购物车按钮，仅在单个项目页面上。此外，在单个项目页面上，添加到购物车按钮上已经附加了一个数量选择器。
@LoicTheAztec 嗨，我只是在我的项目中测试了这段代码。但是ajax不起作用。选中“启用 AJAX 添加到存档上的购物车按钮”。你能告诉我是什么原因吗？

【解决方案2】：

Woocommerce 文档有 API，感觉很好。最近他们升级到与 2.6 版本的 WP JSON API 集成。您在这里有两个选择。

1）通过api调用下单
2）通过

轻松制作和 ajax 请求以更改数量

http://domain.com/?add-to-cart=Product-Id&variation_id=136&quantity=2

例子：

http://domain.com/?add-to-cart=97&variation_id=136&attribute_pa_sizes=xl

如果您没有任何变化或选项，您可以通过

轻松完成

http://domain.com/?add-to-cart=Id&&quantity=Qty

【讨论】：

【解决方案3】：

所以我最终做的是将单页添加到购物车操作添加到商店页面循环的挂钩中，如下所示：

add_action('woocommerce_after_shop_loop_item',
           'woocommerce_template_single_add_to_cart', 30);

谢谢。

【讨论】：