CODEWITHSUNDEEP
wordpresswoocommercecode-snippets
DeveloparAndMe
DeveloparAndMe

Reputation: 1

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

Upvotes: 0

Views: 4190

Answers (3)

Orhan COLAK
Orhan COLAK

Reputation: 1

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.

Upvotes: 0

Vijay Hardaha
Vijay Hardaha

Reputation: 2584

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 );

Upvotes: 0

Vinay Jain
Vinay Jain

Reputation: 882

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.

Upvotes: 0

Related Questions