Add border

How Can I add border around ‘ Color ‘ and ‘Size’ Variations. Can it be auto selected if there is only one size ?

Please refer this screenshot

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

The below CSS code will help you to add the border to the swatches, please add it to the “Global Custom CSS” area via Theme Settings -> Custom CSS.

.wd-swatch:after {
	display: none;
}

.wd-swatch.swatch-with-bg {
	border: 2px solid #FFF;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}

.wd-swatch.swatch-with-bg.active-swatch {
	box-shadow: 0 0 0 1px #000;
}

.wd-swatch.swatch-with-bg:not(.active-swatch):hover {
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

.wd-swatch:not(.swatch-with-bg) {
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 3px;
	padding: 4px;
}
.wd-swatch:not(.swatch-with-bg).active-swatch {
	border-color: #000;
}

.wd-swatch:not(.swatch-with-bg):not(.active-swatch):hover {
	border-color: rgba(0,0,0,0.4);
}

Let me know if you have any questions, I’d be happy to answer them.

Kind Regards

• This reply was modified 1 year, 9 months ago by Luke Nielsen.

Thank you so much it worked

Hello,

If there’s anything you need, please write me or another member of our help desk team.

We’re here for you!

Kind Regards

[Author]

Posts