javascript - WooCommerce 商店页面 : Quantity input on add to cart button

Question

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

My web site

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

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

如何将该功能添加到商店页面产品？

Answer 1

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

检查 WooCommerce > 设置 > 产品(选项卡)> 显示(子选项卡)您已正确设置所需的行为:

在这个事件的子主题中，您会发现 function.php 文件。如果没有，您将从父主题中复制它，删除其中的所有代码，除了 <?php 之外。开头的 标签(如果存在)与 ?> 相同 最后(如果存在)。

完成后，您将使用 woocommerce_loop_add_to_cart_link 过滤器 Hook ，用于将数量添加到“添加到购物车”按钮(对于简单产品)。您将将此代码片段粘贴到其中:

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