Add plus and minus buttons to quantity input woocommerce

AI Verified

Name

About

Adds plus and minus buttons to quantity input woocommerce

Language

PHP

Rating

Voted: 0 by 0 user(s)

Codevault

Gertie-Visser

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: 6.4

Our AI bot has checked this snippet is compatable up to wordpress version: 6.1

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

11/07/2024

Important Note

This snippet has the following status:

AI Verified

This snippet has been tested by our AI bot, see any comments below.

Learn More

AI Bot Comments:

Found 0 vulnerabilities

Add plus and minus buttons to quantity input woocommerce

 
                     1add_action( 'woocommerce_before_quantity_input_field', 'display_quantity_minus' );
 2 
 3function display_quantity_minus() {
 4   if ( ! is_product() ) return;
 5   echo '<button type="button" class="minus" >-</button>';
 6}
 7 
 8add_action( 'woocommerce_after_quantity_input_field', 'display_quantity_plus' );
 9 
10function display_quantity_plus() {
11   if ( ! is_product() ) return;
12   echo '<button type="button" class="plus" >+</button>';
13}
14 
15add_action( 'woocommerce_before_single_product', 'add_cart_quantity_plus_minus' );
16 
17function add_cart_quantity_plus_minus() {
18   wc_enqueue_js( "
19      $('form.cart').on( 'click', 'button.plus, button.minus', function() {
20            var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
21            var val   = parseFloat(qty.val());
22            var max = parseFloat(qty.attr( 'max' ));
23            var min = parseFloat(qty.attr( 'min' ));
24            var step = parseFloat(qty.attr( 'step' ));
25            if ( $( this ).is( '.plus' ) ) {
26               if ( max && ( max <= val ) ) {
27                  qty.val( max );
28               } else {
29                  qty.val( val + step );
30               }
31            } else {
32               if ( min && ( min >= val ) ) {
33                  qty.val( min );
34               } else if ( val > 1 ) {
35                  qty.val( val - step );
36               }
37            }
38         });
39   " );
40}

Related Snippets

Please see some snippets below related to this snippet..

WooCommerce

AI Verified

Remove WooCommerce "Order Again" from Order Received Page

Added: 9 months ago

Last Updated: 9 months ago

View

WooCommerce

Unverified

WooCommerce Custom My Account Navigation Tab Icons

Added: 1 year ago

Last Updated: 1 year ago

You may wish to replace the default My Account Navigation Link icons with icons which are more appropriate and inline with your business branding. In our example, we have replaced the dashboard icon (...

View

WooCommerce

AI Verified

WooCommerce Change Coupon Code To Promo Code

Added: 1 year ago

Last Updated: 1 year ago

We’ve written a handful of guides on changing the coupon code wording to specific text. This is because some users find editing code snippets not particularly intuitive, especially non-coders. Do let...

View

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

WooCommerce

AI Verified

Change tekst add to cart woocommerce to Offerte

Added: 2 months ago

Last Updated: 2 months ago

Changes tekst "add to cart" woocommerce to "Offerte".

View

General

AI Verified

Change tekst add to cart woocommerce to Offerte

Added: 2 months ago

Last Updated: 2 months ago

Changes tekst "add to cart" woocommerce to "Offerte".

View

General

AI Verified

Change view cart tekst to offerte aanvragen.

Added: 2 months ago

Last Updated: 2 months ago

Changes view cart tekst to offerte aanvragen.

View