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

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