Skip to content

Instantly share code, notes, and snippets.

@webaware
Last active June 6, 2023 18:00
Show Gist options
  • Save webaware/6260468 to your computer and use it in GitHub Desktop.
Save webaware/6260468 to your computer and use it in GitHub Desktop.
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
}
@giulianorapoz
Copy link

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

@josecruzchavez
Copy link

Gracias, me ayudó bastante

@geelaniplay
Copy link

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

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