Woo hover zoom not working

I think your issue is caused by the plugin: a3 Lazy Load.

You weren’t seeing the zoomed image at first because it wasn’t being loaded, by deactivating that plugin the zoom seemed to work fine.

Please test and if something is still not working let me know.

Hey, Ben.

Actually, the zoom was working because I tweaked the Woo JS file to always display the zoom. I did this for tests purpose, and I believe it was cached, so you probably saw the zoom working there because of it. I reuploaded the original file and purged caches. You should check now that it’s not zooming.

Apparently, this is not related to a3 Lazy Load plugin, like the iPad issue was.

ok, makes senses, so back to you want images that are only 600px width to zoom in the little they can. I”ll look into adding a hack for this with woocommerce because of how woocommerce uses the container div to get the width.

As a temp option, you can use a standard woocommerce layout with your thumbnails below the main image in your theme options > product settings and then the container would be correct.

But I must say, it seems like using a larger image for your products would be a whole lot better so the zoom actually showed details of the dresses.

Ben

ok, I’ve written a little javascript hack for you, I don’t think I’m going to add this to the theme because it just doesn’t make sense to add, most people would be using larger images with zoom enabled.

<script>
jQuery(document).ready(function ($) {
if( $( '.kt-product-style-large-image .woocommerce-product-gallery' ).length ) {
			var container_width = $( '.woocommerce-product-gallery' ).width();
			var images = $( '.woocommerce-product-gallery' ).find( '.woocommerce-product-gallery__image' );
			$( images  ).each( function( index, target ) {
				var image = $( target ).find( 'img' );
				if ( image.data( 'large_image_width' ) < container_width && (container_width * 0.8) <  image.data( 'large_image_width' ) ) {
					var start_width = image.data( 'large_image_width' );
					image.data( 'large_image_width', start_width + (container_width * 0.2) );
				}
			} );
		}
});
</script>

Add that in your header scripts. You can use a plugin like this: https://www.ads-software.com/plugins/header-and-footer-scripts/

Ben

Hey, Ben!
My apologies for the late reply.

Re using larger images: I don’t have larger images at the moment, but I understand it’d be a lot better this way.

The code above worked nicely!

Thank you for the excellent support and amazing theme!

So how do i intergrate this code in my file to the minimum of 300px

This is de code i see:
if ( image.data( ‘large_image_width’ ) > galleryWidth ) {

Hi @khatchik,
Can you please start a new thread and provide a link to your site?
Thanks!

Hannah