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 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 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.
There are couople of limitations though:
- Ajax add to cart is not working
- 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.
