Make thumbnails replace the main image instead of opening fancybox?

You could try adding the jQuery code to your header.php file inside your theme’s folder like so:

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery(document).on('click','.thumbnails .zoom', function() {
        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x132','');
        jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
        return false;
    });
});
</script>

And be sure to replace the numbers (‘-100×132’) with your own thumbnail sizes.

Hope this helps.

Hi Lucille,

Thanks for the fast reply!

That indeed does work with the lightbox disabled. But if I go into:
Woocommerce -> Settings -> Products Tab -> Enable Lightobx for product images, I find that the lightbox overrides everything and it behaves as before.

The idea is to use the lightbox ONLY for the main product image, so that if customers desire to see it bigger they still can, without being taken to a different page.

Also, I did try several different sizes (starting at 300 x 300 and later 500 x 500) for the thumbnail sizes to replace the number “(‘-100×132”) and they still looked really pixelated. Any thoughts on that?

Thanks again for the help though.

Just to clarify, by the looks of it, it seems as though you would like the thumbnail image (when hovered) to replace the bigger image, and if a user clicks the image, then the lightbox should open. Is this correct?

Is there a URL we can see to help diagnose the issue?

Yes, that is correct.

Try this product page: https://www.zirnworks.com/shop/beaded-pendants/diatom-beaded/

Right now I have lightbox enabled. Let me know whether you’d like me to disable it.

Try adding this code to your header.php file:

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery(document).on('hover','.thumbnails .zoom', function() {
        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-250x250','');
        jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
        return false;
    });
});
</script>

Wow, the hover looks great, and the thumbnails are no longer pixelated! Thanks Lucille.

Looks like I’ll be wanting to make all my oblong photos square, however, given that it changes the position of all the thumbnails when one of those is hovered over. No biggie.

The only issue now is that clicking the main image (after it’s been substituted from hovering over one of the thumbs) shows the product’s “featured image” in the lightbox, no matter what image was actually displayed there. A little confusing.

It’s something I can live with. Though if I can make the light box start with the actual image clicked, it would be awesome. (But this still worlds better than what I had before!)

Yikes! When I try to pin one of my product images using the “pin it” plugin, I get the error:

“Parameter ‘browser_extension_tracking_id was not numeric (was 7kdgb9jZrTte)”

I have not gotten this before. I’m really hoping to use Pinterest for my marketing so this may be a dealbreaker… I will revert to the old approach and see if this new modification is causing it. ??

EDIT: It appears that this new code was NOT causing the issue.

Hi Zirn,

I’m not seeing any errors when clicking on the “Pin It” button. However, I am not logged in to Pinterest. Did you solve the issue or was the error only showing if you were logged in?

Hey Lucille,

When you clicked the “Pin It” button, was it outside the image, or inside it?
The outside one is the Chrome extension, and that seems to work fine. Right click -> pin it also works.
The inside one is my wordpress plugin, so that’s the one in error. I’m on the hunt for one to replace it (or a way to fix it)

Ideally I’d be able to pin directly from lightbox as well as have the right-click functionality enabled… but intend to research that more and possibly ask in a new thread if stuck, so others can easily find the solution in the future.
(But if you have any leads on that one, I’m open. :P)

It’s the one above the image (as you hover over the image). I was viewing your website on Firefox.

Have you tried either of the below plugins:

Pinterest Hover Pin It Button

Pinterest Pin It Button On Image Hover And Post

The second link “Image Hover And Post” was the one giving me the error. I did try uninstalling and reinstalling, but no luck.

I tried the other one, as well as a couple others, and it didn’t seem to work (didn’t see the button). I will take a crack at this later, but I need to leave now.

Thanks again for your help!

You’re welcome ??

Good luck!

Hello,

I’ve tried these codes in my custom code editor in Javascript and nothing is working, i’ve disabled the light box and enabled, acts like the code isn’t there, can anyone help me please?

Hi uniqueox,

Could you kindly share a link to your website so we can further investigate?

Thank you.