[Frontend Snippets] Override loop template and show quantities next to add to cart buttons.

wc-override-loop-show-cart-buttons.php

/**
 * Override loop template and show quantities next to add to cart buttons
 */
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;
}

Hi,
Great code! How can I've the price on the same line than quantiies? ( -Qty+ 5,55$ on same line)
Cheers

hello
i put the code in my function.php, but it don't work

Even prettier, using the internal template:

/**
 * Override loop template and show quantities next to add to cart buttons
 */
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 = wc_get_template_html( 'single-product/add-to-cart/simple.php' );
	}
	return $html;
}

Hi dear friend Not compatible with Woodmart template !!What to do

After adding the code, the ajax buttons stopped working and throws to the top of the page. How to remove it? http://mir-charma.ru/shop/

Thanks 💓

i have tried this snippet and I keep getting the same error "The snippet has been deactivated due to an error on line 6:

Cannot redeclare function quantity_inputs_for_woocommerce_loop_add_to_cart_link."

@kushanhasantha Because it's already defined in functions.php (or in any theme file)

@Spreeuw
Please let us know how to add a background color for that (- +) box. As for me the add to cart is hovered on the image, so it is not visible to user properly

Hi the code works out for me for manually added products and does not work for imported products using the CSV file. Any ideas what is happening please? Thanks

Dear Team,

After Adding snippets the button is not alligned well. attached screenshot for your reference,
https://snipboard.io/qhb1ur.jpg

Please help to resolve it

Thanks,
Nishant

Even prettier, using the internal template:

/**
 * Override loop template and show quantities next to add to cart buttons
 */
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 = wc_get_template_html( 'single-product/add-to-cart/simple.php' );
	}
	return $html;
}

https://gist.github.com/woogists/c5e5d73bb4d7d44f5642313b8094937c#gistcomment-2694606
Этот способ работает с темой Woodmart советую

what about a variable product ?

Hi,
I found a possible bug in the code.

On the product page, when UpSell and Related Products are being displayed.

When changing the quantity in one, the others are also changed.

Note this error does not occur with CrossSell products on the Cart page.

Does anyone know what may be causing this?

Hi,
I found a possible bug in the code.

On the product page, when UpSell and Related Products are being displayed.

When changing the quantity in one, the others are also changed.

Note this error does not occur with CrossSell products on the Cart page.

Does anyone know what may be causing this?

I noticed this bug today as well. When on the product page, changing the quantities will also change the quantities of related products or upsells with the same increment on the whole page. I'm don't have the skills to fix it. Let's hope for someone who has.

I noticed this bug today as well. When on the product page, changing the quantities will also change the quantities of related products or upsells with the same increment on the whole page. I'm don't have the skills to fix it. Let's hope for someone who has.

What a sad situation.
He was very excited about this feature.

I'm looking for the solution elsewhere, but I'm not getting any feedback.

Could you also try in the groups you participate in? maybe be luckier than me.

Even prettier, using the internal template:

/**
 * Override loop template and show quantities next to add to cart buttons
 */
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 = wc_get_template_html( 'single-product/add-to-cart/simple.php' );
	}
	return $html;
}

https://gist.github.com/woogists/c5e5d73bb4d7d44f5642313b8094937c#gistcomment-2694606
Этот способ работает с темой Woodmart советую

Hey.

On the product page, when UpSell and Related Products are being displayed.

When changing the quantity in one, the others are also changed.

Note this error does not occur with CrossSell products on the Cart page.

Do you know what may be causing this?

Hey @lgdelai, what theme are you using. I'm using OceanWP. Could it be a theme thing?

I got it all working, but with the plugin https://nl.wordpress.org/plugins/qty-increment-buttons-for-woocommerce/
I removed this above code snippet, then installed the plugin and added some css to fix some style in the related products section:
.woocommerce ul.products li.product .button { float:right; padding: 8px 18px; height:35px; }
Now the quantities change individually, not together.

check my site: https://www.apotheekbogaerts.be/wakken/product/vineactiv-detox-nachtolie-30-ml/

Hi,
I found a possible bug in the code.
On the product page, when UpSell and Related Products are being displayed.
When changing the quantity in one, the others are also changed.
Note this error does not occur with CrossSell products on the Cart page.
Does anyone know what may be causing this?

I noticed this bug today as well. When on the product page, changing the quantities will also change the quantities of related products or upsells with the same increment on the whole page. I'm don't have the skills to fix it. Let's hope for someone who has.

I Found the solution.

I was using the GeneratePress theme, and it already had the ability to display the arrows next to the buttons.

I then went into the theme settings and disabled the + and - (theme) buttons so I implemented my own buttons.

In short, I've been disabling the display of buttons next to the quantity field in the theme.

Even prettier, using the internal template:

/**
 * Override loop template and show quantities next to add to cart buttons
 */
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 = wc_get_template_html( 'single-product/add-to-cart/simple.php' );
	}
	return $html;
}

Hey @Spreeuw

Using the Original code of this post, the Ajax Button stop working.
I Found other way who work with Ajax.

But they cause another problem, with this other solution, the "- +" button doesn't apear on product list showed by a ContentViews Plugin.

The developers of ContentViews 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 new code to displays the quantities field in contentviews plugin too?

See code: (Works with Ajax, but doesn't display the quantity field in ContentViews).

https://gist.github.com/webaware/6260468

@lgdelai the add_to_cart shortcode is rendered by WooCommerce with this function:
includes/class-wc-shortcodes.php#L305-L368 and the woocommerce_loop_add_to_cart_link hook is called in the loop/add-to-cart.php template called by that very function.
This means that if this doesn't work in the list generated by the ConventViews plugin, they are loading the shortcode before your filter is applied. You could try putting the filter in an mu-plugin to see if that resolves the issue.

@Spreeuw thanks for your explanations.

Could you explain better what the mu-plugin you mentioned is about?

I didn't quite understand what I need to try to do.

it's an alternative method of adding custom code to your sites (compared to the 'traditional' method of using functions.php in your theme): mu-plugins load before regular plugins. This was the first google result:
https://wordpress.org/support/article/must-use-plugins/
but there are many other resources and tutorials.

Alternatively you could try the Code Snippets plugin, which also loads filters before functions.php and most plugins.

It's still possible the root cause lies somewhere else (for example, when the woocommerce_loop_add_to_cart_link is missing from the loop/add-to-cart.php template of your theme), or something else sepecific to ContentViews, but the developers of that plugin should be able to help with this. I'm not with WooCommerce and not the author of the original gist, just provided an alternative solution.

@Spreeuw
I find a plugin who works fine in all situations and is ajax compatible.

https://br.wordpress.org/plugins/quantity-field-on-shop-page-for-woocommerce/

He is capable of show quantity field a side of add to cart button.

Thanks all for help.

I am using
/** * Override loop template and show quantities next to add to cart buttons */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;}

The number picker works fine but it overrides the ajax add to cart to throw to the top of the page instead of adding: View cart
Can anyone suggest a change to code?