Pawan Kumawat

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

How can we add +(Plus) & -(Minus) buttons to the quantity input on the product page in WooCommerce?

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.

Every theme has a different way of styling the different features, In many themes use buttons are used to increase and decrease the quantity of a product before adding it to the Cart, or while updating the Cart.While in many themes, there are buttons denoted by the “+” and “-” signs to add and reduce the quantity respectively, there are some theme too which use default arrow for doing it like: storefront. For such themes, we can add “+” and “–” buttons to the quantity input on the product page in WooCommerce by pasting these code to your theme’s functions.php.

 

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’.

 

//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');

 

Categories

Related Blogs

WooCommerce: Check if Product ID is in the Cart

To check if a specific product ID is in the cart in WooCommerce, you can use the `woocommerce_before_cart` action hook, which is fired before the cart page is displayed. Here’s how you can achieve this:

Upload Any File in My Account Registration Form

To allow users to upload a file in the My Account registration form in WooCommerce, you’ll need to customize the registration form and add a file upload field. We’ll use a custom function and a hook to achieve this. Here’s a step-by-step guide: