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

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

Eric Diep

Hi,

Thank you for your reply. After testing the code snippet, I noticed that the thumbnails of the existing products were still messed up. But then, I created new products and there were no issue any more (except for 1 or 2 products). So, I deactivated the code snippet to see how it would be with new products, and I got the same results. I think the issue tends to occur with products that have more than 10 images in the product gallery.

Also, what is strange is that the thumbnail issue may be showing differently according to the browsers. For example, a product may have an issue with one thumbnail on Firefox but on Chrome the issue would be with another thumbnail. It also happens that a thumbnail issue is visible with a browser but not with another browser. And in all cases, cache is cleared.

Regarding the slow page loading, as you can see on the following screencast, I have only 5 products visible on the first load and yet, it took more than 1 minute for the color attributes to be loaded. In fact, page loading is very slow.

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

 

Regards

Hakik Zaman

Hi Eric,

We are working on Swatches Version 2. Do you have a staging site?

If you have I can install version 2 on your staging.

Then you can test it in your environment, to understand if it resolves your reported issues or not.

Please let me know your thought.

Thank You

Eric Diep

Hi Hakik,

Yes, please install the new version of the plugin. You can find the private data of my staging site in this ticket.

Thank you,

Regards

Hakik Zaman

Hi Eric,

I have installed the Swatches Version 2 on your site.

Please test it and let us know your thought.

Thank You

Hakik Zaman

Hi Eric,

We have run several tests and found issues coming from “Blocksy”.

In previous replies, you mentioned you have enabled default Gallery to get our gallery to work.

But still, “Blocksy” pushes data and overrides our plugin data.

It takes time to load Blocksy data and that’s why it is taking time to load.

For a test, you can temporarily deactivate “Blocksy” theme and companion plugin using the Health Check plugin.

I have already contacted the development team and asked them to make it compatible. They confirmed to me it can be fixed by Blocksy theme.

Thank You

Eric Diep

Hi Hakik,

Thank you. I have contacted the theme support, now I’m waiting for their answer.

Meanwhile, I have a question regarding the Gallery plugin :

Let’s say a product has combinations of colors and sizes. What I try to achieve: On the product page, when customer select a color (combined with any size), there should be some gallery images associated to that color.

In order to achieve that configuration, I have to add gallery images for each combination, right? So, for example, I will add images for color RED-size XS, color RED-size S, color RED-size M, color RED-size L, etc. And the same goes for each combination of color/size. I guess I can’t just add gallery images for one combination because if customer select another combination, they won’t see gallery images.

The problem is every product in my store has many colors and sizes, so it would be very long and tedious to add variation gallery images for every combination. Is there a better solution for that?

Thanks,

Regards

Hakik Zaman

Hi Eric,

Let’s say a product has combinations of colors and sizes. What I try to achieve: On the product page, when customer select a color (combined with any size), there should be some gallery images associated to that color.

Do want something like this? If so, please check this tutorial to achieve this.

Thank You

Eric Diep

Hi Hakik,

