Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 2

Can I filter multiple specs with CSS?

Hi guys I am a coding newb with basic HTML and CSS knowledge just coding as a hobby.

 

I'm experimenting with CSS in shopify and got stuck on something for an hour hope someone can help.

 

https://imgur.com/a/dKg2I7v

In that link you can see two pictures. In the first one three categories are selected, yellow -> 300mm length -> 200mm width. This is a valid product and combination that can be purchased.

 

In the second picture you see that yellow -> 300mm length -> 100mm width is selected. However now the end user cannot purchase the item, because this is not a valid combination this product does not exist.

 

How can I make the filter hide combinations that do not exist when a particular spec is selected. e.g. If the customer selects yellow, it will show that it comes in all lengths, but when a lendth or width is also clicked on, it then filters down the options e.g. if 600 length is selected, only 400width is the only option shown because that color/length combinaition only comes in 400mm width.

 

Can this even be done in CSS or does it require more custom coding?

 

.single-option-radio input[type='radio']:checked+label {
background-color: yellow;
}

 

That made it so the spec clicked received a background color of yellow. But I don't know how to filter out unwanted options which waste peoples time. So if anyone has a source of how to link CSS elements I would love to read it. I only know how to make a change to one element, class or tag at a time.

 

I tried my best. Thank you so much in advance for helping me out. If this is impossible with CSS please let me know what I should look into instead.

1 Reply
Commander Lvl 1
Message 2 of 2

Re: Can I filter multiple specs with CSS?

I was going to say "no" but a little searching with Google suggests otherwise.

 

What I think you want to do is hide the 'incorrect' combinations. E.g. when the user clicks "300mm", you want to hide the "100mm width" option so they can't select it.

 

This web page has a CSS-only example of doing something similar.

 

 

Please follow-up to let us know how you made out. For good karma, mark a reply as the answer if it helped!