Change the zoom image size

Hi @maheraldous!

You can use the following code:

// Change the image size used for the WooCommerce product gallery image zoom
// 'medium' or 'large' are normally the best options
add_filter( 'woocommerce_gallery_full_size', function( $size ) {
  return 'medium';
} );

You can add this code to your site using the Code snippets plugin.

Some more information on how to correctly add custom code to your site can be found here:

https://rynaldo.com/how-to-add-custom-code-to-your-woocommerce-wordpress-site-the-right-way/

Cheers!

your code is from this page https://docs.woocommerce.com/document/image-sizes-theme-developers/ and it’s do the job here https://prnt.sc/olizhe but what I want the job get done here https://prnt.sc/olj08m in this test site https://wordpress.albadrbakelser.se/produkt/test-could-be-the-last/. This image with red cake is not zomming because it’s small for Woocommerce but if you make the browser windows smaller the zoom will work for the red cake image.

I am developing a test theme by the way so I tried all these https://prnt.sc/olj9a7 but nothing work on what I want. I user this code also in my functions file.

// Remove Woocommerce Specific Style
function albadrbakelser_dequeue_woocommerce_styles( $enqueue_styles ) {
	// unset( $enqueue_styles['woocommerce-general'] );	// Remove the gloss
	// unset( $enqueue_styles['woocommerce-layout'] );		// Remove the layout
	unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the smallscreen optimisation
	return $enqueue_styles;
}
add_filter( 'woocommerce_enqueue_styles', 'albadrbakelser_dequeue_woocommerce_styles' );

Some how I think we share the same lastname Aldous and Aldos or your name just Rynaldos ??

This person https://www.ads-software.com/support/topic/woo-hover-zoom-not-working/ used a theme and he had same problem and he got the solution from theme author but I am the author of my test theme so what should I do.

This code helped him.

<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>

I used this code without the theme class .kt-product-style-large-image and it didn’t work.