Change Variation Dropdown to Buttons

How do I change my product variation option from the standard drop down to buttons that show all options on the screen and they can be selected, instead of the dropdown box..

Hello,

You can follow our detailed documentation on swatches in the following link:
https://xtemos.com/docs/woodmart/variable-products-swatches/

Best Regards

Thanks

I’ve enabled the swatches as text option.

Although I want to show the text in a coloured box per product variation, like a button format, I do not just want an underline on hover over the text…

Is this possible ?

Basically I want a border with padding around the variation text and on hover it changes the background colour and the selected variation stays this colour.

Can this be done with Woodmart and CSS or would it need a plugin ?

Hello,

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

.swatch-on-single {
    border: 2px solid grey;
    padding: 10px;
}

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

.swatch-on-single.swatch-enabled:hover {
    background: red;
}

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

Best Regards

Amazing… Thanks a lot !

Hello,

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts