Variation swatches

Hello!

On one product page, I made variable products and tweaked everything with this CSS, but the problem is that when the client selects an attribute, the border should change color. And how to hide the underline like in this photo?

Best regards,
Alex

Attachments:

You must be logged in to view attached files.

Hello,

The underline you can hide with the help of the below code, enter it into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.single-product .wd-swatch:hover:after, 
.wd-swatch.active-swatch:after {
    opacity: 0;
}

Don’t hesitate to let me know if you need any further help or any other info.

Kind Regards

Hello!

Thank you! The underline has gone after pasting CSS code.
Another problem is how to set border color after clicking and how to delete the element “clear filter”?

Best regards,
Alex

.

Attachments:

You must be logged in to view attached files.

Hello,

With the help of the below code, you can hide the element “clear filter” and add border color to the active swatch, enter it into the “Global Custom CSS” in Theme Settings -> Custom CSS.

.single-product .wd-swatch.active-swatch {
    border-color: #333;
    color: #333;
}

.single-product .reset_variations {
    display: none !important;
}

Feel free to reach out to me anytime when you have anything more to say.

Kind Regards

Hello!

The problem is solved!

Thank you so much)
Alex

Hello,

I’m glad we managed to sort this out.

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