fbpx
Enjoy Year-End Sale: 50% Off All Plugins! Coupon Code: NewYear2025

“Swatches align” feature not working on my site

Patrick Allossery

Hi, I am using Variation Swatches on my site. I also use Thrive Themes as my pagebuilder.

On my Archive/Shop pages, the swatches are always left justified. That is, when I change the setting to Centre or Right, the display on my Archive/Shop pages remains left justified.

I would like to change the display to “Centre.”

Here is an example of an archive page where this is happening (note, I do not have Variation Swatches active on all archive pages):
https://www.fanshoppe.ca/brand/big-ass-fans/

Please assist me in making this happen.

Thanks
Patrick

Hakik Zaman

Hi Patrick,

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

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

Please check now and let me know whether it resolves your issue or not.

Thank You

Patrick Allossery

You the man, Hakik! That’s perfect.

One more thing – how can I remove the “Clear” link on product pages?

Here’s an example:

https://capture.dropbox.com/FiERuNqyhDBRMchx

Under Archive / Shop, there’s a setting to remove the link on archive and shop pages, but I don’t see a way to remove it on product pages

Kind regards,
Patrick

Hakik Zaman

Hi Patrick,

It is a common behavior of WooCommerce. We have no control over that for the single product page.

But you can add the following code using the Code Snippets plugin or add it to your current theme’s functions.php

add_action( 'woocommerce_reset_variations_link' , function(){
return false;
}, 15 );

Note: If you are not using a child theme I will recommend using the Code Snippets plugin.

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

Patrick Allossery

Hi and Happy Holidays!

I just realized that the solution you provided me to center the swatches on my Archive/Shop pages, as shown here…

https://capture.dropbox.com/dLLWWsriLgssqlHW

… is also centering the swatches on my Product pages, as shown here:

https://capture.dropbox.com/IReT8q6KtifYQi11

However, as you can see, the layout of my product pages calls for the swatches to be left justified. Can you please provide me with a solution that “centres” the swatches on my Archive/Shop pages, while “left justifying” the swatches on my Product pages.

Here is the solution you provide me for my Archive/Shop pages:

https://capture.dropbox.com/QXSn4DH3HlmDNkAC

I look forward to hearing back from you.

Patrick

Hakik Zaman

Hi Patrick,

Thanks for getting back to us. Please replace the previous CSS with this:

.woo-variation-swatches:not(.single-product) .variable-items-wrapper {
justify-content: center;
}
.woo-variation-swatches:not(.single-product) .variable-items-wrapper ul.variations{
align-items: center;
}

After adding the above, please let me know how it goes.

Thank You

Patrick Allossery

Hi Hakik,

Thank you for providing the new CSS. Indeed, it works to centre the swatches on my Archive/Shop pages. However, the two text elements, “Finish” and “Clear,” which previously were centered, are now left justified.

https://capture.dropbox.com/fraVAyfo8VHRDWQk

Are you able to adjust the code to ensure these elements are also centered on my Archive/Shop pages?

Kind regards,
Patrick

Hakik Zaman

Hi Patrick,

Please add the following CSS with the previous CSS:

.woo-variation-swatches:not(.single-variation) ul.variations{
align-items: center
}

After adding the above, please let me know how it goes.

Thank You

Patrick Allossery

Hi Hakik,

Many thanks for pointing out my incorrect spelling. That fixed the issue:)

However, I still need help with another problem. The reason the spelling changed from center to centre is that I was fiddling with the code, trying to fix this:

https://capture.dropbox.com/yl4l3U1p5mOuKsrG

Can you assist me with centering the swatches in the related products section?

I look forward to hearing back from you.

Patrick

Hakik Zaman

Hi Patrick,

Please try the following:

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

Hope to hear from you soon.

Thank You

Patrick Allossery

Perfect!

Thank you . Please close this ticket if you like.

Patrick