How to make product list image turn grey when out of stock?

[Bulik]

Hi All!

Sorry, but I'm not good with coding, so that's why I'm asking this question. I want to make an out of stock product picture turning grey. There was the same topic in Prestashop forum, but, unfortunately, it's old, and the solution didn't work for TB. Could you please help me with this? (Topic in PS forum:https://www.prestashop.com/forums/topic/332910-solved-how-to-make-product-list-image-turn-grey-when-out-of-stock/) (Example of the result: https://tops.ua/category/detskiy-mir/letniy-otdyh).

 

[Scully]

What is difficult in reading the prestashop post and apply it in similar manner in thirtybees? First you need a CSS class. In the example its name is

graypicture

This is responsible for the CSS formatting of images in grayscale. It is not an existing class in TB, so you need to add it to your global.css. Plenty of web pages out there explain how this CSS rule must look like. Then you need to add a condition to the file

product-list-item.tpl

This code from the prestashop example ...

 $product.quantity <= 0

... is the magic part for the if condition. Do some own research and learn with it, piece by piece.