Get Free Audit

Displaying Inactive “Add to Cart” Button for Out of Stock Products in Prestashop

Aug 25, 2014

4187 Alex Simonchik

Displaying Inactive “Add to Cart” Button for Out of Stock Products in Prestashop

The default Prestashop theme displays inactive ‘add to cart’ button for the product-list.tpl template, however, does not display this button on the product page. In order to display this inactive button for ‘out of stock’ products you need to find the element with the class “box-cart-bottom”:

And replace it with the following code:

i.e. you need to add the class ‘disabled’ and the property ‘disabled= “disabled” to the button.

To make  the button look inactive the following CSS is used in the default theme: .box-info-product .exclusive.disabled {opacity: 0.3;}

In addition, we have to write styles for: .box-info-product .exclusive.disabled:hover, .box-info-product .exclusive.disabled:before

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

The final result looks like this:

Displaying Inactive “Add to Cart” Button for Out of Stock Products in Prestashop


PrestaShop Development

Take your online store to the next level with BelVG PrestaShop Development

Visit the page
Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey


  1. Hi, Johan! Thanks for your question.
    If you do not want to make changes to the code, it is better to enable out-of-stock purchase in the admin panel.
    You can also download the Preorder module by BelVG and customize product-list page to display Add to cart button.

  2. How to displaying Inactive “Add to Cart” Button for Out of Stock Products in productlist?


  3. Hi, Andrew! Thanks for your question.
    Unfortunately, we need to know more details in order to be able to help you. Please, turn to our support at [email protected], and our team will do their best to resolve your issue.

  4. The method you described works when the product doesn’t have combinations. Could you describe how to work with the items that have combinations? Thanks in advance!

  5. Really appreciate your work, But I want to search how to remove showing quantity of any product, As I’ve put quantity for one of my Site Product, As you can see 100X tag in related products.
    Actually, After installation of a modules, Quantity tab has been disabled, Now I want to remove quantity tag, How will be possible?

  6. KJ,

    Well, until the customer do not buy the product, but only add it to the shopping cart, it is not reasonable.

  7. f288,

    I think you need to add a condition to determine when the products are out of stock and find a suitable icon on the site fontawesome.

  8. I was hoping that when I add an item to the cart and the item only has 1 in stock, I would see this. Is it possible to disable the button when you add an item to the cart and the item ONLY has 1 in stock?

  9. I am using PS There is no such fields in product-list.tpl

    Will be great if you suggest more on it.

  10. Hi,
    I’m following your guide for showing the disable button on pages of oos products.
    I’m doing it on PS1.6.0.9 and all it’s working well but there’s only a little problem, the disabled button instead of having the cart favicon has the loading favicon that turn clockwise (like when you click on the button for adding a product to the cart).

    Trying to fix this i added this to my css:
    .box-info-product .exclusive.disabled:before {
    content: “\f07a” !important;

    In this way i forced the cart icon, but now I have a cart icon that turn clockwise… Any idea on how to fix this?

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *