Only show color swatches when applicable to product

[JosK84]

Hi,

I'm facing an issue with the color swatches we're using. We're currently developing a new Magento 2 store and have configurable products that can be configured on Content & packaging.

The issue we're facing is that not all products have a packaging option but Magento shows all options on default. 

For example:

We've got a product that's available in 1 L - 2 L & 5 L only the 5 L option has 2 packaging option Can or Box. We would like to only show these options when the 5 L product is selected. 

Does anyone have experience with how to get this done?  

I've added some screenshots that show how it looks now and what we want to achieve. 

Any help would be greatly appreciated

Regards JosCurrent situation

How we want it to workHow we want it to work

[Meetanshi]

Hello @JosK84 

You can solve the issue simply with CSS.

Set its class to display : none

You will find the class "swatch-option text disabled" in local.

Set the CSS to display : none on the product page to this class.

Hope it helps.

[JosK84]

Hi @Meetanshi ,

Thanks for your answer, the issue I'm having is that when solving it with CSS the other contents options also disappear when selecting one of the products.

When selecting 5L & Jerrycan, the 1 L option disappears and that's the thing I want to prevent from happening. Any suggestions?  

[Meetanshi]

Hello @JosK84 

To prevent the option to disappear, you have to work on the swatch's JS file.

You can find hints from swatch-renderer.js

Hope it helps.