Swatches over on the right side of product page

Hi,

Thanks for reaching out to us.

Can you please give us a product link?

Hope to hear from you soon.

Thank You

[link]

I tried to change themes but that did not help

Hi,

Thanks for sharing a link with us. Please add the following CSS at Appearance > Customize > Additional CSS

.woocommerce.woo-variation-swatches.single-product td.value.woo-variation-items-wrapper {
    display: block;
}

If you found this helpful, please share your feedback here- https://www.ads-software.com/support/plugin/woo-variation-swatches/reviews/

Your feedback keeps us inspired.

Hope to hear from you soon.

Thank You

Hi, thanks for your quick feedback.

I applied the CSS in the Customizer, but could not see a difference?

Hi,

Please add the following by replacing the previous CSS–

.woocommerce.woo-variation-swatches td.woo-variation-items-wrapper, .woocommerce.woo-variation-swatches th {
    display: block;
}

Then, make sure you have cleared all the caches like- browser cache, caching plugin cache, and server-side cache.

Hope to hear from you soon.

Thank You

Thanks again – i did apply it – but still could not see it had an effect on the Swatches position?

Hi,

I have applied the code using the inspect mode and it is working from my end – https://i.imgur.com/q2INEBh.png

Please make sure you have added them properly. You can also get in touch using this link for deep inspection.

Thank You

Thanks, yes I did notice that as well – very strange. I added it to the Customizer > Additional CSS like I have done for a lot of other things.. But apparently not working. Weird !

Anyway, I added it through my theme instead, and now the layout works better!

But, while it did fix the issue (thanks!) it broke the “Additional attributes” tab on the single product page:
https://imgur.com/QwY8xEv

Hi,

Please add the following by replacing the previous?CSS–

.woocommerce.woo-variation-swatches form.variations_form td.woo-variation-items-wrapper, 
.woocommerce.woo-variation-swatches form.variations_form th {
    display: block;
}

I have done for a lot of other things.. But apparently not working. Weird !

It must be an issue of the server-side cache.

Please let me know whether it helps or not.

Thank You

Ok, success. Couldn’t see any issues and now it’s displayed correctly.

Thank you so much for your time, much appreciated.

Hi,

Thank you so much for your appreciation.

Your appreciation keeps us motivated to do more for the WordPress community. ??

Thank You

Hi @fizanzvai . Thanks again for your help earlier.

I was also wondering, is there a way to control the spacing? Your CSS fixed the issue mostly, but the spacing is not optimal, and some users get confused with the Title of the swatches and the swatches themselves:

https://imgur.com/gwK9aJu

Product link: [link]