Variation Helo

[Rahim]

Hi Harry,

Some values of variations are a bit longer, so their not suitable for using as a label. They should be select.

But the drop down list is sol long. https://pasteboard.co/HK6f4CS.png

How can I fix it related to the width of value.

Check this product: https://look.ir/PUig

Regards.

 

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please go to Products > Attributes change the Attributes type contain variation to label same as size.

Regards

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

[Rahim]

Harry,

The label type is good for short value,

I added a new variation on this product. 200ml

When the value is long, it goes out of the label.

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please enable it as label i will help you increase size of circle around variation.

Regards

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

[Rahim]

Hi Harry,

It’s done

 

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add below code

.swatch.is-label .swatch__value {
	font-size: 12px;
	width: 36px;
	height: 36px;
	line-height: 36px;
}

Regards

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

[Rahim]

Hi Harry,

Is there any chance to assign a code which fit content?

This is working fine for this value, but if I change the 200ML to 20000ML it happens again.

Regards.

 

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

I’m sorry it can’t auto fit to content. we have to manual change.

Regards

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

[Rahim]

Hi Harry,

Thank you so much for your great support ever.

Harry,

When I change the width to width: 100% !important this happens.

How is using this code in your opinion?

I think with this I can change all of attributes to label.

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

I think for better UI, we can change the circle to rectangle.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

You can change circle to rectangle by add below code

.swatch__list--item {
	border-radius: 0;
}

Regards

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

[Rahim]

Great Harry,

I changed it to:

.swatch__list--item {
border-radius: 0!important;
padding: 3px!important;
}

Working as I wanted.

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

Hi Harry,

How can I fix this on product listing? Look.ir/New-Arrival

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add below code

.swatch__value {
	border-radius: 0;
}
.products .swatch__list--item {
	padding: 0 !important;
}

Regards

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

[Rahim]

Hi Harry,

This code changes the padding of Colors and Labels.

.swatch__list--item {
border-radius: 0 !important;
padding: 2px !important;
}

For the text labels the 5px is fine but for colors 2px is fine.

Is there any chance to apply differently the code to color and text?

2px:

5px:

My all code for override :

.swatch.is-label .swatch__value {
font-size: 13px !important;
width: 100% !important;
height: 24px !important;
line-height: 24px !important;
}
.swatch__list--item {
border-radius: 0 !important;
padding: 2px !important;
}
.swatch__value {
border-radius: 0 !important;
}
.products .swatch__list--item {
padding: 0 !important;
}

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add more code

swatch.is-color .swatch__list--item {
	padding: 2px !important;
}

Regards

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

[Rahim]

There are only two swatches class?

So with this fix I can change all of attributes to label. right?

Harry, I think one . is missing in your claas. I added that.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Yes, i miss “.” in my class but if you change to label it will not show color it only show text.

Regards

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

[Rahim]

I mean all attributes except color

Harry,

I realized in product listing, when we see the color variations swatches, it’s not selected. I mean that grey border.

I see on some site, in product listing, it is selected by default.

This will help the user, when the colors are similar together, to see what is the color of this font product.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Yes, you can change all except color to label.

Sorry it now doesn’t support show current color on product listing.

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

[Rahim]

Great.

Thank you for the support. 🙂

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Author]

Posts