Product Variations on Product Category / Shop (Archive) not working

Hi,
I found recently that all products with color variation stop working on Product Category Page and Shop Page.
On Product Page all of them work fine.

When Log In as Admin, sometimes work, sometimes not.
When Log Out, sometimes some of the products work when refreshing the page.

I’ve disable all cache plugins and plugins to test but seems is not a plugin/theme conflict.

Hello,

I’ve checked your site, and I can confirm that the color variation swatches are displaying correctly on both the Product Category and Shop pages.

See Screenshots for clarification:
https://ibb.co/0jmzD0cr
https://ibb.co/p6vg8NgS
https://ibb.co/PsYH7TwV

If the issue still occurs occasionally, it may be related to browser-level caching or server-side caching. I recommend trying in an incognito/private window or clearing your browser cache to confirm.

Best Regards,

Hi Aizaz,
Thanks for the answer.

It’s not about the variations display, it’s about the funcionality of the variation.
Color variation on Product Category / Shop do not change when click it, so there is no way to see the different color products. It works on product page only.

As I said sometimes when refreshing page, the variation can be clicked.
Normal behaviour as it used to be before is the GIF first image stops and shows the color once clicked the color variation.

Hello,

I’ve checked again, and the color variations are changing fine after clicking. The images update as expected when selecting a variation.

See video for clarification: https://uploadnow.io/f/HjGnLZK

If you’re still experiencing the issue intermittently, it could be related to browser caching or server-side caching.

On some products, the images are not changing on both single product pages and archive pages.

Please edit Product Attribute and enable Change product image on the attribute click option: https://prnt.sc/OFlxnJhoLRbm

Then, edit the terms of the attribute and enable the color Swatch: https://prnt.sc/ryIZHQaYZSkQ

Enable the Additional variations images option in Theme Settings > Shop > Variable products: https://take.ms/aRzS2 and upload appropriate images to the variations: https://take.ms/MiDHc. Then, the images will change by clicking on the swatches.

You can read more here https://xtemos.com/docs-topic/variable-products-and-swatches/ and https://xtemos.com/docs-topic/attribute-swatches/

Best Regards,

Thanks a lot Aizaz for taking your time.
Please see my answer on the moderate area.

Hi Aizaz,
Please check the moderator part

Attachments:

You must be logged in to view attached files.

Hello,

Send me access to the admin panel so I can look closer at your settings there.

Looking forward to collaborating with you!

Kind Regards

Hi Luke,
Thanks for getting in touch.
Access to Admin Panel in private area.
Please be mindful as this is our production site!
In case you need to disable any plugins (I did already) let me know beforehand as this website operates 24/7.
Cheers

Attachments:

You must be logged in to view attached files.

Hi Luke,
Did you have time to have a look on the site yet?
Some more tests I’ve been doing so far that maybe will help you to narrow down the source of the issue:

– Changing the products to another product category, the swatch works properly on category page but still not working on Shop Page.
– If using the Product Layout some products with variation do not work (returns a white empty page) – this happens when variations are equal to 4. Seems that less or more works (?)
– There is a “fatal error” trigger with Elementor Ai module related to gallery image (woocommerce – status -logs)
– The product attributes lookup table is still frozen
– The size attribute translation is still missing on WPML taxonomy translation

I share the Admin Panel credentials for Staging Site and Production site on moderators area.

Attachments:

You must be logged in to view attached files.

Hello,

Okay, I see. May I disable 3rd party plugins and enable the parent/default theme for testing?

I look forward to hearing back from you.

Kind Regards

[mudesports]

Hi Luke,
Sure. Please go ahead – you can do it on the Staging Site – I share credentials on the moderators area.

• This reply was modified 3 weeks, 5 days ago by mudesports.

Luke,
I’ve disabled the “Single Product Layout” -> besides the problem of color variation not working on certain product category (running) and the shop page, when the custom single product layout is active, the product page of all products with color variations don’t show any data. Returns a blank page.

Hello,

Navigate to Theme Settings -> Shop -> Variable products -> enable “Quick shop” for variable products option, clear the cache and recheck the issue.

https://prnt.sc/5ZRkWfx2I5qn

Kind Regards

[mudesports]

Hi Luke,
Thanks but I tried this option many times and this is not resolving the problem. The normal function was that when you click on a color variation, the image of the product change with no need of the “Quick Shop” enable.

1- I disable “Quick Shop” and all variable products work – image change on click – on “Activewear” category but not on “Running” category or Shop. Why it works on some categories and not on others? Links on private area.

2- Why If I change the product category from “running” to “activewear” or any other, this same product variable works “category page” but no “shop page”?

3- Why all variable products return a blank page on the product page when a “custom single product page” is enable? No matter “Quick Shop” is enable/disable, this is not solving the single product page issue. Did you check this? We’re unable to use a single product custom page because of this bug/issue. Only works when disabling the “custom layout”.

Could be the number of variations? I see than 4 or more variations seems to trigger the problem. Links and videos attached.

Regards.

