WooCommerce - Show quantity inputs for simple products within loops.

functions.php

<?php 
/**
 * Code should be placed in your theme functions.php file.
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );

function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
		$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
		$html .= woocommerce_quantity_input( array(), $product, false );
		$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
		$html .= '</form>';
	}
	return $html;
}

Please i need help on adding quantity selector to my pages on wordpress but not just getting it to show up. the url is marigoldsignatureng.com/ftd. I would like the quantity selector to show before the add to cart

Hi,
I need to have this function with ajax.

Thank you. It works great I've found, except when you select '0' in the quantity amount, it still adds one item to the basket. How would you add this to the conditional clause?

Hy @mikejolley

Thanks for sharing your code, I've used it for a long time.

However recently I noticed that it doesn't work with ajax. what made me look for another solution, so I found this code:
https://gist.github.com/webaware/6260468

I use the ContentViews "PRO" plugin to display my products, and the quantity box does not 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?

Or, how can I adjust your code to work with ajax?

Thank you so much

Beware, as this adds the POST to the address bar URL for some reason, meaning you lose idempotency : if you reload the page, it adds the product again.

It would be great if someone could assist me in disabling the redirection to the product page after clicking the quantity field buttons (+ or -) next to add to cart button on the shop page . The shop page reloads and redirects to the product page if I do not click the add to cart button quick enough right after entering a number or increasing/decreasing the quantity. I want to stop this behavior.

Expected behaviour: User should stay on the shop page. No reload, no redirect to the product page but actual cart contents need to be updated upon clicking + or - buttons.

Note: I enabled Redirect to the basket page after successful addition in wooCommerce > Settings > Products > Add to basket behaviour but this doesn’t do anything.

Here is the code:

<?php
function quantity_inputs_for_woocommerce_loop_add_to_cart_link($html, $product)
{
	if ($product && $product->is_type('simple') && $product->is_purchasable() && $product->is_in_stock() && !$product->is_sold_individually()) {
		$html = '<form action="' . esc_url($product->add_to_cart_url()) . '" class="cart" method="post" enctype="multipart/form-data">';
		$html .= woocommerce_quantity_input(array(), $product, false);
		$html .= '<button type="submit" class="button alt">' . esc_html($product->add_to_cart_text()) . '</button>';
		$html .= '</form>';
	}
	return $html;
}
add_filter('woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2);

/**
 * Add AJAX support
 * Sync quantity field
 */
function tp_quantity_handler()
{

	wc_enqueue_js('
  jQuery(function($) {
  $("form.cart").on("change", "input.qty", function() {
  $(this.form).find("button[data-quantity]").attr("data-quantity", this.value); 
	$.preventDefault();
  });
  ');

	wc_enqueue_js('
  $(document.body).on("adding_to_cart", function() {
    $("a.added_to_cart").remove();
  });
  });
  ');

	wc_enqueue_js('
  $(document.body).on("added_to_cart", function( data ) {
  $(".added_to_cart").after("<p class=\'confirm_add\'>Item Added</p>");
  });
  ');
}

add_action('init', 'tp_quantity_handler');

Appreciate any suggestions.
Thanks in advance