Want To Add Extra Images Per Product Variations? Download This Free Plugin

Issues with Variation Swatches + Additional Variation Images Gallery plugins

Eric Diep

Hello,

I set up the plugin “Variation swatches for Woocommerce” so as to achieve the following features:

1) Display swatches on archive page with add-to-cart button ;

2) On archive page, display product image based on attribute variation (colour) hovered over, and keep attribute variation selected on product page after clicking from archive page.

So, basically, what I try to get is the possibility for customers to select color and size of item and add it to cart from catalog page. And also on catalog page, when customers hover over a color of item, the product image change accordingly, and when they click on a color, that color is selected on product page.

Unfortunately, I’m facing the following issues:

I can only achieve either feature 1) or feature 2) but I can’t combine both. Yet, according to your tutorial (see screenshot here: https://ibb.co/L51zJcG), it seems possible.

Regarding point 2), I noticed that when I click on an item color variation from catalog page, the color variation is selected on product page but the product image doesn’t change accordingly. The issue seems to be caused by a conflict with the theme because after testing with Storefront theme, product image was showing properly. You can see on the images below an example of the described issue:

https://ibb.co/jDkfspc

https://ibb.co/TqWPb7S

Also, the plugin “Additional Variation Images Gallery” is installed and enabled in the website backend but doesn’t show at all on frontend due to a conflict with the theme. I know that because when I did a test with Storefront theme, it worked well.

Thanks,

Kind regards

Eric Diep

Hello,

It’s been 3 days now and I still haven’t received any reply from you.

Regards

Hakik Zaman

Hi Eric,

Thanks for reaching out to us. We are sorry for your inconvenience and late response, we were on our Eid Vacation.

1) Display swatches on archive page with add-to-cart button ;

Add to cart button visibility depends on your theme architecture. If they removed “Add to cart”, either you have to change the template file on your own or contact your theme developer regarding the cart button issue.

Could you please deactivate our Swatches and Gallery plugin and check if the images are changing without our plugins or not?

Hope to hear from you soon!

Thank You

Eric Diep

Hi,

Thanks for your reply. If I’m not mistaken, by default with Woocommerce, the add-to-cart button is only visible on the product page, not on shop page. Anyway, with my theme, add-to-cart button can be visible on shop page only with simple products. With variable products, “Add-to-cart” button turns into “Select options” button. In order to make sure, I deactivated the plugins as you ask me to, and I can confirm it works like that.

I gave you accesses to my staging website, so you can check by yourself if you need to.

Regards

Hakik Zaman

Hi Eric,

Yes, you are right. For variable products, WooCommerce displays the Select Options button on the shop page.

I have logged in to your site and found you have enabled Catalog Mode from Swatches > Special Attributes.

Add To Cart will not be visible if you enable Catalog Mode because you are displaying one attribute on the Shop page by enabling it.

To display Add To Cart you have to select two attributes Couleur and Taille.

Thank You

Eric Diep

Hi,

Thank you. Ok, so, that’s what I thought: If I want to get product images change on hover over a color attribute on shop page, I can’t have the Add-to-cart button visible, and vice versa, but I can’t have both features…

And what about issue 2)? When I select a color attribute on shop page, the product image on product page doesn’t show accordingly to the selected color attribute .

Regards

Hakik Zaman

Hi Eric,

Can you please clear your cache( Browser cache + Caching Plugin Cache + Server-Side Cache )?

I have checked your site and found everything is working as expected.

Please check this screencast.

Thank You

Eric Diep

Hi,

I cleared cache from browser and deleted transients (but don’t know how to clear cache with plugin and server-side). Anyway, from what I see on your screencast, it seems that you don’t understand my issue. There is no problem on shop page. The problem is when you select a color on shop page and be directed on the product page, then, you can notice that the product image doesn’t match the selected color. Please take a look again at the screenshots of my first post.

Thanks,

Regards

Hakik Zaman

Hi Eric,

Sorry for the inconvenience. The issue is coming from your theme “Blocksy”.

As far as I know, blocksy theme changes WooCommerce default gallery structure (/code).

A possible solution:

Please disable their gallery and enable the default gallery of WooCommerce.

If they have no visual option to do that, please contact the theme development team and ask them to enable it for you.

Thank You

Eric Diep

Hi,

Ok, I replaced Blocksy gallery with Woocommerce’s default gallery. Now, Variation swatches plugin seems to work properly. But Gallery plugin still has some issues. I added images in gallery for some color attributes, as you can see on these screenshots :

https://ibb.co/FDWsph1
https://ibb.co/dp9PC0d
https://ibb.co/ZVgYKkb

But unexpectedly, on frontend, only images related to the first color attribute are showing, as you can see on the following screenshots :

https://ibb.co/f8nhCkY
https://ibb.co/khPsxs1
https://ibb.co/GH8dFyY

Regards

Eric Diep

Hi,

Update : The variations images are now showing on frontend. So, it seems that gallery images tend to take time to appear on frontend. In that case, it took about 2 days. Clearing cache can sometimes solve the issue but not always.

Also, some gallery images appear smaller than the others although the original images all have same dimensions.

Screenshots here:

https://ibb.co/y8Q9qB0
https://ibb.co/wrbTbxC

https://ibb.co/FwPGR5g

 

Regards

Hakik Zaman

Hi Eric,

Can you please give us an exact link to check it for you?

Hope to hear from you soon!

Thank You

Eric Diep

Hi,

Only 2 products are enabled on the website, so you can easily check them. But here are some links :

On this one, you can see that the second thumbnail is maller than the others :

https://f574-6f6561ac5751.wptiger.fr/shop/collection-actuelle/pantalons/pantalon-test/?attribute_pa_couleur=19-fuchsia

Regarding the second product (Pantalon Test 2), if you select any color from the shop page, you will see that for each color, the first thumbnail is maller than the others. Here are 2 links but it’s the same issue for every color :

https://f574-6f6561ac5751.wptiger.fr/shop/collection-actuelle/pantalons/pantalon-test-copie/?attribute_pa_couleur=19-beige

https://f574-6f6561ac5751.wptiger.fr/shop/collection-actuelle/pantalons/pantalon-test-copie/?attribute_pa_couleur=19-ciel

Also, here’s a short screencast just as an example:

https://www.loom.com/share/b5dfbb8a51f741bd9abe3618e4bec931

If you wish, you can add a new product as a test and see how the gallery images are showing.

Regards

Eric Diep

Hi,

Thank you for the suggestions but the issue still persists even after deactivating the Real Media Library and regenerating thumbnails. Plus, I have noticed that the website is quite slow with the swatches plugin. When the swatches plugin is not enabled, the website is much faster.

Regards

Hakik Zaman

Hi Eric,

Please try the below code using Code Snippets plugin or inside your child theme’s functions.php
if ( ! function_exists( 'wvs_support' ) ) {
function wvs_support(){
remove_filter( 'pre_update_option_woocommerce_thumbnail_image_width', 'wvs_clear_transient' );
remove_filter( 'pre_update_option_woocommerce_thumbnail_cropping', 'wvs_clear_transient' );
}
add_action('admin_init', 'wvs_support');
}

Then try to regenerate the thumbnail again and let me know whether it resolves your issue or not.

Plus, I have noticed that the website is quite slow with the swatches plugin.

How many products do you display on the first load? We recommend max 15 products on the first load.

Thank You