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
The topic ‘For image swatches, display the swatch name underneath the image’ is closed to new replies.
.
