Variation Swatch Customization - by sonso

Solved3 replies2 participantsUpdated by Rose Tyler

  • Avatar: sonso
    sonso
    Participant

    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    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
    Avatar: sonso
    sonso
    Participant

    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
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    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

The issue related to '‘Variation Swatch Customization’' has been successfully resolved, and the topic is now closed for further responses