swatch variations

Hi,
Please check attachment.

This variation design are show to click to users. its just like a text field. is it possible to create any design visible to clickable

Attachments:

You must be logged in to view attached files.

Hello,

Please elaborate how you want to change the design, check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Hi,
Please check attachment. if possible to add like this.?

Attachments:

You must be logged in to view attached files.

Hello,

To add a border on the swatches and add background color try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-swatch.swatch-on-single {
    border: 1px solid black;
    padding: 5px;
    background-color: red;
}

Regards.
Xtemos Studios.

Hi,
Thanks

Time-being this is fine. but better if you highlight box. without line

Thanks

Hello,

You are Most Welcome.

Please try adding the following Custom CSS for that.

.swatch-on-single.swatch-enabled {
    padding: 10px;
    border: 2px solid black;
    background-color: rebeccapurple;
}

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

Best Regards.

Hi,
You didn’t understand my requirement. please check attachment

when click the box. box will highlight to user. then user will understand its selected

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the url of the product to check it myself and help you out accordingly.

Regards.
Xtemos Studios.

Hi,
Please check credentials

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.wd-swatch.swatch-on-single.text-only.swatch-size-.active-swatch.swatch-enabled {
    background-color: aqua;
}

Regards.
Xtemos Studios.

Hi,
Please check below video
https://loom.com/share/bf34ec3ed3204a3cb7ea0be9e1e0a85f

if you can please

Hello,

I have adjusted the CSS and made it as you mentioned in the video.

Please clear cache and check back.

Regards.
Xtemos Studios.

Hi,
Thanks

What website did you changed ?

please send me the code i have 5 sites. i need to add all 5 website

Hello,

You are Most Welcome.

Following is the CSS code through which the swatches are appearing as you required.

.wd-swatch.swatch-on-single {
border: 1px solid #e6e6e6;
padding: 10px;
background-color: #fbfcfc;
border-radius:5px
}
.wd-swatch:hover:after, .wd-swatch.active-swatch:after {
    display: none;
}
.wd-swatch.active-swatch, .wd-swatch:hover {
    border: 2px solid black;
    background: white;
}

Best Regards.

Hi,
its perfect

Thank you very much

Hello,

We are thrilled that you loved your experience with XTEMOS,
We put customer experience and satisfaction as our priority, and your words reaffirm the hard work we put in every day. So thanks for your kind words and we look forward to seeing you again.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts