Add to Cart Element: I need to hide size variants, but not color variants

Hi,

The CMS collection list I am referring to is the native “Add to Cart”
Accessed through the Add to Cart element.

Goal:
I need to hide size variant buttons, but not color variant buttons.
I’d like to be able to toggle color variants on a category page.

Problem:
My problem is that all CMS items share the same class name.
I’m trying to hide size variants (display: none;) but not the other.

Current Result:
Because CMS items have the same classname, if I add CSS code to turn size variants to display:none, it also sets color variants to display:none.

Possible Solution:
In order to do that, I need to add a unique CSS classname to the CMS item I want to hide.

Help:
Is there anyway to do this with custom code? I am not a JS developer, so I’d have no idea what to write.

Thanks for your time.

Zach

It’s a good idea to share the read only link so people can help you out.

1 Like