Cannot deselect variation swatch

[schris]

If I have a product with multiple variations, say 3 colors and 3 sizes, when I select a color the appropriate sizes are crossed out. However, if I also select a size, I cannot go back to a color that does not have the same size in stock. Is there a way to “deselect” a swatch, something easily done when having a drop down menu?

I have sent a product link that shows the issue (if you select to Coral and M, you cannot then go to gold which does not have medium size in stock).

Thanks,

Stavros

[Harry]

Hi Stavros,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.swatch .reset_variations {
	display: inline !important;
}
.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper {
	display: none;
}
.is-label > .value, .is-color > .value {
	display: block;
}

And deactivate plugin Woo Variation Swatches

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[schris]

First of all, many thanks for the super quick reply, as always.

The other plugin (Woo Variation Swatches) was only there to test if it was a plugin or theme issue, I have completely removed it (and the added CSS).

Now, when I add the custom CSS, I see that it does add a “clear” option but it also adds a drop down menu below the swatches. What I would like to have is the swatches only (without the list) but some option to clear them. Basically, I see that choosing a color from the swatch does not change the visibility of reset_variations to visible, while choosing it from the drop down changes it to visible, ie the following block applies for both the clear and the drop down at the same time:

.is-label > .value, .is-color > .value { display: block/none/whatever}

Is it possible to fix this?

Thanks,

Stavros

[Harry]

Hi Stavros,

Please add more code

.is-label > .value select, 
.is-color > .value select { display: none;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[schris]

Hello again,

Still the same, I have nowhere to reset it.

[Harry]

Please add more code

.variations .value::after {
	display: none;
}
.is-label > .value, .is-color > .value {
	border: none;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

I still see you lost the code, please add more

.is-label > .value, .is-color > .value {
	display: block;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[schris]

Thanks again for the reply. Unfortunately, I do not see any difference. I have temporarily disabled autoptimize so as to be able to see directly which CSS is called

Just to avoid confusing you, I have an example to show. Have a look at this page:

*page removed*

Clicking on a color, say yellow, allows you to click Small size, as it is in stock. From there, it is impossible to go to coral color, since they don’t share sizes. When using drop downs rather than swatches, you could click on “clear” or even go to “pick a size” or whatever the first option in the drop down menu is, and you could then effectively reset the selection.  Now, the only way is to do a full refresh of the page.

So what I am after is either having a “clear” swatch/button/whatever, or alternatively disabling an selected option by clicking again on it.

If you need any further info please let me know, I will be happy to provide it.

Thanks again for the great support.

Stavros

[schris]

Harry wrote:

I still see you lost the code, please add more

.is-label > .value, .is-color > .value {
	display: block;
}

Kind regards

You were even faster than my reply, works fine now! Thanks very much!

 

[Harry]

You’re welcome.

Have a great day!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts