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/

gistfile1.php

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

Works great!

copying this into my functions
outputs white screen :(

help

You are life saver! thanks a lot...

Thanks a lot!

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

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

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

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

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

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

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

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.

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.

@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

Not working for me :(

Work great !!! :) 👍

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

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.

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

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

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

Gracias, me ayudó bastante

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?

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

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?

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?