How to make the text of the variations show?

[prc93ltda]

Hello, right now the only way to know what color a variation is is to hoover but that does not work on mobile, how can I make the text show up?

Thank you!

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

On mobile the user have to touch on the color to know which image.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry, thank you for your response.

What I meant to say was that I need the actual text if the name of the color on top of the little variation picture. It disappeared out of nowhere and changed to the hover effect.

How can I not have the hover effect and just have the text there?

Thank you!

[Harry]

Hi,

The tooltip text name of color appear when you touch on color on mobile but it in little time about 0.5s Could you check it again?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Hi Harry,

I don’t want people to have to touch to be able to find out what color they’re selecting.

You guys had the option to just display the text right away, not hide it in a tool tip.

How can I display just the text? I don’t want the tool tip

[Harry]

Hi,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 800px) {
.swatch__list–item .swatch__tooltip {
top: -30px;
opacity: 1;
visibility: visible;
}
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Good morning Harry,

Thank you for your help.

I added the code but it didn’t work, the names of the colors are not being shown on the page.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please change prev code to

.swatch__tooltip {
	opacity: 1;
	visibility: visible;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[prc93ltda]

Thank you for your response Harry!

It worked but I still have a little issue, the titles are on top of each other. Please see image, how can I space them out.

Thank you!

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

I’m sorry for this case i don’t have any idea to space them out.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts