I want to change the size of variation swatches

This topic has 8 replies, 3 voices, and was last updated 2 years, 4 months ago ago by Olga Barlow

  • Avatar: cofashion2022
    cofashion2022
    Participant
    June 9, 2022 at 08:18

    I want to change the size of variation swatches (Size and color Attribute) to something large than what it is currently. If you could give me the relevant CSS code then I can adjust it.

    7 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 9, 2022 at 08:28

    Hello,

    For Shop or Single Product page?

    Regards

    Avatar: cofashion2022
    cofashion2022
    Participant
    June 9, 2022 at 09:47

    Shop page.
    and is there a way to be able to represent the image instead of the color?
    Here is an example:
    https://drive.google.com/file/d/1lQiO7vnleTPHOuRtTYlMkAPYzdIoe72O/view?usp=sharing

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 9, 2022 at 10:40

    Hello,

    Add the next code in Theme options > Theme custom CSS:

    .content-product .st-swatch-popup>.et_st-default-holder ul.st-swatch-size-normal li {
        width: 24px !important;
        height: 24px !important;
    }
    .et_st-default-holder {
        margin-bottom: 10px;
    }
    .content-product .st-swatch-popup>.et_st-default-holder ul.st-swatch-size-normal li >span {
        padding: 6px !important;
        font-size: 11px !important;
    }

    you can select the Image type – https://prnt.sc/-l3cdgWZEecc

    Regards

    Avatar: cofashion2022
    cofashion2022
    Participant
    June 10, 2022 at 00:12

    I used this css to change price color and size, but the unit prices without promotion are still the same. Please give me CSS to change its color and size.
    https://drive.google.com/file/d/1iKBzIvZJ_wLAHMintqZ60GBk7Wwl7bOu/view?usp=sharing
    And the original price CSS on the single product page.
    https://drive.google.com/file/d/1asZ0zt4OX1jBUgdjJ5fIrkrEGREnR2W7/view?usp=sharing

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 10, 2022 at 08:25

    Hello,

    1/ Edit this custom CSS code https://prnt.sc/09Aon32uMh02
    2/ Describe the desired result in more detail.

    Regards

    Avatar: cofashion2022
    cofashion2022
    Participant
    June 10, 2022 at 10:34

    I will describe it in more detail.
    I used this CSS to highlight the promotional price area and the original price area.
    https://drive.google.com/file/d/1_RrUIISSBX7ywOVfmXu_dKc-2pgmxM0f/view?usp=sharing

    But when entering the CSS, the promotion area changes according to my wishes, but the original price area of the products without promotion does not change.
    You can see the arrow direction in the image below. I want the CSS to be able to change their colors
    https://drive.google.com/file/d/1-zO7EiHsxgl8z7VrTzLWb8paRxx21IWv/view?usp=sharing

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    June 10, 2022 at 11:52

    Hello,

    Use the below code if you want to highlight both simple price and discount price

    .content-product .price > .amount, .content-product .price ins span {
        color: #fcaf16;
    }

    Regards

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.