Plus Minus Shopping Quantity Buttons For Magento

back to tech articles
| 4th January 2013
jQuery 1.4+, A modern browser

We want to have plus and minus buttons to increment our product quantity, rather than just a boring input box that a user might have to (GASP) type into!

From this:

Before

To this:

After

Yes, much lazier, erm I mean… nicer 😉

1
2
3
4
5
6
7
8
9
10
11
<div>
  <a class="decrement_qty" href="javascript:void(0)">
    <img src="images/minus-qty.png" width="16" height="16" alt="&amp;ndash;" />
  </a>

  <input name="qty" size="4" value="1" />

  <a class="increment_qty" href="javascript:void(0)">
    <img src="images/plus-qty.png" width="16" height="16" alt="&amp;plus;" />
  </a>
</div>

And to make it all work, the jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
//<![CDATA[
  jQuery(document).ready(function(){
    jQuery('.increment_qty').click(function() {
      var oldVal = jQuery(this).parent().find("input").val();
      if ( parseFloat(oldVal) >= 1 ) {
        var newVal = parseFloat(oldVal) + 1;
        jQuery(this).parent().find("input").val(newVal);
      }
    });

    jQuery('.decrement_qty').click(function() {
      var oldVal = jQuery(this).parent().find("input").val();
      if ( parseFloat(oldVal) >= 2 ) {
        var newVal = parseFloat(oldVal) - 1;
        jQuery(this).parent().find("input").val(newVal);
      }
    });
  });
//]]>
</script>

I know this could be simplified, but I wanted support for multiple instances per page, and this supports that.

Note: If you are going to use this in a loop, place the jQuery outside the HTML loop, obviously.

This could be easily modified to suit dynamic applications also. Happy clicking!