Add quantity box on product listing page

It is very user friendly if we provide the option to add the quantity of product on product listing page. In default magento setup, user must have to go to product detail page to change the product quantity or he/she has to add the product to cart first and then change the quantity from cart page and update the cart.

Here are the steps, which you can follow to add the quantity box on product listing page.

1. We have to add the quantity text box just above the “Add to cart” button. You will find the following code of “Add to cart” button in in “app/design/frontend/default/YourTheme/template/catalog/product/list.phtml” file.
   

   <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
   									

   Now add the the following code just above the code of add to cart button.

   <?php if(!$_product->isGrouped()): ?>
   
   <label for="qty"><?php echo $this->__('Qty') ?>:</label>
   <input type="text" name="qty" id="qty" maxlength="3" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>" class="input-text qty"/>
   
   <?php endif; ?>
   									

2. We need to wrap up the quantity box and add to cart button in the HTML form tag; so now after wrapping up the full code will look like as follow.

   <form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>">
   
   <?php if(!$_product->isGrouped()): ?>
   <label for="qty"><?php echo $this->__('Qty') ?>:</label>
   <input type="text" name="qty" id="qty" maxlength="3" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>" class="input-text qty"/>
   <?php endif; ?>
   
   <br />
   
   <button type="button" onclick="this.form.submit()"> title="<?php echo $this->__('Add to Cart') ?>"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
   
   </form>
   									

We can add the javascript validation for blank quantity box or set the default quantity to one. We can also use AJAX to add the product to cart but in that case we have to refresh the “MY CART” and “Recently added item(s)” block and also have to change the number of items in “My Cart” URL in header.

Feel free to post the comment if you find this blog helpful or you need any further assistance.

Thanks,