fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Variation Swatches don’t display well in Firefox and Chrome

Marianne Reuter

Hi there,

I’m using Safari and was very happy with your plugin, because it did exactly what it should: displaying the variations side by side:

Bildschirmfoto 2022-01-12 um 15.37.15.png

But now I realized that in Firefox and Chrome the swatches are displayed on top of each other. That wouldn’t be too bad, but because I have some products with very long attributes (coffee beans – whole beans and ground beans) they are displayed in two or three rows additionally. So it’s hard to select the correct variation. See here for Chrome:

Bildschirmfoto 2022-01-12 um 15.36.46.png

How can I fix this?

Thank you in advance,
Marianne

Hakik Zaman

Hi Marianne,

Thanks for reaching out to us. Could you please place the below code at Appearance > Customize > Additional CSS

.woocommerce .elementor-1911 .elementor-element.elementor-element-00d1327 form.variations_form.cart .variations {
width: 100%;
}
.woocommerce div.product form.cart .variations td, .woocommerce div.product form.variations_form.cart .variations th.label {
text-align: left;
padding: 0;
}

Please let me know if it resolves your issue or not. Hope to hear from you soon!

Thank You

Marianne Reuter

Hi Hakik,

sorry for my late reply – I thought I’d get an email notification and have only now realized that you had answered me already …

Thank you so much for your code snippet!! It worked – now the variations look perfect and are arranged next to each other, just as they should.

Happy,
Marianne