How to add Woocommerce Quantity Selector in Archive/Loop pages?

Couple of weeks ago I had a customer who needed to add Woocommerce quantity selector in archive/loop pages. Therefore, today I’m going to share couple of code snippets you can try. Pay attention though that there are themes that override Woocommerce layouts and therefore none of the solutions may not work for you.

The code snippets you’re going to use will go to the functions.php file of your child theme or better yes, use Code Snippets plugin for it. See the video here below and then it’s going to be easier to understand what is what.

One more thing: it works only with the simple products and is not working for the variable products.

Video: How to add Woocommerce Quantity Selector in Archive/Loop pages?

How to add Woocommerce Quantity Selector in Blocksy theme Archive/Loop pages?

First things first. I’m going to provide you three different code snippets but the one which works best for the Blocksy theme is the one here below.

// Woocommerce quantity selector for loop pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $html, $product ) {
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
		$html = wc_get_template_html( 'single-product/add-to-cart/simple.php' );
	}
	return $html;
}

I have to point out though, that It looks better with the archive page type 1 (see under Customizer >> Woocommerce >> Product catalog)

This is the end result.

How to add Woocommerce Quantity Selector in Archive/Loop pages?

How to add Woocommerce Quantity Selector in Kadence theme Archive/Loop pages?

Now it gets interesting since this code snippet here above kind of works with the Kadence theme but after pressing on Add to cart button it will redirect you to single product page.

Since you probably won’t like this solution we need to use another snippet. So, if you want to add Woocommerce quantity selector in Kadence theme archive/loop pages then use this snippet here below.

// Woocommerce quantity selector for archive pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Embedding the quantity field to Ajax add to cart button
        $html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product->add_to_cart_text() )
        );
    }
    return $html;
}

add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
        jQuery(function($){
            // Update data-quantity
            $(document.body).on('click input', 'input.qty', function() {
                $(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
                $(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
            }).on('click', '.add_to_cart_button', function(){
                var button = $(this);
                setTimeout(function(){
                    button.parent().find('.quantity > input.qty').val(1); // reset quantity to 1
                }, 1000); // After 1 second

            });
        });
    </script>
    <?php
}

And this is the end result which work well and has Ajax add to cart option.

How to add Woocommerce Quantity Selector in Kadence theme Archive/Loop pages?

How to add Woocommerce Quantity Selector in Astra and Generatepress theme Archive/Loop pages?

As I said above: themes are different and therefore snippet that work for one theme won’t work for another. Fortunately, if you want to add Woocommerce quantity selector in Astra theme or Generaepress theme archive/loop pages you can use the same snippet I used for Kadence above.

How to add Woocommerce Quantity Selector in OceanWP theme Archive/Loop pages?

Unfortunately none of the solutions described above is nor working with the OceanWP theme. Therefore we need to use another one. So, copy and paste this snippet.

// Woocommerce quantity selector for loop pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $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;
}

The end result looks like this here below.

How to add Woocommerce Quantity Selector in OceanWP theme Archive/Loop pages?

There are couople of limitations though:

  1. Ajax add to cart is not working
  2. It will add product to the cart and adds after that shows you the URL on the URL box (for example https://yoursite.com/shop/?add-to-cart=676). This means that if you happen to refresh the page then it will add the same amount of produts to the cart.

This is not happening with the Blocksy, Astra, Kadence and Generatepress themes and with the snippets shown above.

Useful Woocommerce tricks

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72