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

Product Archive page Swatches not changing product thumbnail images

Nick Selvaggio

Hi guys,

We have an archive-product.php template which we are trying to add swatches to. If we execute the `woocommerce_after_shop_loop_item` action we are able to render the swatches in the location we need. The problem is all the settings for what should happen when a user clicks or hovers on the swatch does not work. For example, we want the product thumbnail image to change when a user hovers over the swatch.

I suspect we don’t have all the JS on the page we need or there is some element blocking the request from firing. Below is a snippet of our product loop on the archive page:

Thanks

 

Hakik Zaman

Hi Nick,

Thanks for reaching out to us. I found several Warnings and Errors on your site. Please resolve them to avoid any unexpected issues.

Could you update your free and premium version of the WooCommerce Variation Swatches plugin?

The current version of Swatches plugins is the following.

Variation Swatches for WooCoommerce – Version 2.1.2

Variation Swatches for WooCommerce Pro – Version 2.1.4

Please make sure you are using the same version. Then let me know if the reported issue has been fixed or not in this latest update.

Hope to hear from you soon.

Thank You

Nick Selvaggio

Hi Hakik,

Thank you for the reply. We went ahead and made sure we are running the version you specified. We also cleaned up some of the warnings you where seeing.

We are unfortunately still seeing the same issue.

Any ideas?

Thanks,

Nick

Hakik Zaman

Hi Nick,

From my inspection, you are using a custom theme, and the theme was not developed following the WordPress standard.

You have enqueued scripts several times where it should be kept inside one function. Also, I found you are using an external jQuery source- https://paste.pics/S42C6

jQuery is a default library of WordPress Core. Please check here the default scripts of WordPress. So, you shouldn’t enqueue it from the external source.

Please load the scripts on the footer. It is not recommended to print them on the header.

Our plugin is dependent on jQuery and other default scripts of WordPress.

Note: It is beyond our support scope when you are using a custom theme. Because it is difficult for us to check individual custom themes.

Thank You

Nick Selvaggio

Thanks Hakik,

Yes this is a custom theme that has been around for some time. Unfortunately we do need to integrate this functionality into what we have. Do you guys have any documentation on using this plugin with a custom theme? Specifically if there are any document structure, classes / ids, and/or scripts we need to include on the page to work?

We’ll also try to clean up some of the enqueues on our end. That said, do you have any general best practices for integrating this plugin into a custom theme?

Thank you!

Nick

Hakik Zaman

Hi Nick,

Unfortunately, we have no documentation regarding a custom theme.

You can follow my last reply as a guideline. Best practices can be found here- https://developer.wordpress.org/themes/basics/

Please follow any default theme from the WordPress theme repo and follow their code.

You can also generate a theme from here- https://underscores.me/

Then check the structure to understand the standard of a theme.

Thank You

Nick Selvaggio

Thanks Hakik,

We were able to take apart our theme a bit more to figure out what the issue was. We were definitely not calling all the correct pieces of the loop. Starting from the base woocommerce template helped.

I appreciate your help here.

I think this can be closed.

Golam Kibria

Hi Nick,

We get excited & honored when you use our plugin on your site.

If you found my support helpful, could you leave your valuable review here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5
It would be nice if you mentioned your favorite feature in the review 🙂

Your rating keeps us inspired 🎉️

Thanks a lot & have a great day