Create a gist now

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

This comment has been minimized.

Show comment
Hide comment
@DevinWalker

DevinWalker Jan 2, 2014

Works great!

Works great!

@rubentomas

This comment has been minimized.

Show comment
Hide comment
@rubentomas

rubentomas May 13, 2014

copying this into my functions
outputs white screen :(

help

copying this into my functions
outputs white screen :(

help

@AlpDmr

This comment has been minimized.

Show comment
Hide comment
@AlpDmr

AlpDmr Oct 3, 2014

You are life saver! thanks a lot...

AlpDmr commented Oct 3, 2014

You are life saver! thanks a lot...

@Nekaravaev

This comment has been minimized.

Show comment
Hide comment
@Nekaravaev

Nekaravaev Mar 6, 2015

Thanks a lot!

Thanks a lot!

@NabilLahssine

This comment has been minimized.

Show comment
Hide comment
@NabilLahssine

NabilLahssine May 2, 2015

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

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

@mmubasher

This comment has been minimized.

Show comment
Hide comment
@mmubasher

mmubasher 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

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

@dvrcthewrld

This comment has been minimized.

Show comment
Hide comment
@dvrcthewrld

dvrcthewrld Feb 26, 2016

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

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

@johnymas

This comment has been minimized.

Show comment
Hide comment
@johnymas

johnymas 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

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

This comment has been minimized.

Show comment
Hide comment
@radicaldesk

radicaldesk Mar 28, 2016

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

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

@webaware

This comment has been minimized.

Show comment
Hide comment
@webaware

webaware 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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@radicaldesk

radicaldesk 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

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

This comment has been minimized.

Show comment
Hide comment
@esilvajr

esilvajr 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.

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.

@RubiousShaun

This comment has been minimized.

Show comment
Hide comment
@RubiousShaun

RubiousShaun 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.

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

This comment has been minimized.

Show comment
Hide comment
@Lewiscowles1986

Lewiscowles1986 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

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

@bennygill

This comment has been minimized.

Show comment
Hide comment
@bennygill

bennygill Aug 21, 2016

Not working for me :(

Not working for me :(

@milind2709

This comment has been minimized.

Show comment
Hide comment
@milind2709

milind2709 Apr 12, 2017

Work great !!! :) 👍

Work great !!! :) 👍

@AngeloLazzari

This comment has been minimized.

Show comment
Hide comment
@AngeloLazzari

AngeloLazzari 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

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

This comment has been minimized.

Show comment
Hide comment
@ihemantkumar

ihemantkumar 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.

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.

@bdbolin

This comment has been minimized.

Show comment
Hide comment
@bdbolin

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

bdbolin 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

This comment has been minimized.

Show comment
Hide comment
@quocpt

quocpt 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?

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

This comment has been minimized.

Show comment
Hide comment
@giulianorapoz

giulianorapoz Apr 25, 2018

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

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

@josecruzchavez

This comment has been minimized.

Show comment
Hide comment
@josecruzchavez

josecruzchavez May 24, 2018

Gracias, me ayudó bastante

Gracias, me ayudó bastante

@geelaniplay

This comment has been minimized.

Show comment
Hide comment
@geelaniplay

geelaniplay 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?

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?

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