Hello everyone,
I want to change the transparency of sold out products in my shop. I managed to do that right now, but actually I only want to affect certain product types. I have added some code to my shop that I have ‘uitverkocht/sold out’ products and ‘temporarily out of stock’. So the latter will get back in stock in the near future, whereas the ‘uitverkocht/sold out’ products won’t get back in stock again. I want only the ‘uitverkocht/sold out’ product to have transparency.
The piece of code I’ve added to have two different sold out messages is:
<!-- Have two different sold out messages START code -->
{%- assign sold_out = true-%}
{%- if product.available -%}
{%- assign sold_out = false -%}
{%- endif -%}
<span class="price__badge price__badge--sold-out">
{% if sold_out and product.type != "Uitverkocht" %}
<span>{{ 'products.product.sold_out' | t }}</span>
{% else %}
<span>{{ product.type }}</span>
{% endif %}
</span>
<!-- Have two different sold out messages END code -->
The piece I’ve tried for the transparency is:
<!-- change transparency of sold out products START code -->
{% if sold_out and product.type != "Uitverkocht" %}
.grid-view-item--sold-out .product-card__image-with-placeholder-wrapper{
opacity: 0.2 !important;
{% endif %}
}
(I’ve added this to the bottom of theme.css on Debut theme)
But this adds transparency to all out of stock items, also the temporarily out of stock ones.
Any ideas how I can improve this piece of code? The webshop is www.bickerykerst.nl
