Question 3092 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to Add Quantity Field On Shop Page for WooCommerce

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' );
Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 );
    Login or Signup to reply.
  3. 0

    Because you hooked your action to ‘woocommerce_loop_add_to_cart_link’ hook. This hook is connected to shop loop cards. For other pages you have to find the right hook and apply the action to that hook as well. The location and name of your hook may vary depending on how you add the product to the page. Maybe a more specific answer can be given if you share the link to your page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search