CODEWITHSUNDEEP
wordpressbuttonwoocommerce
jorenwouters
jorenwouters

Reputation: 105

WooCommerce plus and minus buttons

I am a Web Developer and I want to make my own webshop with WooCommerce. But I have a problem, The plus and minus buttons on the product page are not showing, do anyone know how to get these buttons (maybe to add some code somewhere)?

Upvotes: 2

Views: 37852

Answers (6)

RollYourOwnEd
RollYourOwnEd

Reputation: 26

You also need to add this to your Javascript:

$('.plus').on('click',function(e){
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').val( val+1 );
});

$('.minus').on('click',function(e){
    var val = parseInt($(this).next('input').val());
    $(this).next('input').val( val-1 );
});

Upvotes: 0

Jigar Navadiya
Jigar Navadiya

Reputation: 79

@RollYourOwnEd Updated javascript that can prevent quantity goes in minus value :

$('.plus').on('click', function(e) {
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').val(val + 1);
});

$('.minus').on('click', function(e) {
    var val = parseInt($(this).next('input').val());
    if (val !== 0) {
        $(this).next('input').val(val - 1);
    }
});

Upvotes: 4

Maulik patel
Maulik patel

Reputation: 2442

/* Quantity add plus and minus */
jQuery('.woocommerce-variation-add-to-cart-disabled .quantity-plus').css("pointer-events","none");
jQuery('.woocommerce-variation-add-to-cart-disabled .quantity-minus').css("pointer-events","none");
jQuery('.woocommerce-variation-add-to-cart-enabled .quantity-plus').css("pointer-events","auto");
jQuery('.woocommerce-variation-add-to-cart-enabled .quantity-plus').css("pointer-events","auto");
jQuery(document).on( 'click', '.quantity-plus, .quantity-minus', function() {
    
     var qty = jQuery( this ).parent( '.input-quantity-box' ).find( '.qty' );
         if(jQuery.isNumeric(qty.val()) == false){
             qty.val(1);
         }
         /*var val = parseFloat(qty.val());
         var max = parseFloat(qty.attr( 'max' ));
         var min = parseFloat(qty.attr( 'min' ));
         var step = parseFloat(qty.attr( 'step' ));*/
         var val = parseInt(qty.val());
         var max = parseInt(qty.attr( 'max' ));
         var min = parseInt(qty.attr( 'min' ));
         var step = parseInt(qty.attr( 'step' ));
         
         if ( jQuery( this ).is( '.quantity-plus' ) ) {
             if ( max && ( max <= val ) ) {
                  qty.val( max );
               } else {
                  qty.val( val + step );
               }
         }
         else {
               if ( min && ( min >= val ) ) {
                  qty.val( min );
               } else if ( val > 1 ) {
                  qty.val( val - step );
               }
            }
        jQuery('.woocommerce-cart-form button.button').prop("disabled", false);    
});

function number_format1 (number, decimals, dec_point, thousands_sep) {
            // Strip all characters but numerical ones.
            number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
            };
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
            }
            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
        }

Upvotes: 0

Tanmay Patel
Tanmay Patel

Reputation: 1810

Display on the left the units (number with "+" and "-") to add for each product with add to cart button on the right. Put below code in functions.php file and add CSS code in style.css file.

//1. Show Buttons
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_plus' );
function display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_minus' );
function display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
//2. Trigger jQuery script
add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );
function add_cart_quantity_plus_minus() {
   // Only run this on the single product page
   if ( ! is_product() ) return; ?>
      <script type="text/javascript">  
      jQuery(document).ready(function($){   
         $('form.cart').on( 'click', 'button.plus, button.minus', function() {
            // Get current quantity values
            var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
            var val   = parseFloat(qty.val());
            var max = parseFloat(qty.attr( 'max' ));
            var min = parseFloat(qty.attr( 'min' ));
            var step = parseFloat(qty.attr( 'step' ));
            // Change the value if plus or minus
            if ( $( this ).is( '.plus' ) ) {
               if ( max && ( max <= val ) ) {
                  qty.val( max );
               } else {
                  qty.val( val + step );
               }
            } else {
               if ( min && ( min >= val ) ) {
                  qty.val( min );
               } else if ( val > 1 ) {
                  qty.val( val - step );
               }
            } 
         }); 
      });  
      </script>
   <?php
}

CSS code

.woocommerce div.product .entry-summary .cart div.quantity{
    float: none;
    margin: 0;
    display: inline-block;
}
.woocommerce div.product form.cart .button {
    vertical-align: middle;
    float: none;
}

Upvotes: 1

Marco Romano
Marco Romano

Reputation: 456

You need add .change();

Better inside your yourtheme/woocommerce/global/quantity-input.php In this way will work also in the cart page.

<script type="text/javascript">
    jQuery(document).ready(function($){
    $('.quantity').on('click', '.plus', function(e) {
        $input = $(this).prev('input.qty');
        var val = parseInt($input.val());
        $input.val( val+1 ).change();
    });

    $('.quantity').on('click', '.minus', 
        function(e) {
        $input = $(this).next('input.qty');
        var val = parseInt($input.val());
        if (val > 0) {
            $input.val( val-1 ).change();
        } 
    });
});
</script>

Upvotes: 4

Domain
Domain

Reputation: 11808

You need to override the 'quantity-input' from woocommerce in your child theme. This is located in plugins -> woocommerce -> templates -> global -> quantity-input Copy the contents from this file.In your theme folder create a 'woocommerce' directory. Create another folder named 'global' in this directory. Paste the contents over here.

Locate the code 

<input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />

Above this add this piece of code above it

<input class="minus" type="button" value="-">

and this piece below it

<input class="plus" type="button" value="+">

Your overall code would look like this:

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>
<div class="quantity">
<input class="minus" type="button" value="-">
<input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<input class="plus" type="button" value="+">
</div>

Upvotes: 6

Related Questions