Wrong variation image on zoom …

I’m having the exact same issue. A fix would be greatly appreciated!

Another note – this has only recently started to happen. Never had this issue last year at all, and I’ve got some products with far more variations than 40.

Could it be since the major Woocommerce 3.0 update?

I ‘ve encountered the same issue and i think i have figured out the cause.

When you have more than 30 variations WC changes the way it fetches them and uses an AJAX call.

30 is the default ‘setting’ so the code the author gave you above has no effect unless you change the number to something bigger than the number of variations your product has (as he suggests in the comment).

This plugin uses the woocommerce_available_variation filter in order modify the variation data and add the variation image so that the frontend code can get it.

That filter is hooked in yith-woocommerce-zoom-magnifier\class.yith-wcmg-frontend.php:48

And that code block is run in the template_redirect action hook which (probably) doesn’t run in an AJAX call.

Until they fix it you can use this to properly modify the data in order for it to work:

function wcmg_fix_ajax_filter_variations( $data, $wc_prod, $variation ) {

	$attachment_id = get_post_thumbnail_id ( version_compare ( WC ()->version, '3.0', '<' ) ? $variation->get_variation_id () : $variation->get_id () );
	$attachment    = wp_get_attachment_image_src ( $attachment_id, 'shop_magnifier' );
	
	$data['image_magnifier'] = $attachment ? current ( $attachment ) : '';
	
	return $data;
}
add_filter ( 'woocommerce_available_variation', 'wcmg_fix_ajax_filter_variations', 20, 3 );

(this ideally goes into your child theme’s functions.php)

• This reply was modified 8 years, 12 months ago by ksere.

Hi, if you want to correct this just change this

zoomImgFix = $(‘.yith_magnifier_zoom_wrap > a > img’).attr(‘src’);
self.zoomDiv = $(‘<div class=”yith_magnifier_zoom_magnifier” />’).css({
left: xPos,
top: yPos,
width: w,
height: h,
‘background-repeat’: ‘no-repeat’,
backgroundImage: ‘url(‘ + zoomImgFix + ‘)’
}).appendTo(appendTo);

to this one

self.zoomDiv = $(‘<div class=”yith_magnifier_zoom_magnifier” />’).css({
left: xPos,
top: yPos,
width: w,
height: h,
‘background-repeat’: ‘no-repeat’,
backgroundImage: ‘url(‘ + $(‘.yith_magnifier_zoom_wrap > a > img’).attr(‘src’) + ‘)’
}).appendTo(appendTo);

on the

plugins/yith-essential-kit-for-woocommerce-1/modules/yith-woocommerce-zoom-magnifier/assets/js

and also on

plugins/yith-essential-kit-for-woocommerce/modules/yith-woocommerce-zoom-magnifier/assets/js

• This reply was modified 8 years, 2 months ago by Rod.