add_filter(
'woocommerce_loop_add_to_cart_link',
'quantity_inputs_for_woocommerce_loop_add_to_cart_link',
function( $html, $product ) {
if(
$product && $product->is_type( 'simple' )
&& $product->is_purchasable()
&& $product->is_in_stock()
&& ! $product->is_sold_individually()
) {
$html = sprintf(
'
<form action="%s" class="cart" method="post" enctype="multipart/form-data">
<div class="quantity_buttons">
<input type="button" value="-" class="minus" />
%s
<input type="button" value="+" class="plus" />
</div>
<p><button type="submit" class="button alt">%s</button></p>
</form>
',
esc_url( $product->add_to_cart_url() ),
woocommerce_quantity_input( [ 'min_value' => 1 ], $product, false ),
esc_html( $product->add_to_cart_text() )
);
}
return $html;
}, 10, 2 );
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script( 'jquery' );
wp_add_inline_script( 'jquery', '
jQuery( document ).ready( function( $ ) {
String.prototype.getDecimals || ( String.prototype.getDecimals = function() {
var a = this, b = ( "" + a ).match( /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/ );
return b ? Math.max( 0, ( b[1] ? b[1].length : 0 ) - ( b[2] ? +b[2] : 0 ) ) : 0
} ), jQuery( document ).on( "click", ".plus, .minus", function() {
var a = jQuery( this ).closest( ".quantity_buttons" ).find( ".qty" ),
b = parseFloat( a.val() ),
c = parseFloat( a.attr( "max" ) ),
d = parseFloat( a.attr( "min" ) ),
e = a.attr( "step" );
b && "" !== b && "NaN" !== b || ( b = 0 ),
"" !== c && "NaN" !== c || ( c = "" ),
"" !== d && "NaN" !== d || ( d = 0 ),
"any" !== e && "" !== e
&& void 0 !== e
&& "NaN" !== parseFloat( e )
|| ( e = 1 ),
jQuery( this ).is( ".plus" ) ? c && b >= c ? a.val( c )
: a.val( ( b + parseFloat( e ) ).toFixed( e.getDecimals() ) )
: d && b <= d
? a.val( d )
: b > 0 && a.val( ( b - parseFloat( e ) )
.toFixed( e.getDecimals() ) ),
a.trigger( "change" );
} );
} );
', 'after' );
} );
Product archives: Simple products separate plus and minus quantity buttons
Adds button quantity selectors to non-variation product archive (shop) pages. Typically CSS is then used to style the new buttons accordingly.
How to use
PHP Code Snippets
- Log into a staging, development, or locally hosted clone of your site
- Install and activate Code Snippets
- WP Admin > Snippets > Add New
- Copy and paste the code from the Description tab above
- Check to ensure formatting came over properly and no syntax errors show up in the editor
- Customize the code as desired
- Add a meaningful title
- Select whether to run on front-end or back-end (or both)
- Click “Save and Activate”
- Test your site to ensure it works
- Disable if any problems, or recover
- Repeat for live environment
License
All code snippets are licensed GPLv2 (or later) matching WordPress licensing.
Disclaimer of warranty:
Except when otherwise stated in writing the copyright holders and/or other parties provide the program as-is without warranty of any kind, either expressed or implied, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose.
Support
- Describe the issue and what you’ve observed.
- Describe your expected outcome(s).
- List steps to reproduce the issue.
- Optionally provide screen-shot or video URLs.
