WooCommerce商店頁面：添加到購物車按鈕上的數量輸入

Question

我將Divi主題與WooCommerce插件一起使用。 在商店頁面中，我想直接在“ 添加到購物車”按鈕上進行數量調整 。

我的網站

目前，您必須單擊產品才能進入單個產品頁面，然后才可以將其添加到購物車。

我試圖弄清楚是什么產生了產品列表，以便可以對其進行修改，但是正如您可能猜到的，我對此並不陌生。

如何在購物頁面產品中添加該功能？

Answer 1

建議：最好使用子主題 ，以避免在主題更新時丟失所做的更改。 因此，我假設您現在將使用子主題。

簽入WooCommerce>設置>產品（選項卡） >顯示（子選項卡） ，您已正確設置了所需的行為：

在這個活躍的子主題中 ，您將找到一個function.php文件。 如果不是，則從父主題復制它，刪除其中的所有代碼，除了開頭的<?php標記（如果存在）和結尾的?>相同（如果存在）。

完成后，您將使用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;
}

您還可以自定義此代碼，以更好地滿足您的需求……

參考： 覆蓋回路模板並顯示要添加到購物車按鈕的數量

Answer 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

Answer 3

因此，我最終要做的是將單個頁面添加到購物車操作添加到商店頁面循環的鈎子中，如下所示：

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

謝謝。