Return to previous page

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

Kapil Dev

Participant

March 4, 2023 10:15 am

How to make color name visible below swatches image for each and every variation swatches without hover.
Site URL: hidden
Theme version: 9.0.4

#348862 copied to clipboard
Rose Tyler

Support staff

March 5, 2023 11:10 am
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 to clipboard
Kapil Dev

Participant

March 6, 2023 7:58 am

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 to clipboard

Rose Tyler

Support staff

March 6, 2023 11:03 am

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 to clipboard

Kapil Dev

Participant

March 6, 2023 11:44 am

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

#349029 copied to clipboard

Rose Tyler

Support staff

March 6, 2023 3:24 pm

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 to clipboard