如何在 WooCommerce 的商店页面上添加数量字段

Question

I find some code on the internet to Add Quantity Field On Shop Page for WooCommerce.

But I have a problem - I have products on Home page and normal pages too, but with those code I get quantity fields only on shop page.

How can I put quantity box on all those pages? I use Storefront theme.

Thank you!

*/
function custom_quantity_field_archive() {

    $product = wc_get_product( get_the_ID() );

    if ( ! $product->is_sold_individually() && 'variable' != $product->product_type && $product->is_purchasable() ) {
        woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
    }

}

add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 15, 9 );


function custom_add_to_cart_quantity_handler() {
wc_enqueue_js( '
jQuery( "body" ).on( "click", ".quantity input", function() {
return false;
});
jQuery( "body" ).on( "change input", ".quantity .qty", function() {
var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
// For AJAX add-to-cart actions
add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
// For non-AJAX add-to-cart actions
add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
});
' );
}
add_action( 'init', 'custom_add_to_cart_quantity_handler' );

Answer 1

You can probably try this code. Just add it to your functions.php

function quantity_for_woocommerce_loop( $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;
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_for_woocommerce_loop', 10, 2 );

Let me know if this worked for you.

Answer 2

Here is the working code:

/**
 * Display QTY Input before add to cart link.
 */
function custom_wc_template_loop_quantity_input() {
    // Global Product.
    global $product;

    // Check if the product is not null, is purchasable, is a simple product, is in stock, and not sold individually.
    if ( $product && $product->is_purchasable() && $product->is_type( 'simple' ) && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        woocommerce_quantity_input(
            array(
                'min_value' => 1,
                'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity(),
            )
        );
    }
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_wc_template_loop_quantity_input', 9 );

/**
 * Add JS script in <head/> tag.
 */
function custom_wc_add_qty_change_script() {
    ?>
    <script>
        (function ($) {
            $(document).on("change", "li.product .quantity input.qty", function (e) {
                e.preventDefault();
                var add_to_cart_button = $(this).closest("li.product").find("a.add_to_cart_button");
                // For AJAX add-to-cart actions.
                add_to_cart_button.attr("data-quantity", $(this).val());
                // For non-AJAX add-to-cart actions.
                add_to_cart_button.attr("href", "?add-to-cart=" + add_to_cart_button.attr("data-product_id") + "&quantity=" + $(this).val());
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_head', 'custom_wc_add_qty_change_script', 20 );