WooCommerce : Add +(Plus) & -(Minus) Buttons To Quantity Input.

Making a WooCommerce site has only one aim is to impress buyers to get more and more orders.
In world of competition we have to look different and unique. To show our site different from other sites we have to modify our site’s html and functionality
Quantity Field is input type number but it’s look not good. instead of it we can use a plus minus button on left and right side of Quantity field.
For adding plus and minus button html use 'woocommerce_before_add_to_cart_quantity' and 'woocommerce_after_add_to_cart_quantity'.

Before


//For Plus
function PlusYourQuantity() {
  echo '<div class="minusplusbutton"><button type="button" class="add">+</button>';
}
add_action( 'woocommerce_before_add_to_cart_quantity', 'PlusYourQuantity' );


//For Minus
function MinusYourQuantity() {
  echo '<button type="button" class="sub">-</button></div>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'MinusYourQuantity' );


function CustomScript() {
  // For single product page
  if ( ! is_product() ) return;
?>
<style>
  .minusplusbutton { float: left; margin-bottom: 20px; }
  button.add { float: left; background: #43c801; }
  button.add, button.sub { height: 45px; width: 45px; font-size: 30px; border: none; color: white; }
  button.sub { float: right; background: red; }
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
  $('form.cart').on( 'click', 'button.add, button.sub', function() {
    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' ));

    if ( $( this ).is( '.add' ) ) {
      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
}
add_action( 'wp_footer', 'CustomScript' );

After
null

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top