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

centering swatches on archive page

Justin Mazur

Hi,

Installed your swatches plugin on my Dev site and notice on the archive pages when a product has more than one row of swatches the alignment of the swatches switches from centered to left-aligned (I have the “Swatches Align” dropdown in the “Archive/Shop” tab of the plugin settings set to “center”).

Tried fixing this with some CSS but after an hour of effort I seem to be getting nowhere.

Can you please point me in the right direction here? Thank you–posted screenshot below; see how the product on the right has a second row of swatches and they’re all aligned left:

Hakik Zaman

Hi Edward,

Thanks for reaching out to us. Unfortunately, the link you have given is not working from my end.

Do you have an area-wise restriction? If so, my IP is: 116.204.155.46

Hope to hear from you soon.

Thank You

Justin Mazur

Sorry, server was shutdown for the weekend, it’s up now.

Hakik Zaman

Hi Edward,

Please check your site, I have tried to visit the link and found: https://paste.pics/PC03C

Let me know when your site is available to visit.

Thank You

Hakik Zaman

Hi Edward,

Please add the following CSS at Appearance > Customize > Additional CSS

.woo-variation-swatches .variable-items-wrapper {
justify-content: center;
}

Then let me know whether it resolves your issue or not.

Hope to hear from you soon.

Thank You

Justin Mazur

Thank you, sorry for the delay. Your CSS works well, appreciate it.

Having another issue though. On the archive pages, certain variable products don’t display any swatches. So far I haven’t been able to identify a common element to the products that aren’t displaying swatches. Any idea what might be the cause?

Hakik Zaman

Hi Edward,

Having another issue though. On the archive pages, certain variable products don’t display any swatches.

Please make sure you have enabled catalog mode or not. If so, disable it like this: https://paste.pics/PGCSX

Then check whether you are facing this issue or not.

Thank You

Justin Mazur

Thanks, I tried deselecting the “Show Single Attribute taxonomies on archive page” checkbox under the “Special Attributes” tab as in your screenshot but this causes all the product attributes to appear on the archive pages. I only want the color swatches to appear.

I was able to get two of the products whose swatches weren’t appearing on the archive page to display the swatches by editing the “swatches settings” for the individual product and selecting “color” in the “catalog mode attribute” dropdown. Previously “global” had been selected, which seems to work fine for 95% of the products, but for some reason this needs to be set manually on a few products. Not sure why.

I’ll keep testing and will let you know if any other issues arise–I can see now that the second row of swatches on the archive pages isn’t quite aligned with the top row (second row is shifted slightly to the right) but hopefully I can come up with a CSS solution.

I’ll check back in.

Justin Mazur

Hi–just wanted to let you know this issue is resolved. Thanks for your help.