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

Aug 25, 20141074Alex 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


Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Andrey

11 Comments

  1. 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?

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

    Will be great if you suggest more on it.

  3. 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?

  4. 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.

  5. KJ,

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

  6. 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?

  7. 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!

  8. 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 store@belvg.com, and our team will do their best to resolve your issue.

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

    Prestashop 1.7.4.2

  10. 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.

Post a new comment

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