I would like the thumbnails underneath the main image on the single product page to replace the main image when they are either clicked or on hover, I prefer hover. Right now the thumbnails just open in their own fancybox. This is a very common feature on most big ecommerce sites and it's weird that it's not an option in woocommerce. Any help will be greatly appreciated.
I have just achieved the effect by my own. I will post it here in case others find this thread:
.replace('-100x132') eliminates the size from url of the image to return the full image and not the thumbnail. Replace it with your own thumbnails sizes.
My solution is based on:
As the original answer already work with string replace, but has to get altered for each and every use case, here's a solution using a fast Regex
This plugin will delete the first occurrence of any 2-4 digits separated by an
Here's the actual plugin. You'll just have to fill in a single bit: The actual selector.
To Do: The only thing that you'll have to do is providing your actual selector (instead of
One possible point where your plugin could hook in, would be to combine this with a filter on
Another, maybe even better would be the
Simply add something like the following to the plugin above:
Server side solution: PHP
Much easier than anything else is to use the following filter - in case it meets your use case.
You can add just call the full size for every post thumbnail and you're fine. Then downsize the image via CSS.
I found this http://www.magictoolbox.com/magiczoomplus/ and it handles what I needed. I just set the zoom to inner so it doesn't open a zoom window and it has thumbnail hover that replaces the main image. Maybe this could help someone with a similar issue.
protected by Community♦ Mar 16 at 1:01
Thank you for your interest in this question.
Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.
Would you like to answer one of these unanswered questions instead?