For image swatches, display the swatch name underneath the image

For Image swatches, display the swatch name underneath the image
This is from Envato Discussion, author told me to post here, will give me a custom CSS to show swatch name underneath the Image and show me this screenshot
https://monosnap.com/file/aoZpzIfMpLWmJrnnIcxTPN6SUcwX6m

Can you please provide the css

Hello,

Navigate to Theme Settings -> Shop -> Variable products and enable the “Show selected option name on desktop and tablet” option – https://take.ms/jusG6

When you select a variation on the single product page, the selected variation name will appear, like shown here: https://ibb.co/v4V5GDG7

Best Regards,

I know this option, Sir — and thank you for bearing with me. But I want the text to appear under the image swatch, just like the author from Envato showed me before I made the purchase.

I have at least 12 variation for my product, so the normal option will clutter the whole variation place

Hello,

Try to add the custom code, and it will add the text as you want. It only works with this style of swatches https://take.ms/AJzgs

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

.wd-swatches-single.wd-bg-style-1 .wd-swatch.wd-bg {
    width: auto;
    height: auto;
}
.wd-swatches-single.wd-bg-style-1 .wd-swatch-bg {
    position: relative;
    width: var(--wd-swatch-w);
    height: var(--wd-swatch-h);
}
.wd-swatches-single.wd-bg-style-1 .wd-swatch.wd-bg .wd-swatch-text {
    display: block;
}

Best Regards,

It’s currently displaying in a very unappealing way — honestly, it looks quite bad.
All I want is for the little text to appear under the image swatch, just like it’s shown here:
https://monosnap.com/file/aoZpzIfMpLWmJrnnIcxTPN6SUcwX6m

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-swatches-single.wd-bg-style-1 .wd-swatch.wd-bg {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wd-swatches-single.wd-bg-style-1 .wd-swatch-bg {
    position: relative;
    width: var(--wd-swatch-w);
    height: var(--wd-swatch-h);
}

.wd-swatches-single.wd-bg-style-1 .wd-swatch.wd-bg .wd-swatch-text {
    display: block;
    margin-top: 5px;
    text-align: center;
}

Best Regards,

its working sir thank you

[Author]

Posts