Make one variation as main in variable products

[MrAlan21]

1.) Hello. Just started to add products to my shop and noticed one thing that variation switcher is not user-friendly for customers. In variable products (colors and sizes mix) I have different sizes for every color available and if customer choose size and there aren’t available the same sizes in other colors all the other colors going to be stretched by making unavailable to check these colors, so customer need to choose another size in which this color is available.

That all make  unfriendly user experience for variable products as customer need to play like a game to go back to color that is crossed. Is there an option to make one variation as main (color) in my situation, so it wouldn’t be stretched out, and in case if this color is not available in the chosen size, everything just reset similar as for example in H&M web shop

Attachments:

You must be logged in to view attached files.

[Harry]

Hi MrAlan,

Thank you for choose our theme.

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

.variations .swatch .value select {
	display: none;
}
.variations .swatch .value {
	display: block;
	border: none;
}
.swatch .reset_variations {
	display: initial !important;
}

2. Please go to Appearance > Widgets > YITH Ajax Filter change type of filter to AND or OR https://prnt.sc/xiee7d

Kind regards

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

[MrAlan21]

This reply has been marked as private.

[MrAlan21]

Yeah, didn’t notice that there appears Clear option below swatches right now. Ok. This is better now.

[Harry]

Hi Alan,

Please add more code to hide dropdown arrow.

.variations .swatch .value::after {
	display: none;
}

Kind regards

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

[Author]

Posts