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

Swatches horizontal at shop pages

Hello,

Unfortunately the swatches are visible vertically in stead of horizontally on the shop page. What am I doing wrong?

Schermafbeelding 2022-08-02 om 14.10.22.png
On product page it looks right.

Schermafbeelding 2022-08-02 om 14.11.09.png

Although I don’t like the borders around the variations.

Can you please help me?

Hakik Zaman

Hi Marcel,

Thanks for reaching out to us. I have added the below CSS at Appearance > Customize > Additional CSS

.woo-variation-swatches ul.variations>li.woo-variation-items-wrapper {
   width: 100%;
}

Please check now if it resolves your vertical swatches issue or not.

Which border did you mean? This one or this one?

Thank You

Thank you! That is a quick reaction!

Maybe you can also help with the next question. On shop page on some products when you hover you see the variation image (Blocka Glam Sock, Bryana, Dion). But on a lot of other products not…

Also on product page hovering is not changing the image.

And by border I mean the second one. And then the border by ‘Maat’. The top line is not visible.

Hakik Zaman

Hi Marcel,

Thanks for your appreciation.

Could you record me reproducing your issue using a tool like this? https://www.useloom.com
It helps me to quickly figure out the issue.

Thank you

Hakik Zaman

Hi Marcel,

Can you please confirm your image changing issue has been fixed or not?

Before checking don’t forget to clear your cache like- Browser Cache, Caching Plugin Cache, Server-Side Cache, etc.

Thank You

Hakik Zaman

Hi Marcel,

That was not from our side. BTW, I have resolved that too by adding the below CSS:

.woo-variation-swatches .variations th.label{
   border: 1px solid #a7a7a7;
}

We really get excited & honored when you use our plugin on your site.

If you found my support helpful, could you please leave your valuable review here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5

Your rating keeps us inspired.

Thank You