Solved

How to make sold out variant clickable

Ianlee221
Shopify Partner
28 0 5

Hi, 

 

I input below the code in my main.product.liquid for make sold out variant to be disable.

 

{%- for variant in product.variants -%}
{% if value == variant.title %}
{% if variant.available == false %}disabled{% endif %}
{% endif %}
{%- endfor -%}

 

But I use "Notify me when back in stock", So I want to make this sold out variant be clickable.

 

Is it possible to change? Here is my preview below : 

 

https://okua9emvlihu3f7f-61683237082.shopifypreview.com

Accepted Solution (1)
gr_trading
Shopify Partner
1694 141 176

This is an accepted solution.

Seems you are not using DAWN 8.0 if it is then your code will be in main-product.liquid

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36845 3636 11969

@Ianlee221 

oh sorry for any issue can you please share sold out product url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Ianlee221
Shopify Partner
28 0 5

Hello @KetanKumar 

 

Thank you for your reply!

 

Here is the link below : 

 

https://itsdcode.jp/products/am1224fl004

gr_trading
Shopify Partner
1694 141 176

Hi @Ianlee221 ,

 

Search for file product-variant-options.liquid and edit code like below

 

<label class="{% if option_disabled %}enable-notify{% endif %}" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
      {{ value -}}
      <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>

 

This will add a class named enable-notify class to label when the variant is out of stock. Now add the below SCRIPT at the end of the file.

 

<script>
  document.querySelector(".enable-notify").addEventListener("click",function(){
    alert("click trigger")
  })
</script>

 

This will bind the script to fire action. Attaching a screenshot for your reference.

 

hari1_prasad_0-1676444897617.png

 

Hope it helps...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
Ianlee221
Shopify Partner
28 0 5

Hi @gr_trading Thank you for your response!

 

I've tried to find "product-variant-options.liquid" you mentioned but unfortunately I cannot find it in my edit code section...

gr_trading
Shopify Partner
1694 141 176

This is an accepted solution.

Seems you are not using DAWN 8.0 if it is then your code will be in main-product.liquid

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
Ianlee221
Shopify Partner
28 0 5

Oh Yes your are right! Now I can see the product-variant-options.liquid and it works well.

 

Thank you!

Christelle12
Visitor
2 0 0

I impemented this code but still it doesnt work 

gr_trading
Shopify Partner
1694 141 176

Hi @Christelle12 ,

 

Which theme you are working on?

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee