custom swatch size

This topic has 6 replies, 2 voices, and was last updated 11 months ago by Hung Pham.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
January 4, 2024 at 7:23 pm #526984

rabia.guvendi
Participant

Hi,

I change my swatch size to XXL and it’s worked correctly, but I need bigger size, how can I add a new custom size ? Or how can I set the size of “XXL” to a new custom size please ?
Thanks.

Attachments:
You must be logged in to view attached files.

January 5, 2024 at 6:22 pm #527362
Hung Pham
Keymaster
Hi rabia.guvendi,

Thanks for reaching to us.

Please try to add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS
```
[class*="wd-swatches"].wd-size-xxl.wd-shape-round {
    --wd-swatch-size: 150px;
}

[class*="wd-swatches"].wd-size-xxl .wd-swatch{
	width: var(--wd-swatch-size);
}
```
Regards,
January 15, 2024 at 11:27 pm #530133

rabia.guvendi
Participant

Hi, thanks for your reply, I try to do your modification but nothing change.

I hope you can help me.

Thanks

Attachments:
You must be logged in to view attached files.

January 16, 2024 at 10:00 am #530199

Hung Pham
Keymaster

Hi rabia.guvendi,

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

January 16, 2024 at 11:28 am #530223

rabia.guvendi
Participant

https://www.teapoto.com/produit/code-rouge-confort-menstruel/

January 16, 2024 at 11:46 am #530243

rabia.guvendi
Participant

can we manage the size of the icons? make a PC size and a phone size?

January 16, 2024 at 6:49 pm #530466
Hung Pham
Keymaster
Hi rabia.guvendi,

Thanks for details

Please remove previous Custom Code and try to add the following Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:
```
[class*="wd-swatches"].wd-size-xxl.wd-shape-square {
    --wd-swatch-size: 150px;
}

[class*="wd-swatches"].wd-size-xxl .wd-swatch{
	width: var(--wd-swatch-size);
}
```
Regards,
Author

Posts