Variation Swatches Color Name Showing After Hover on it. [On Single Product Page]

This topic has 12 replies, 2 voices, and was last updated 11 months ago ago by Rose Tyler

  • Avatar: Kapil Dev
    Kapil Dev
    Participant
    March 4, 2023 at 10:15

    How to make color name visible below swatches image for each and every variation swatches without hover.

    11 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 5, 2023 at 11:10

    Hello, Kapil Dev,

    Try to add the next code in Theme Options > Theme custom CSS:

    .single-product .st-swatch-preview li:after {
        opacity: 1;
        visibility: visible;
        bottom: -5px;
    }

    Kind Regards,
    8theme team

    Avatar: Kapil Dev
    Kapil Dev
    Participant
    March 6, 2023 at 07:58

    Hi, It’s working but some problems created which are I mentioned below.

    Before continue, I want to tell you I have changed the variation swatches image size according to my need and All the problems which are mentioned below should be customizable with according to my need so I can adjust title and images properly.

    For Desktop: (Screenshot 1: https://prnt.sc/aL-fSsWQd2EU )

    1. Border of variation Name overlap on each other.

    2. In First Variation, I have mentioned ” Orange – OR1 “. but no. 1 is missing in first variation name and it is happened because of Second variation name and their background border. So I want to make it to use second line if variation name is bigger than variation swatches image.
    So it’ll be like that
    Orange
    OR1

    3. Variation title name is showing upon Add to cart button for desktop only which is marked in screenshot here (Screenshot 2:- https://prnt.sc/qi5ZuFRAtWSM )
    so help me with this through code..

    4. If I want to remove border of variation color name title on single shop page then which code I need to use?

    For Mobile: (Screenshot 3:- https://prnt.sc/6DNFQnZIe8GC )

    1. In Screenshot 3, I have shared a mobile view of single shop page in which variation titles are showing upon variation swatches image. So tell me how to fix it.

    2. Please consider Desktop Point 1,2 & 4 for mobile device also.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 6, 2023 at 11:03

    Dear Kapil Dev,

    In order to provide you with assistance, we need to know the URL of your website. If the website is not yet live, please contact us once it is and we will assess what can be done to help you.

    Please note that additional customization is not included in our basic support services.

    Kind Regards,
    8theme team

    Avatar: Kapil Dev
    Kapil Dev
    Participant
    March 6, 2023 at 11:44

    I am hosting my website on Local Server and my website is not live.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 6, 2023 at 15:24

    Dear Kapil Dev,

    In this instance, we will wait until your website is live. Please contact us at that time.

    If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

    Kind Regards,
    8theme team

    Avatar: Kapil Dev
    Kapil Dev
    Participant
    June 12, 2023 at 07:28

    Hi, I need help regarding this. Please read all above discussion and I have provided some details on private content area.

    Please make it perfect for both desktop and mobile devices.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 12, 2023 at 09:45

    Dear Kapil Dev,

    Thank you for your response.

    Desktop – https://prnt.sc/uyNQtZuAdQ-m
    Mobile – https://prnt.sc/H0HG3K9dOJVj
    Custom CSS → https://prnt.sc/8QpGvnSD4Zhz

    .st-swatch-preview-single-product li:after {
        opacity: 1;
        visibility: visible;
        bottom: -5px;
        position: static;
        margin-top: calc(100% + 10px);
        display: block;
        transform: translateY(-5px);
        width: auto;
        white-space: normal;
    }

    Kind Regards,
    8theme team

    Avatar: Kapil Dev
    Kapil Dev
    Participant
    June 16, 2023 at 05:35

    How to decrease text size so that it’ll will fit with images

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 16, 2023 at 08:35

    Hello, Kapil Dev,

    Thank you for your response.

    The next code can be used to change the font-size:

    .st-swatch-preview-single-product .type-image:after {
        font-size: 7px;
    }

    Kind Regards,
    8theme team

    Avatar: Kapil Dev
    Kapil Dev
    Participant
    June 17, 2023 at 14:20

    How to remove border it’s taking extra space… I want to make this variation text more larger without using second line…

    https://prnt.sc/-cxB-MbBLGcP

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 18, 2023 at 07:18

    Hello, Kapil Dev,

    Thank you for your response.

    In this case, please change this code https://prnt.sc/QOHoYmgrX7L7
    to:

    .st-swatch-preview-single-product .type-image:after {
        font-size: 9px;
        padding: 3px;
        border: none;
    }

    Kind Regards,
    8theme team

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

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

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