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

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

The final result looks like this:

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



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

Post a new comment

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