woocommerce issues

  • Resolved kubiq

    (@kubiq)


    6 years, 4 months ago

    Hi,
    thanks for great plugin, but it’s not working with woocommerce.

    When I set custom size for main image or gallery images then it will load always full image instead…

    I also tried to use .skip-lazy

    add_filter( 'woocommerce_gallery_image_html_attachment_image_params', 'nolazy_woo_images', 10, 4 );
function nolazy_woo_images( $atts, $attachment_id, $image_size, $main_image ){
	$atts['class'] .= ' skip-lazy';
	return $atts;
}

    When I deactivate your plugin then correct image is loaded.
    eg. correct one is
    https://XXX/wp-content/uploads/2020/01/cheese-1-732x514.jpg
    but your plugin ignore .skip-lazy and load full image
    https://XXX/wp-content/uploads/2020/01/cheese-1.jpg

    Html from source code (ctrl+u) is same, but Inspect element (F12) is different:
    with A3 lazy:
    <img width="732" height="514" src="https://XXX/wp-content/uploads/2020/01/cheese-1.jpg" class="wp-post-image skip-lazy lazy-loaded" alt="" title="cheese-1" data-caption="" data-src="https://XXX/wp-content/uploads/2020/01/cheese-1.jpg" data-large_image="https://XXX/wp-content/uploads/2020/01/cheese-1.jpg" data-large_image_width="780" data-large_image_height="818" draggable="false">
    without A3 lazy:
    <img width="732" height="514" src="https://XXX/wp-content/uploads/2020/01/cheese-1-732x514.jpg" class="wp-post-image skip-lazy" alt="" title="cheese-1" data-caption="" data-src="https://XXX/wp-content/uploads/2020/01/cheese-1.jpg" data-large_image="https://XXX/wp-content/uploads/2020/01/cheese-1.jpg" data-large_image_width="780" data-large_image_height="818" draggable="false">

    Can you fix this please? It’s probably because WOO use data-src attribute by default?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Steve Truman

    (@a3rev)

    6 years, 4 months ago

    @kubiq

    Have tried to replicate the issue that you are seeing – but cannot.

    when you say

    When I set custom size for main image or gallery images

    Are you doing that via the WooCommerce > Product Images menu on the customizer?

    That is what we are testing and it is the images created there that a3 Lazy Load is loading in the default WooCommerce Gallery. Are you using the default product gallery?

    Thread Starter kubiq

    (@kubiq)

    6 years, 4 months ago

    I use custom size of image, because by default you can not crop image, so this is my code

    add_filter( 'woocommerce_get_image_size_single', 'crop_main_product_image' );
add_filter( 'woocommerce_get_image_size_shop_single', 'crop_main_product_image' );
add_filter( 'woocommerce_get_image_size_woocommerce_single', 'crop_main_product_image' );
function crop_main_product_image( $size ){
	$size['width'] = 732;
	$size['height'] = 514;
	$size['crop'] = 1;
	return $size;
}

    But the real problem is, that even if I put there .skip-lazy class, it still lazy load these images:

    add_filter( 'woocommerce_gallery_image_html_attachment_image_params', 'nolazy_woo_images', 10, 4 );
function nolazy_woo_images( $atts, $attachment_id, $image_size, $main_image ){
	$atts['class'] .= ' skip-lazy ';
	return $atts;
}

    I’ve figured it out with this code and now lazy load correct image:

    add_filter( 'woocommerce_gallery_image_html_attachment_image_params', 'fixlazy_woo_images', 10, 4 );
function fixlazy_woo_images( $atts, $attachment_id, $image_size, $main_image ){
	$img = wp_get_attachment_image_src( $attachment_id, $image_size );
	$atts['data-src'] = $img[0];
	return $atts;
}

    But the real problem is that I’m not able to disable lazy loading as skip-lazy class is ignored here. I think that this class should have priority, but it looks like you just select all images with data-src and ignore if they have this class.

    Plugin Author Steve Truman

    (@a3rev)

    6 years, 4 months ago

    @kubiq

    Your custom code is causing a conflict with zoom slider of WC

    You have put data-src into slider, the zoom script does not use data-src

    a3 Lazy Load uses data-src attribute to replace to src attribute when the image is in the viewport

    Have tested with your code – set data-src to false with this custom code and it will work for you

    add_filter( 'woocommerce_gallery_image_html_attachment_image_params', 'fixlazy_woo_images', 10, 4 );
function fixlazy_woo_images( $atts, $attachment_id, $image_size, $main_image ){
	$atts['data-src'] = false;
	return $atts;
}

    That works for me

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘woocommerce issues’ is closed to new replies.