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

Disable plugin update in WordPress

While it’s generally not recommended to disable plugin updates in WordPress due to security and functionality improvements, there might be specific cases where you need to prevent certain plugins from updating. Keep in mind that doing so may leave your site vulnerable to security issues and may cause compatibility problems with future WordPress versions.

Add Custom Taxonomy Filter on Products Dashboard.

How To Filter Products by Taxonomies in the Dashboard?

WooCommerce provide Many Product filters on admin screen , such as “Select a category”, “Filter by product type”, “Filter by stock status”.

How to log information, warnings, errors In wordpress

To create a custom write_log() function for WordPress, you can use the error_log() function to write messages to the error log. This function will allow you to log information, warnings, errors, or any other messages during development or debugging.