How to grey out/disable unavailable product options

Technical Q&A
1

Hey there!

I’m currently trying to grey out unavailable options on a product page and it’s been a massive struggle.

The options are: Size, Shirt Color, Graphic Color

Not all shirt colors are available in all sizes or graphic colors. For example a ‘2XL Blue shirt with blue graphics’ doesn’t exist however the unavailable options wont grey out/look disabled when a blue shirt is selected.

Note: The ‘add to cart’ says unavailable and is disabled but I’m really looking to keep it clean & simple. This is for a client who reaaaally wants only available options to show/look clickable (hiding unavailable options is also something I’d be open to)

Thank you in advance for your time and help :folded_hands:t3:

2

@AleenaBWell May this help you. Click Here.

3

Thank you! Will try this and report back :grinning_face:

4

Hello @AleenaBWell

This can be done with the help of a custom liquid code -

Here are some steps to fix this.

Go to your product page

Look for the liquid code (ex - product.liquid page)

Find {% for variant in product.variants %}

{% if variant.available %}

-------------------option code here-------------

{% endif %}

{% endfor %}

Add the above code to the file.

You can also fix it through javascript cod, please checkout this video for the same -

https://www.youtube.com/watch?v=vspWDu_POYA

Hope it helps, let us know if you need any further assistance.

Regards,

Team CedCommerce