Jump to content

Quantity box in product list?

Recommended Posts


Is it possible to put the wanted quantity box in the product list? (See attached file)

I have tried to use the code from my product.tpl in product-list.tpl but without success:

<!-- quantity wanted -->
						{if !$PS_CATALOG_MODE}
						<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} style="display: none;"{/if}>
							<label>{l s='Quantity'}</label>
							<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" />
							<a href="#" data-field-qty="qty" class="btn btn-default button-minus product_quantity_down">
								<span><i class="icon-minus"></i></span>
							<a href="#" data-field-qty="qty" class="btn btn-default button-plus product_quantity_up">
								<span><i class="icon-plus"></i></span>
							<span class="clearfix"></span>
						<!-- minimal quantity wanted -->
						<p id="minimal_quantity_wanted_p"{if $product->minimal_quantity <= 1 || !$product->available_for_order || $PS_CATALOG_MODE} style="display: none;"{/if}>
							{l s='The minimum purchase order quantity for the product is'} <b id="minimal_quantity_label">{$product->minimal_quantity}</b>
						{if isset($groups)}

Anyone who knows how to do?

Thank you in advance!


Share this post

Link to post
Share on other sites

That code is wrong, you has taken it from the product page, but in product list is different, also, is not only the input needed, if the Ajax car is enabled, then you need modify the .js file also.

Share this post

Link to post
Share on other sites

it is but there is not enough space

so we have to decide where we want to display these buttons



I would like it to be displayed as shown in my attached file in this thread.


Thank you in advance! 

Share this post

Link to post
Share on other sites

  • 9 months later...



I am attempting to get this implemented in with default-bootstrap and plus and minus buttons. I have added what haypro added here: https://www.prestashop.com/forums/topic/450698-tutorial-quantity-field-in-category-view-product-listing-prestashop-16/?p=2159205


It works, but the layout in the product list (not grid) view does not look good. 



I would like for it to look like



I have copied the following into the product-list.css


/* quantity_wanted */
#quantity_wanted_p input {
  width: 78px;
  height: 27px;
  padding: 0 6px;
  float: left;
  border: 1px solid #d6d4d4;
  line-height: 27px; }
#quantity_wanted_p .btn {
  float: left;
  margin-left: 3px; }
#quantity_wanted_p label {
  display: block;
  margin-bottom: 7px; }
  -moz-box-shadow: inset 0 6px 6px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: inset 0 6px 6px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 6px 6px rgba(0, 0, 0, 0.05);
  padding: 19px 19px 17px; }


I am pretty clueless about CSS. Any help would be appreciated

Edited by pouncepony (see edit history)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More