Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce purchase page add-to-cart with quantity and AJAX, without customising any templates. See blog post for details: http://snippets.webaware.com.au/snippets/woocommerce-add-to-cart-with-quantity-and-ajax/
<?php
/**
* start the customisation
*/
function custom_woo_before_shop_link() {
add_filter('woocommerce_loop_add_to_cart_link', 'custom_woo_loop_add_to_cart_link', 10, 2);
add_action('woocommerce_after_shop_loop', 'custom_woo_after_shop_loop');
}
add_action('woocommerce_before_shop_loop', 'custom_woo_before_shop_link');
/**
* customise Add to Cart link/button for product loop
* @param string $button
* @param object $product
* @return string
*/
function custom_woo_loop_add_to_cart_link($button, $product) {
// not for variable, grouped or external products
if (!in_array($product->product_type, array('variable', 'grouped', 'external'))) {
// only if can be purchased
if ($product->is_purchasable()) {
// show qty +/- with button
ob_start();
woocommerce_simple_add_to_cart();
$button = ob_get_clean();
// modify button so that AJAX add-to-cart script finds it
$replacement = sprintf('data-product_id="%d" data-quantity="1" $1 ajax_add_to_cart add_to_cart_button product_type_simple ', $product->id);
$button = preg_replace('/(class="single_add_to_cart_button)/', $replacement, $button);
}
}
return $button;
}
/**
* add the required JavaScript
*/
function custom_woo_after_shop_loop() {
?>
<script>
jQuery(function($) {
<?php /* when product quantity changes, update quantity attribute on add-to-cart button */ ?>
$("form.cart").on("change", "input.qty", function() {
$(this.form).find("button[data-quantity]").data("quantity", this.value);
});
<?php /* remove old "view cart" text, only need latest one thanks! */ ?>
$(document.body).on("adding_to_cart", function() {
$("a.added_to_cart").remove();
});
});
</script>
<?php
}
@DevinWalker
Copy link

DevinWalker commented Jan 2, 2014

Works great!

@rubentomas
Copy link

rubentomas commented May 13, 2014

copying this into my functions
outputs white screen :(

help

@AlpDmr
Copy link

AlpDmr commented Oct 3, 2014

You are life saver! thanks a lot...

@Nekaravaev
Copy link

Nekaravaev commented Mar 6, 2015

Thanks a lot!

@NabilLahssine
Copy link

NabilLahssine commented May 2, 2015

Thanks for this great Solution, I have a simple question:
I want to apply the same for the related products loop?

@mmubasher
Copy link

mmubasher commented Dec 21, 2015

If anyone gets this error
Call to a member function is_purchasable() on a non-object
place
global $product;
on line 24 before
ob_start();
in function custom_woo_loop_add_to_cart_link

@ptrsmk
Copy link

ptrsmk commented Feb 26, 2016

Not working with latest woocommerce on latest WP (tested with Storefront theme).

@johnymas
Copy link

johnymas commented Feb 29, 2016

When I put number into quantity field and then click add to cart I get the same number in quantity fields of all products. Why is this happening

@radicaldesk
Copy link

radicaldesk commented Mar 28, 2016

I have the same issue as you johnymas, I wonder if you or other found a workaround already?

@webaware
Copy link
Author

webaware commented Mar 30, 2016

@dvrcthewrld @johnymas @radicaldesk I just updated the script to add a new class into the button, so that WooCommerce 2.5 picks it up and uses AJAX to add to cart. View the revision history of this gist to see the changes.

@radicaldesk
Copy link

radicaldesk commented Apr 2, 2016

Thanks, But it still not working. I think my issue was the Add to Cart button is not being updated with the correct classes. Do you have a demo of this script that I can take a look?

Thanks

@esilvajr
Copy link

esilvajr commented Apr 18, 2016

We have a issue, cause when we choose a quantity (2) and click in add_to_cart_button in the first time works fine, but after that, if we change the qty value for (3) or any other value in the cart increment just (2) that was the first value.

@FellowshipAgency
Copy link

FellowshipAgency commented May 6, 2016

I have the same problem as esilvajr:

when we choose a quantity (2) and click in add_to_cart_button in the first time works fine, but after that, if we change the qty value for (3) or any other value in the cart increment just (2) that was the first value.

@Lewiscowles1986
Copy link

Lewiscowles1986 commented May 6, 2016

@esilvajr as this is now using WooCommerce built-in functionality to send the value, I'd assume that it's a bug in WooCommerce. The font-end code in this seems to just update the button quantity data attribute. Check this is updating, but if it is, then it's a woocommerce bug.

Update: Could be the use of this.value, try changing to $(this).val()

Another thing to check-out https://gist.github.com/claudiosmweb/5114131
It claims to do the same thing, for multiple product-types and is authored by @claudiosmweb, who I believe is a WooCommerce core contributor

@BenJackGill
Copy link

BenJackGill commented Aug 21, 2016

Not working for me :(

@milind2709
Copy link

milind2709 commented Apr 12, 2017

Work great !!! :) 👍

@AngeloLazzari
Copy link

AngeloLazzari commented May 31, 2017

Hi, i put the code in my function.php but still not using ajax... do i still have to modify the template with css class as the blog says?

thank you

@ihemantkumar
Copy link

ihemantkumar commented Sep 25, 2017

Your code is working perfectly, but its not allowing to

  • add multiple quantity of product,
  • add product with variations

So its not useful for me.

Also on error its redirecting me to the shop page which is not required by me. Can I show error near the "add to cart" button? Also how can i add variations? By default woocommerce handle variation very well. I need to add product with variation using ajax.

@brandon-9
Copy link

brandon-9 commented Nov 28, 2017

@esilvajr I had to add the following to "reset" the quantities on page load:
jQuery( document ).ready(function($) {
$('input.qty').val('1');
});

@quocpt
Copy link

quocpt commented Jan 5, 2018

$button = preg_replace('/(class="single_add_to_cart_button)/', $replacement, $button);

This can not replace "single_add_to_cart_button" , how can we remove it?

@giulianorapoz
Copy link

giulianorapoz commented Apr 25, 2018

Not working or doing anything for me? I am testing it on the "Products/Archive" page

@josecruzchavez
Copy link

josecruzchavez commented May 24, 2018

Gracias, me ayudó bastante

@geelaniplay
Copy link

geelaniplay commented Jun 14, 2018

Hi,
Thanks for the wonderful script.
It works well on archive page with quantity box.
However, when we use the [products] shortcode or any variation of it, it does not show the quantity box.
Ajax still works and adds a single product to the cart.
Any suggestions?

@Laurynas-3D
Copy link

Laurynas-3D commented Nov 10, 2020

Hello,
does someone have a working solution for the variable products quantity input with ajax on the shop/archive page? Thank you in advance.

@lgdelai
Copy link

lgdelai commented Jun 15, 2021

What's up @webaware
Your code worked great, thanks for sharing.

However, I use the ContentViews "PRO" plugin to display my products, and the quantity box doesn't appear on the products displayed in the plugin view.
https://br.wordpress.org/plugins/content-views-query-and-display-post-page/

The developers told me that:
And our plugin uses the "add_to_cart" shortcode of WooCommerce to show the "Add to cart" button.

What change can I make so that your code displays the quantities field in contentviews as well?

@lgdelai
Copy link

lgdelai commented Jun 15, 2021

Thanks for this great Solution, I have a simple question:
I want to apply the same for the related products loop?

Good Question,
You already have a solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment