Show elements based on variant selection

I am trying to hide only show specific item add ons based on the variant selection
can someone help?

Here is my public share link: (Webflow - MKS LED)

Hi Garry,

You can filter out the add ons you don’t want using script. However ID’ing the Add ons, and specifying their filter rule that you want on each will be much easier if you can make your first approach work- the reference fields to CMS items. Did you abandon that?

The approach I currently see you using is the multi-image field, which doesn’t have data fields that you can use to describe how the add-ons are connected to the variants. You could use alt-text however that would be a bit ugly and difficult to manage.

I don’t know if this will help, but I’m doing something similar on a site I’m working on. I can’t show it sorry, but I’ll try to describe it as best I can. (And now that I’ve written it out the numbers aren’t quite right, and I can’t figure out where I’ve gone wrong, but this should work regardless LOL)

What I’m doing is reliant on a non-standard use of the SKU so if you use these codes the normal way then you can still make it work, it might just take longer to do it.

So I’ve got:
one product page

I’ve created:
5 test products
3 identical options on each page (lets pretend they are colour, size and type)
12 variations

I want to display:
6 images (you can make groups of images as well) and the image that gets displayed will depend on what combination of options the user selects.

NB: 6 is just the number I’m using: you can have 12, you can have 2, but the more you have, the more work you’ve got to do and the bigger the chance you might make a mistake if you’ve got a brain like me :slight_smile:

On the product page, I’ve got 6 image wrappers. These six image wrappers correspond to the six images I want to display.

These six wrappers ALSO correspond to the SKU’s that I’m going to assign shortly.

Give those image wrappers a class, lets say shirt-container . Put into each wrapper the image or images that you want to display, putting each set of images into its own wrapper.

So on the product page they would all be displayed on the page, looking quite messy.

Go back to the products and assign them a SKU. Lets say you want the same images for all red, small hats: I’d give it the SKU redsmallhat .

Now go back to the to the product page and make each shirt-container a combo class that matches the SKU for the image you want to display. To make it easier to edit later on I’m using the same name for the combo class as the SKU, so for all red small hats I use the combo class shirt-container : smallredhat

Now I add conditional visibility, based on the SKU. For shirt-container : smallredhat I make it visible if “the SKU = smallredhat”. I go through and do the same to all the other shirt containers. Now each product variant should only display what is in the relevant container.

I’m not sure if that’s what you were after, but maybe something there is helpful :slight_smile: The downsides to this is that 1) It works okay if you don’t have a lot of variations, but if you are frequently adding new ones it can be a lot of work, and 2) You really need access to the designer for this to work and a working knowledge of Webflow so it isn’t really that easy to handover to a client if they are going to be eventually wanting to edit it.