Variation swatches for Woocommerce css?

Here is some info regarding variation swatches for Woocommerce, css related.

The default css settings for this plugin called “WooCommerce Variation Swatches” doesn’t look that great.

You can add this code to make it look like in the screenshot.

Add the code from /wp-admin/ /appearance/ /customize/ /additional css/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.tawcvs-swatches .swatch-label {
    background-color: #eee !important;
    color: #000 !important;
	border:1px #eee solid;
}
.tawcvs-swatches .swatch {
	border-radius: 5px !important;
	width: 35px !important;
	height: 35px !important;
	line-height: 35px !important;
	opacity:1 !important;
}
.tawcvs-swatches .swatch.selected {
	background-color: #E56DAB !important;
    border-color: #666 !important;
	opacity:1 !important;
}

This code will overwrite the default CSS code and you will obtain something that looks nicer.

If you have some CSS knowledge, you can tweak this further and customize it as you please.

If you need more help, a custom look, leave in the comments.

Another thing, to enable WooCommerce Variation Swatches, go to “woocommerce”, “products”, “attributes”, select your main attribute that has sub-attributes like XL, XXL etc and pick “label”.

Last thing, if you want to optimize your CSS code more, you can add the code from the article somewhere in the footer.

You don’t want to add the code in the header, as that will make the website load a bit slow.

For simple websites, it works anywhere.