{"id":9010,"date":"2021-06-04T09:09:36","date_gmt":"2021-06-04T09:09:36","guid":{"rendered":"https:\/\/eoxysit.com\/?p=9010"},"modified":"2026-10-06T13:19:31","modified_gmt":"2026-10-06T13:19:31","slug":"woocommerce-add-plus-minus-buttons-to-quantity-input-2","status":"publish","type":"post","link":"https:\/\/eoxysit.com\/blogs\/woocommerce-add-plus-minus-buttons-to-quantity-input-2\/","title":{"rendered":"WooCommerce : Add +(Plus) & -(Minus) Buttons To Quantity Input."},"content":{"rendered":"\n

How can we add +(Plus) & -(Minus) buttons to the quantity input on the product page in WooCommerce?<\/h2>\n\n\n\n

Making a WooCommerce site has only one aim is to impress buyers to get more and more orders.
\nIn world of competition we have to look different and unique. To show our site different from other sites we have to modify our site\u2019s html and functionality.
\nEvery 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 \u201c+\u201d and \u201c-\u201d 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 \u201c+\u201d and \u201c\u2013\u201d buttons to the quantity input on the product page in WooCommerce by pasting these code to your theme\u2019s functions.php.<\/p>\n\n\n\n

Quantity Field is input type number but it\u2019s 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\u00a0'woocommerce_before_add_to_cart_quantity'<\/code>\u00a0and\u00a0'woocommerce_after_add_to_cart_quantity'<\/code>.
<\/p>\n\n\n\n

\n\/\/For Plus\nfunction<\/span> PlusYourQuantity<\/span>() {\n  echo '<div class=\"minusplusbutton\"><button type=\"button\" class=\"add\">+<\/button>';\n} \nadd_action<\/span>('woocommerce_before_add_to_cart_quantity'<\/span>,'PlusYourQuantity'<\/span> );\n<\/code><\/pre>\n\n\n\n
\/\/For Minus\nfunction<\/span> MinusYourQuantity<\/span>() {\n  echo '<button type=\"button\" class=\"sub\">-<\/button><\/div>';\n}\nadd_action<\/span>('woocommerce_after_add_to_cart_quantity'<\/span>,'MinusYourQuantity'<\/span>); \n<\/code><\/pre>\n\n\n\n
\nfunction<\/span> CustomScript<\/span>() {\n  \/\/ For single product page\n  if ( ! is_product<\/span>() ) return<\/span>;\n?>\n<style>\n  .minusplusbutton { float: left; margin-bottom: 20px; }\n  button.add { float: left; background: #43c801; }\n  button.add, button.sub { height: 45px; width: 45px; font-size: 30px; border: none; color: white; }\n  button.sub { float: right; background: red; }\n<\/style>\n<script type=\"text\/javascript\">\njQuery(document).ready(function($){   \n  $('form.cart').on( 'click', 'button.add, button.sub', function() {\n    var qty = $( this ).closest( 'form.cart' ).find( '.qty' );\n    var val   = parseFloat(qty.val());\n    var max = parseFloat(qty.attr( 'max' ));\n    var min = parseFloat(qty.attr( 'min' ));\n    var step = parseFloat(qty.attr( 'step' ));           \n    if ( $( this ).is( '.add' ) ) {\n      if ( max && ( max <= val ) ) {\n        qty.val( max );\n      } else {\n        qty.val( val + step );\n      }\n    } else {\n      if ( min && ( min >= val ) ) {\n        qty.val( min );\n      } else if ( val > 1 ) {\n        qty.val( val - step );\n      }\n    }\n  });\n});\n<\/script>\n<?php\n}\nadd_action<\/span>('wp_footer'<\/span>,'CustomScript'<\/span>);\n<\/code><\/pre>\n\n\n\n

<\/p>\n\n\n\n
Related reading:<\/strong><\/p>\n