Customize Swatches

Hey there,
I’m looking to change the swatches to something similar to images uploaded.
And can I make the colour #286cf0 opposed to black.

Attachments:

You must be logged in to view attached files.

Hello,

Please follow the instructions of this manual to configure the swatches and let us know if you need CSS modification: https://xtemos.com/docs-topic/variable-products-and-swatches/

Best Regards

Hey,

Sorry yes should have been more specific, I will need help with CSS modification to make it look like the image attached.

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

Added.

Hello,

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

body .wd-swatch.swatch-with-bg {
   border-radius: 0;
}
.swatch-on-single.swatch-enabled.text-only{
border:2px solid transparent;
padding:3px;
}
.swatch-on-single.swatch-enabled.text-only:hover{
border:2px solid #000000;
padding:3px;
}
.swatch-on-single.swatch-enabled.text-only.active-swatch{
background-color:#000000;
	color:#ffffff;
}
body .wd-swatch:hover:after, 
body .wd-swatch.active-swatch:after {
    opacity: 0;
}

Best Regards

Awesome, almost done.

Is it possible to have a surrounding border with padding separates the border and colour swatch.
Image shows an example.

2px #f4f2f3 – border (padding between border and colour swatch)
2px #000000 – hover
3px #000000 – active

Thanks.

Sorry forgot to upload image

Attachments:

You must be logged in to view attached files.

Hello,

The color swatches are filled with color and it is not possible to make the border and gap between the color and border.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts