As you know, you can tick the “Enable AJAX add to cart buttons on archives” checkbox in the WooCommerce settings in order to add products to cart from the Shop / Category / Tag / loop pages without refreshing the page.
This is great for certain businesses, especially those who sell in bulk and where customers know exactly what they need to buy without the need of checking the single product page.
The bad news is that the Ajax Add to Cart button only allows you to add 1 item to the cart i.e. there is no quantity input field. The other bad news is that the Ajax Add to Cart button only works for simple products, while for variable ones it will turn into a “Select options” link without the possibility of adding a variation to cart from there.
In this tutorial, we will see how to turn the WooCommerce shop into an… Ajax cart with quantity inputs. Enjoy!
PHP Snippet: Ajax Add to Cart Quantity For Simple + Variable Products @ WooCommerce Shop
/**
* @snippet Ajax Add Cart Quantity @ WooCommerce Shop
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'bbloomer_ajax_quantity_shop', 9999, 3 );
function bbloomer_ajax_quantity_shop( $html, $product, $args ) {
if ( $product->is_purchasable() && $product->is_in_stock() && $product->supports( 'ajax_add_to_cart' ) ) {
$html = '<div style="display: inline-block; margin-right: 0.2em">' . woocommerce_quantity_input( array(), $product, false ) . '</div>' . $html;
}
return $html;
}
add_action( 'woocommerce_after_shop_loop', 'bbloomer_add_cart_loop_js' );
function bbloomer_add_cart_loop_js() {
wc_enqueue_js( "
$(document).on('change','.quantity .qty',function(){
$(this).closest('li.product').find('a.ajax_add_to_cart').attr('data-quantity',$(this).val());
});
" );
}
Advanced Plugin: WooCommerce Express Shop Page
WooCommerce Express Shop Page transforms your WooCommerce shop and category pages, allowing customers to select product quantities and variations without leaving the page. It does this by adding quantity input fields and variation dropdowns, making customers more likely to buy instantly and in bigger quantities.
AJAX-Powered Variations guarantees ultra fast performance and won’t slow down your site even if you have thousands of products. The plugin is also easy to set up and users can quickly choose whether to show the quantity field and variation drop-downs in the settings page.
Hi,
Great solution and it’s working fine, but the ‘add-to-cart’ button is showing under the quantity field. What can I do to show the quantity field left and the add-to-cart button on the right?
Thank you!
I think it’s only a matter of custom CSS. Feel free to share a link and I’ll take a look
Is there a way to display the up and down arrows that adjust the quantity number?
Thanks
Those quantity input fields are of type = number, so the arrows should show on hover. Can you verify that please?
Not working for me unfortunately, I get the a modal with the error ‘Content not found’
Am I doing anything wrong?
Works for me!
I thought it was suppose to use ajax on the archive page, for variable products too. Now I see that is not your intended result. However on the archive page it shows “add to cart” as the button, for the variable product.
It should be “Select options”, so you probably have some other plugin / customization that is overriding that
Doesn’t seem to work. Not sure if it matters but I’m using Oxygen Builder, fresh install.
It didn’t work for me. I had 10 items in my cart and tried to get it to 12. As I wrote 12 in the “quantity” field, hoping that would take the difference (2 items), I ended up instead with 22 items in my cart (so the quantities were added instead of taking the difference only). Could you tell me where my code was wrong please ?
Sorry Gwen, that’s actually how it’s supposed to work. Your request is a different thing (basically, the shop becomes a cart page), and would require custom code. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi,
Wow working like charm !
Thanks
Great!