No, that’s not what I want. For demonstration purpose, I made some screencasts. As you can see on this one (https://www.loom.com/share/f35cce0dadef4aefb066c95ebd1d0d92), in backend, I added gallery images for 2 combinations (color Fuchsia-size 36, and color Fuchsia-size 40). I deliberately skipped the combination Fuchsia-38.

On this screencast ( https://www.loom.com/share/f93ed0952a6c42029bc61cbcdce69060), you can see a difference in the way gallery images are displaying on frontend for the above mentioned combinations.

As you can see, for the combinations Fuchsia-36 and Fuchsia-40, only related gallery images are displaying while for combination Fuchsia-38 all gallery images are displaying.

So, taking the Fuchsia color example, if I want the gallery to display only Fuchsia  related images when customer select Fuchsia color with any size, I have to add the same gallery images for all of the Fuchsia combinations, like shown in this screencast, which is not convenient at all :  https://www.loom.com/share/1efb647fcda646549119023aee401c26

But apart from being time-consuming and tedious, wouldn’t that lead to optimization and performance issues ?

I hope my explanations make sense.

Thank you,

Regards

Eric Diep

Hi Hakik,

Thank you, I’m really happy to know there’s another setup to achieve what I want. If that was explained in the tutorial of your previous reply, then I’m sorry that I failed to understand.

Now, back to the main issue : The theme developer managed to fix the slow page loading issue. However, sometimes, for some reason, the gallery image display looks messed up, as you can see on this screenshot : https://ibb.co/0j8xhYh

It’s hard to figure out the cause because the issue can occur once and then disappear, and later on, be back again. And that can affect any product. But according to the theme developer, it’s not related to the theme.

Regards

Hakik Zaman

Hi Eric,

I have tried to reproduce that issue by visiting your site. Unfortunately, I am not getting the issue.

Maybe it is a caching issue. Please clear your browser cache, also if your server-side cache is enabled also clear that cache too.

Thank You

Eric Diep

Hi Hakik,

Thank you. I always clear browser cache when I perform tests and my server cache is never activated. But the issue seems to occur randomly, which makes it hard to reproduce. Anyway, after checking every product and every variation one by one today, I found a product that had the issue, so I made a screencast of it: https://www.loom.com/share/aeac1c142dd445a6b2c1e0259b177eeb

You can see that, on the first load, there is something wrong with the gallery images associated with the color “kaki”, but on the second load, all gallery images look good.

Well, for now, I will leave it there and use the plugin on my production website and see what happens. Hopefully, there won’t be any issue.

Another question : Can you please tell me the meta key of the gallery plugin?

Thank you,

Regards

Hakik Zaman

Hi Eric,

We will definitely try to resolve that if we can reproduce the issue.

Sure, the meta of the Gallery plugin is-  woo_variation_gallery_images

Thanks

Eric Diep

Hi Hakik,

Thank you for your reply. I will give it a try on my production website and if I have any news from my side, I will update you. By the way, is the version 2 of the plugin already released? I haven’t received any notification for an update in my admin area.

Kind regards

Hakik Zaman

Hi Eric,

I will give it a try on my production website and if I have any news from my side

Sure, please test it from your side and let us know if you found any issues with the latest version.

By the way, is the version 2 of the plugin already released?

No, it is not released yet. We are still testing this version with some themes and plugins.

But, hopefully, it will be released this week.

Thank You

Eric Diep

Hi Hakik,

Ok, thank you. Then, I will wait for the new version to be released before testing it on my production website.

Kind regards

Hakik Zaman

Hi Eric,

We have released the Swatches Version 2.0.

Now you can test it on your production site.

Thank You

Eric Diep

Hi Hakik,

Thank you for the update. After installing the new version of the plugin on my live website, I’m sorry to request your assistance again. As you can see on the following screencast, on shop page, images don’t display accordingly when variations are hovered over, and tooltip texts don’t show like they should :

https://www.loom.com/share/9e5994bd2513456eb5261e8945fc18fc

I don’t know what may be the cause since my production website is similar to the staging website, but on the staging website there are no such issues. I have seen in the support section that some users have also encountered those issues. I added my production website credentials in case you need to check.

Thank you,

Kind regards

Hakik Zaman

Hi Eric,

Can you please check your production site?

Please let me know after checking.

Thank You

Eric Diep

Hi Hakik,

Thank you for your help! Did you change any file to fix the issues?

Now, as far as the option « single attribute on archive page » is concerned, it works well. But, if all attributes are visible on archive page and customer add item to cart directly from archive page, I notice the following issues:

After selecting attributes and adding item to cart, it’s not possible to add another item unless you refresh the page.
If same items with different attributes are added to cart from archive page, the attributes are not registered.

Illustration of the issues here : https://www.loom.com/share/1ab316b4f6d34031bdf2aa4e727c4b79

And here is a screencast showing item added to cart from product page, so that you can compare : https://www.loom.com/share/fc427c977c3d4d6bb7f266b297eab848

Thank you,

Kind regards

Hakik Zaman

Hi Eric,

We have changed our Add To Cart behavior and tried to keep its behavior as WooCommerce default cart behavior.

“Blocksy theme” has changed it and hidden the button after successfully carted. You can place the below code at Appearance > Customize > Additional CSS

.products .add_to_cart_button.added {
--display: var(--display, inline-flex);
}

Here is the proof.

Thank You

Eric Diep

Hi Hakik,

Thank you. Now, it’s possible to add to cart more than 1 item. However, issue 2) still remains: Attributes of items don’t appear in cart. It’s troublesome mainly when it comes to variable products. Plus, if customer add to cart same product in different variations and later want to delete one variation, it’s not possible for them to do that, as you can see in this screencast :

https://www.loom.com/share/09260b04547249e680181147cec96fca

Thank you,

Kind regards

Hakik Zaman

Hi Eric,

We are aware of this issue. I have already reported about “specific variation cart issue from the archive page”.

I hope a new release will come soon with a fix. Please be patient with us.

I will notify you once I get some messages from the development team.

Thanks in advance for your patience.

Eric Diep

Hi Hakik,

Thank you. Then, I will wait for the next update. Hopefully, it won’t take too long to be released. By the way, may I know how you fixed the issue I reported 5 days ago regarding images that don’t display accordingly to the selected variation on shop page? Did you change any code for that ?

Thank you,

Kind regards

Eric Diep

Hi Hakik,

 

Did you try the latest version 2.0.2?

In fact, I updated the last version, 2.0.3, and it works wonderfully now, except that there is still the image issue I have already reported, as you can see on this screenshot: https://ibb.co/Vx8bRpF

But I think there is no solution at this point since the issue appears randomly, making it very difficult to reproduce.

I just changed the ‘product wrapper’, ‘image selector’ and ‘add to the cart button selector’.

Thank you. Sorry, but what’s the difference between the current selectors and the default ones, because I don’t see any? If I’m not mistaken, those selectors were already set from the start, weren’t they?

 

Thank you,

Kind regards

Hakik Zaman

Hi Eric,

Sorry, but what’s the difference between the current selectors and the default ones, because I don’t see any? If I’m not mistaken, those selectors were already set from the start, weren’t they?

We have changed the wrapper and selector for version 2.0. You were using the previous wrapper and image selector.

Thank You

Eric Diep

Hi Hakik,

 

Ah ok, thank you. Well, I think we are now done with this ticket. 🙂

 

Thank you for all the help you provided,

Kind regards