Lower the opacity for out of stock items, but only for certain product type.

Anne-Marieke
Excursionist
23 1 4

Hey there,

I am using debut theme and want to lower the opacity for out of stock items, but only when they are from a certain product type.
I found this:

.grid-view-item--sold-out .product-card__image-with-placeholder-wrapper{

    opacity: 0.1 !important;

}

to be pasted on the bottom of theme.css. Which works, but I only want it to happen when the products have the product type 'Uitverkocht'.
I think the solution should be simple, but my understanding of liquid is not enough yet to make this happen haha. 
I have tried some '{% if sold_out and product.type != "Uitverkocht" %}' '{% endif %}' things, but can't get it to work. 

Thank you in advance!

Replies 3 (3)
24by7themes
Navigator
389 61 73

 '{% if sold_out and product.type != "Uitverkocht" %}' '{% endif %}' 

It is correct way but little bit changes in condition to do and also it's matter where you put this condition. 

For my perspective, add condintion inside product loop and give one class called 'uitverkocht_soldout'.

Then add below css 

.grid-view-item--sold-out.uitverkocht_soldout .product-card__image-with-placeholder-wrapper{

    opacity: 0.1 !important;

}

Shopify Plus Expert, Quality Service Provider, CONTACT ME for any kind of solutions.
Please like and accept solution. SKYPE -> live:gp21111990
Anne-Marieke
Excursionist
23 1 4

Hi @24by7themes thank you for your reply.

Could you tell me how and where I do this: 'Add condition inside product loop and give one class called 'uitverkocht_soldout'.? Sorry, my knowledge of Liquid is very basic.
My webshop is www.bickerykerst.nl and the product type I created is 'Uitverkocht' with a capital U. 

Anne-Marieke
Excursionist
23 1 4

Maybe anyone else that can help me? I haven't fixed this yet.