Skip to content

Instantly share code, notes, and snippets.

@mikejolley
Last active June 19, 2023 03:10
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save mikejolley/2793710 to your computer and use it in GitHub Desktop.
Save mikejolley/2793710 to your computer and use it in GitHub Desktop.
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;
}
@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