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

Question

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

My web site

目前需要点击商品进入单品页面，才能加入购物车。

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

如何将该功能添加到购物页面产品？

Answer 1

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

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

Answer 2

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

检查 WooCommerce > 设置 > 产品 （选项卡） > 显示 （子选项卡） 您已经正确设置了您想要的行为:

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

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

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

Answer 3

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

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

谢谢。

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

WooCommerce Shop page: Quantity input on add to cart button

javascript

php

wordpress

product

woocommerce