Swatches Text

Hello team,

I have created a variation product. Right now, the swatch text shows only on click, but I want all swatch texts to always be permanently visible at the bottom, and also remain visible when clicked.

Best

Hello,

Please try to add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-swatches-product .wd-swatch .wd-swatch-text {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Specific styling for background/image swatches */
.wd-swatches-product .wd-swatch.wd-bg {
    flex-direction: column;
    width: auto !important;
    height: auto !important;
}

.wd-swatches-product .wd-swatch.wd-bg .wd-swatch-bg {
    width: var(--wd-swatch-w);
    height: var(--wd-swatch-h);
}

.wd-swatches-product .wd-swatch.wd-bg .wd-swatch-text {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-800);
    text-align: center;
    width: 100%;
}

Best Regards,

Yes, this code is working fine

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts