Add quantity box on product listing page

Quantity box on product listing page

It is very obvious and mandatory to provide the option of adding the quantity of the selected product on the product listing page.

In general, Magento facilitates the user to change the quantity of product in two ways :

  1. A user can go to product detail page to change the product quantity
  2. A user is supposed to add the product to cart first and then change the quantity on the cart page before updating the cart.

Sounds tedious, right? What if the user changes his/her mind to choose another product instead of the selected one? Dodging over from one page to another can irritate the user. So to make this more user friendly, we are providing the option to add the quantity of product on product listing page. By doing this, the user can easily enter the quantity of the product right on the product listing page rather than redirecting to another page.

Here are the steps, which you can follow to add 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') ?>" 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) ?>"/>
    <?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) ?>"/>
    <?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>

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 share your views and let us know if you find this blog useful or need any further assistance.


Bottom Shadow
Comments (4)
  1. E-commerce

    September 11, 2013

    Hi the information on this blog is just amazing it keeps us coming back time and time again. i feel that others need to see this thing ,cheers for all your effort spent in making this fabulous site

  2. E-commerce

    September 17, 2013

    This is one technology that I would love to be able to use for myself. It’s definitely a cut above the rest and I can’t wait until my provider has it. Your insight was what I needed. Thanks

  3. valeroth

    February 4, 2016

    Well written!
    I’ll immediately grasp your rss as I can’t to find your
    e-mail subscription link or newsletter service. Do you’ve any?

Leave a Reply

Your email address will not be published. Required fields are marked *

nine × 6 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Get every new post on this blog delivered to your Inbox.

Join other followers: