Return to previous page

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

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

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.

#348862 Copied Theme version: 9.0.4

11 Answers
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
#348923 Copied
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.

#348982 Copied

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

#349019 Copied

Kapil Dev

Participant

March 6, 2023 at 11:44

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

#349029 Copied

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

#349061 Copied

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.

#359170 Copied
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
#359184 Copied
Kapil Dev

Participant

June 16, 2023 at 05:35

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

#359525 Copied
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
#359544 Copied
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

#359623 Copied
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
#359639 Copied
Tagged: color name, hover, single-product page, themes, variation swatches, woocommerce, wordpress
Viewing 12 results - 1 through 12 (of 12 total)