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

Add to cart button and swatches selection on archive/shop pages

Dylan Baron

Hello,

I’m using Flatsome and WP Rocket and I’m trying to show swatches + the add to cart button on varaible products on archive/shop pages.

I tried to follow the documentation but it does not seem to work :

  • The add to cart button does not show –> EDIT : I found how to add the Add To Cart button, it was due to an unchecked flatsome theme parameter. But add to cart button remain above swatches despite the parameter we set on Variation Swatches.
  • I see the swatches but I’m unable to click on them
  • Also, would that be possible to show the image variation when clicking on a swatch in archive/shops ? At this time I’m unable to click on a variation, when I do, nothing happen.

Could you please help me on our test domain ?

You can check the following page for instance  : https://test4.premiersmoments.com/le-repas

Many thanks !

Hakik Zaman

Hi Dylan,

Thanks for reaching out to us. I have visited the link you have shared with us.

I found everything is working as expected- https://prnt.sc/U-7jqMefY0pI

Are you still facing the issues? Hope to hear from you soon.

Thank You

Dylan Baron

Hello,

Unfortunately, it is not always working. It looks like there is a conflict with WP Rocket.
Also, the add to cart button remains above swatches. We would like to have it below. We set this parameter in settings but it is not working.

Thank you 🙂

Hakik Zaman

Hi Dylan,

Unfortunately, it is not always working. It looks like there is a conflict with WP Rocket.

Did you flush the cache before checking?

Also, the add to cart button remains above swatches. We would like to have it below. We set this parameter in settings but it is not working.

You can try the following snippet using a plugin called Code Snippets

add_action('flatsome_product_box_after', function(){
if ( function_exists( 'woo_variation_swatches' ) ){
woo_variation_swatches()->show_archive_page_swatches();
}
});

Thank You

Dylan Baron

I did flush the cache, but still, it is not working.

I’ve added the snippet, but now swatches appears twice  : one above and one below the add to cart button.

The swatches above the add to cart are greyed out and hourglass cursor appears on hover.
The swatches below can be clicked but nothing happen when we click on them.

You can still check the following page  : https://test4.premiersmoments.com/le-repas

 

Thank you !

 

Hakik Zaman

Hi Dylan,

I have removed the snippet from the child theme’s functions.php and added a snippet using the Code Snippets plugin.

Please check this screencast- https://www.loom.com/share/02045bb028ec46abbd1969c6c32369ff

I have found the swatches above the add-to-cart button. I have also cleared the cache to check if it is in the right position. You can check it in the above screencast link.

Thank You

Hakik Zaman

Hi Dylan,

Thanks for getting back to us. Please kindly do a plugin compatibility check by doing these steps to identify the error :

=> Install & Activate a plugin called Health Check & Troubleshooting.

=> Enable the troubleshooting mode- https://paste.pics/QXIXW

=> Deactivate all of your additional plugins except WooCommerce and WooCommerce Variation Swatches Plugin in troubleshooting mode.

=> See if the problem persists.

=> If the problem is resolved, you will understand which plugin might be the culprit of this error by activating your additional plugins one by one.

Looking forward to hearing from you soon.

Thank you

Dylan Baron

Hi,

I see this is due to our cache plugin WP Rocket, do you have a sloution for this ?

Kind regards

Dylan Baron

Hello,

I see this is due to our cache plugin, WP Rocket, do you have a solution for this ?

Thank you !

Hakik Zaman

Hi Dylan,

I have added these lines in WP Rocket settings- https://paste.pics/R25BR

/wp-content/plugins/woo-variation-swatches/(.*).js
/wp-content/plugins/woo-variation-swatches-pro/(.*).js

Please check now and let me know whether it is working or not.

Before checking don’t forget to clear your caches like- browser cache, caching plugin cache, and severside cache (if you have one).

Hope to hear from you soon.

Thank You