gray out the product was out of stock

Hi

I need code to gray out the product was out of stock, no matter variation or a simple product, just gray out the picture so that the user can understand it is out of stock

Now Betheme is supported
https://themes.muffingroup.com/betheme-store2/shop/

is it possible?

Even Storefront is supported

Hello,

Please send me the URL link to some out of stock products, then I will check the product style and prepare a custom CSS for you.

Kind Regards

Actually, I’m not talking about a single product, I mean the product archive like the address I give you in a private box

Please don’t share anything of my site in public

thanks

Hello,

Try to use the code below for help:

.product-grid-item.outofstock .product-element-top img {
    opacity: 0.3;
}

Kind Regards

I need to change the color to gray out, it is changing the opacity wich I don’t need it at all

Hello,

In the example that you sent, the opacity is used – https://prnt.sc/Dkw2DBiufdBE, so please clarify what you mean by making a product as “gray out”? Gray border?

Thank you in advance.

Kind Regards

I just add this to your code and everything is fine

.product-grid-item.outofstock .product-element-top img {
    opacity: 0.3;filter: grayscale(1);
}

thanks
close, please

Hello,

Always remember that you can reach out to us with any questions you may have.

Have a good day!

Kind Regards

[Author]

Posts