Return to previous page

Show name of variation swatches on mobile version

This topic has 3 replies, 2 voices, and was last updated 2 years, 11 months ago ago by Jennifer

Jennifer

Participant

December 23, 2021 at 20:25

Hi there,

Is it possible to show the name of the variation on mobile version?
On desktop, when hovering, it shows the name of the variation, but on mobile, it doesn´t.
I saw this feature on another site, so I was wondering if this was possible. (It doesn´t have to be exactly like that. But if the name of the variation can appear, it would be great!)

Thank you,
regards,

#313018 Copied Theme version: 8.0.11

2 Answers
Rose Tyler

Support staff

December 24, 2021 at 08:39
Hello,

to show on mobile just as on desktop (on hover) http://prntscr.com/24asefw /
```
@media only screen and (max-width: 768px) {
    .sten-li-disabled:after, .type-color:after, .type-image:after {
        display: inline-block;
    }
}
```
– add code in Theme Options > Theme custom CSS > Global
or to show static http://prntscr.com/24asc4r
```
@media only screen and (max-width: 768px) {
    .sten-li-disabled:after, .type-color:after, .type-image:after {
        display: inline-block;
        opacity: 1;
        visibility: visible;
        position: static;
        transform: none;
    }
    ul.st-swatch-size-normal li.type-color {
        width: auto;
        height: auto;
        border: none;
    }
    ul.st-swatch-size-normal li.selected > span {
    outline: 1px solid #000;
    outline-offset: 2px;
    }
    ul.st-swatch-size-normal li.type-color span, ul.st-swatch-size-normal li.type-color:before {
        width: 20px;
        height: 20px;
        position: static;
        margin: 0 auto;
    }
}
```
Regards
#313029 Copied
Jennifer

Participant

December 24, 2021 at 14:08

Hi Rose,

Thank you very much!
Works as a charm as expected.
Many thanks and happy holydays.

kind regards,

#313048 Copied
Tagged: mobile version, seo friendly, show name, templates, variation swatches, woocommerce, wordpress
Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘Show name of variation swatches on mobile version’' has been successfully resolved, and the topic is now closed for further responses

Show name of variation swatches on mobile version

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection