Expand variations swatches line

Hi,

Thanks for reaching out to us. It depends on the space of the wrapper.

It will display side by side till it gets space. From my inspection, your <td> has a fixed width: https://paste.pics/PV9DR

If you make it 100% like this: https://paste.pics/PV9DT it will display more swatches in the same row.

I hope I could clear up your confusion.

Thanks

Hi,

Thank you it works perfectly.

Patrick

About the border that is generated and that surrounds each image swatch, does it come from the image itself or the plugin ?
Thanks

Hi,

From my inspection, you are using <picture> tag instead of <img>. That’s why they are displayed like that. Can you please use <img> instead of <picture>?

Glad to know your previous issue has been resolved.

If you found our support helpful, please share your feedback here.

Your feedback keeps us inspired.

Thanks

So the picture tag comes from my DIVI theme and not from your the code of your plugin ?
In this case, I don’t think i’ll be able to change it sinice it comes from the theme coding.
Patrick

Hi,

So the picture tag comes from my DIVI theme and not from your the code of your plugin ?

Yes, the <picture> tag is not coming from our side. Generally, the image optimization plugin converts the <img> to <picture> tag. Our plugin will add CSS for the <img> tag, not for the <picture> tag. You can try the following CSS at Appearance > Customize > Additional CSS

.woo-variation-swatches picture.variable-item-image {
    max-width: 85px;
    max-height: 85px;
}

Then it will display like this: https://paste.pics/PVBM4

Hope to hear from you soon.

Thanks

Thank you it works well. I didn’t see a way to delete the image border.
Patrick

Hi,

To remove the border you can add the following CSS at Appearance > Customize > Additional CSS

.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item){
    box-shadow: none;
}

Please let me know if it helps. Hope to hear fro you soon.

Thanks

It was a box-shadow , thank you it works well.
Patrick

Glad to know your issue is resolved.

If you found our support helpful, please share your feedback here.

Your feedback keeps us inspired.

Thanks