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
}

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?