Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce - Show quantity inputs for simple products within loops.
<?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;
}
@fegul
Copy link

fegul commented Jul 23, 2013

I used this override snippet but I think there is a newer version of the original template that checks if a product is purchasable. I only ask because it's caused some drastic style changes on my site. Is there a less intrusive way to link the quantity picker with the add to cart button?

@fegul
Copy link

fegul commented Jul 23, 2013

Found a gist that enables AJAX with a quantity picker: https://gist.github.com/claudiosmweb/5114131
Might be useful for others since the above requires a page reload.

@webaware
Copy link

webaware commented Aug 18, 2013

@fegul: I just branched this gist with something similar to the one you link (didn't know it existed!), but I also have a gist for doing this with hooks so that you can use the standard templates. Read my blog post, WooCommerce add to cart with quantity and AJAX for more details.

Copy link

ghost commented Feb 24, 2015

Is there a way to remove the functionality that makes the user jump to the top of the screen after adding an item to the cart and instead replacing it with the /loop/add-to-cart.php functionality where a message (View cart ->) appears below the button?

@kungfual
Copy link

kungfual commented Sep 28, 2015

Is there an update to this available for version 2.1.0 of add-to-cart

@mikejolley
Copy link
Author

mikejolley commented Apr 21, 2016

Updated for 2.5.

@webxpress
Copy link

webxpress commented Feb 26, 2017

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

@fedan80
Copy link

fedan80 commented Jun 14, 2017

Hi,
I need to have this function with ajax.

@lucyrose93
Copy link

lucyrose93 commented Aug 7, 2018

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?

@lgdelai
Copy link

lgdelai commented Jun 15, 2021

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

@nxmndr
Copy link

nxmndr commented May 31, 2022

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.

@sasigit7
Copy link

sasigit7 commented Jul 13, 2022

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

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