** Attached Videos:
Video 1- Running Category and Activewear Category difference in behaviour when clicking the color swatch.
Video 2- Product on “Running Category” – unable to change image when click it.
Video 3- Same Product on “Activewear Category” – image product changing when clicking the color swatch.

• This reply was modified 3 weeks, 4 days ago by mudesports.

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to Theme Settings -> Performance -> JS -> Advanced scripts controls -> set the “Swatches on grid” as Scripts always load – https://prnt.sc/lEuNgCST6TYm , on the staging site I left it enabled so you can recheck the issue.

2. On the staging site, I see that the product layouts are enabled but I cannot see that issue with the blank page, please send some links on which product you see that issue.

Kind Regards

[mudesports]

Hi Luke,
Thanks!

Seems problem is solved! Will do more tests and foremost I’ll check on our production site.

2. It seems like a plugin incompatibility as once I’ve activated all plugins, product single page on variable products return a “blank page” again:
You can go ahead, activate all plugins and check any variable product with more than 4 variations. It will return a blank page.

3. Our production site (url on private area) is too slow. I tried everything but seems not working. I just move it to a Cloud Server hosting but not a big change. 1-2 weeks was super fast and then slow again. Lots of up-and-downs.
Any idea, hint or were to investigate? Happy to share all credentials to check the site.

Regards.

• This reply was modified 3 weeks, 4 days ago by mudesports.

Hi Luke,

I’ve found that the plugin triggering the conflict is the “WPML String Translation” – when activated, all the variable products with equal or more than 4 variations, render a blank page.
You can give a test.

Hello,

2. You need to translate product variations from WooCommerce > WooCommerce Multilingual > Attributes tab and after that, you need to press the Synchronize attributes and update product variations button, please make sure to take a backup of your site first for security reasons.

Here is a doc for more details:
https://wpml.org/documentation/related-projects/woocommerce-multilingual/#variations

https://prnt.sc/LUKvowdsuv9T

3. We have tested your website and found a few problems that you should fix first to speed up your website.

1). Your home page size is 36MB+, which is too much. It may be due to large not optimized images, JS, CSS files, plugins etc. In your case, you have very heavy videos as well – https://prnt.sc/1eCAAk56QDW_

2). Turn off all third-party plugins first and optimize your website. Then, add necessary plugins one by one and check the speed accordingly.

3). Use WP Rocket plugin to optimize your website’s JS, CSS and cache.

4). Your images are very big and not optimized. You need to set proper sizing for all images to reduce your page size https://prnt.sc/Aj6vDOxCnZuO

Kind Regards

Hi Luke,
Thanks

2. I’ve translated all product variations (colors) and synchronize and update all variations but nothing changed. Still a blank page: https://www.mude-sportclubs.com/shop/mens-training-short-with-underpant/
(attached photo with all color attributes and sync done)
I’ve clear browser and website cache.

3. Noted all fixes recommended to improve the web speed.
What about the loading time of the products on “Shop Page” and “Product Category”?? Is this related to product image size? Or can be done something? I check that loading time changes from time to time but normally it takes too long.

Tks & regards

Attachments:

You must be logged in to view attached files.

Hello,

2. Send FTP access to the staging site so we can investigate it deeper.

3. I suggest you do each step from our article to optimize the website – https://xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021/

Kind Regards

Hi Luke,
Site Admin in private area.
Cheers

Hello,

It looks like you sent the access to the website. Here is an article about FTP access – https://www.namecheap.com/support/knowledgebase/article.aspx/9523/205/how-to-create-an-ftp-account/

You can ask your hosting provider how to get the FTP access.

I await your response.

Kind Regards

Hi Luke,
Access to FTP on private

Hello,

Please check the error logs when the layout is enabled to understand the problem in more detail.

Also, please recheck on your end whether the access that you sent is valid – https://monosnap.com/file/mJI4Q6fj1X9YmMrogRRPg8iVFwQCgP

Kind Regards

Hi Luke,

When you talk about error logs, we talk about “woocommerce” log errors? Or wp log errors? Just to be sure if I need to enable the debug option.

About the FTP access: it need to be accessed via SSH protocol. Does it work or should be only FTP?

Anyway, the access details I passed to you were for our production site which I prefer to not be used. Let me know if SSH protocol works and I’ll share the details to access the staging site.

Cheers

Hello,

We need server logs in order to understand why the content is not loading.

It should be only FTP access. Check the article below:

https://www.wpbeginner.com/glossary/ftp/

Thank you for your time.

Kind Regards

Hi Luke,

As our WP installation does not use FTP protocol, I pass you a link (private area) to all Access and Error Logs. Hope can do the work.

Hello,

I have sent the request for access.

Thank you for your time.

Kind Regards

Hi,
Unfortunately as I said, our server is self-managed and cannot be accessed via normal FTP.
It seems that we cannot work with the Custom Single Product Page option if we want the variable products to display correctly.

If you think we can try anything else, please let me know.
Regards

Hello,

Please explain how you connect to the server via SSH, because on our side, we see the timeout error.

Thank you for your patience.

Kind Regards

[Author]

Posts