How to change swatch display for size attribute

Hello,

How can I change the swatch display for size attribute?

From the exiting single letter display and underlined when hover or selected,
to a bordered box button and change the box button color when hover or selected.
Please see the attached image.

Kindly advise, thank you.

Attachments:

You must be logged in to view attached files.

Hi,

Could you please send us your website link so we can check it and prepare some custom CSS solution for you?

Thank you

Hi,

Please see below.

Thanks

Try to add the following code snippet to the Custom CSS area in Theme Settings

.single-product-content .variations .swatches-select .text-only {
	border: 1px solid #090909;
}

.single-product-content .variations .swatches-select .active-swatch {
	background: #090909;
	color:white;
}

Thanks for your prompt reply.

how can I highlight/change the color of the box when hover?

Add this also

.single-product-content .variations .swatches-select .text-only:hover {
	background: #090909;
	color:white;
}

[Author]

Posts