How To Add A Increase And Decrease Button To Quantity Box

In the product view page, I would like to add a plus and minus button that increases and decreases the number of quantity of product.

Solution 1:

Go to, app\design\frontend\default\your_theme\template\catalog\product\view\addtocart.phml

At around line no 32 search,

<label for="qty"><?php echo $this->__('Qty:') ?></label> <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />

Replace the above with,

<div> <label for="qty"><?php echo $this->__('Qty:') ?></label> <input class="button-arrow button-up" type="button" value='+'></input> <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" /> <input class="button-arrow button-down" type="button" value='-'></input> </div>

At the end of that .phtml file paste,

<script type="text/javascript"> //&lt;![CDATA[ jQuery(function($) { $('.add-to-cart .button-up').click(function() { $qty = $(this).parent().find('.qty'); qty = parseInt($qty.val()) + 1; $qty.val(qty); }); $('.add-to-cart .button-down').click(function() { $qty = $(this).parent().find('.qty'); qty = parseInt($qty.val()) - 1; if (qty < 0) qty = 0; $qty.val(qty); }); }); //]]&gt; </script>

Solution 2:

Use HTML5 input type "number"

Please check for all browsers before make it live.