Return to previous page

Variation Swatch Customization - by sonso

This topic has 4 replies, 2 voices, and was last updated 5 years, 2 months ago ago by Rose Tyler

sonso

Participant

September 19, 2020 at 00:54

The “Variation Swatch” used to pick variations is not customizable. I cannot change font colors, sizes, I can’t even pick the size of the box. I know it is possible to customize it because the default “Variation Swatch” for another website I created using Xstore was completely different. Please tell me how to customize it to my needs.

Please, contact administrator
for this information.

#251858 Copied Theme version: 7.0.0

3 Answers

Rose Tyler

Support staff

September 19, 2020 at 08:13

Hello,

Please watch this video – https://youtu.be/LgzC4iK-j6A
Also, styling can be changed using Custom CSS code. Describe the desired result in more detail and we will help you with the code.

Regards

#251868 Copied

sonso

Participant

September 20, 2020 at 00:40

Hello,
I would like these features:
1. ability to change the background color of the variation swatch.
2. change font color/size
3. change the size of the box
And is it possible to do it both in the single product pages and the shop pages? Thank you so much!

#251942 Copied
Rose Tyler

Support staff

September 20, 2020 at 13:38
Hello,

1) Add the next code in Theme Options > Theme custom CSS:

.content-product ul.st-swatch-preview li { background-color: white; }

2)

.content-product .st-swatch-size-normal span { font-size: 12px !important; color: red; }

.single-product ul.st-swatch-size-large li.type-label span { font-size: 13px; color: #dba832; }

3)

.content-product .st-swatch-preview li { padding: 3px; } .content-product .st-swatch-popup > .et_st-default-holder ul.st-swatch-size-normal li.type-image { width: 22px; height: 22px; }

Regards
#252004 Copied
Viewing 4 results - 1 through 4 (of 4 total)