Product images are not displayed

@kypislona98 Hello, we can test what the PDF is attempting to retrieve, but this should be done on a staging site if the website is currently in production.

In the plugin folder wc-cart-pdf/templates/cart-table.php, add the following line:

echo esc_html( $thumbnail );

After where you see:

$thumbnail = apply_filters(
							'woocommerce_cart_item_thumbnail',
							$_product->get_image(
								'woocommerce_thumbnail',
								array(
									'width'  => 60,
									'height' => 'auto',
								)
							),
							$cart_item,
							$cart_item_key
						);

View post on imgur.com

Then view the output of the PDF and report back what you see here

Now the error is clear. The image is loaded using “lazyload”

<img width="600" height="600" src="https://topservis.beget.tech/wp-content/themes/woodmart/images/lazy.png"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail woodmart-lazy-load woodmart-lazy-fade" alt=""
loading="lazy" width="60" height="auto" srcset="" sizes="(max-width: 600px) 100vw, 600px" data-woodsrc="https://topservis.beget.tech/wp-content/uploads/2021/06/15682_usMheQNaEp-600x600.jpg" datasrcset="https://topservis.beget.tech/wp-content/uploads/2021/06/15682_usMheQNaEp.jpg 600w,
https://topservis.beget.tech/wp-content/uploads/2021/06/15682_usMheQNaEp-100x100.jpg 100w,
https://topservis.beget.tech/wp-content/uploads/2021/06/15682_usMheQNaEp-300x300.jpg 300w,
https://topservis.beget.tech/wp-content/uploads/2021/06/15682_usMheQNaEp-150x150.jpg 150w" />

@kypislona98 That is true, we can try disabling Lazyloading using the following code, or removing thumbnail filters which could also be causing the issue. Try the below in your child theme functions.php file.

function child_wc_cart_pdf_remove_thumbnail_filters() {
	add_filter( 'wp_lazy_loading_enabled', '__return_false' ); // Disable lazyloading

	// Or try removing filters on the thumbnail using one or multiple of the below
	remove_all_filters( 'wp_get_attachment_image_src' );
	remove_all_filters( 'wp_get_attachment_image' );
	remove_all_filters( 'woocommerce_cart_item_thumbnail' );
	remove_all_filters( 'woocommerce_product_get_image' );
}
add_action( 'wc_cart_pdf_before_template', 'child_wc_cart_pdf_remove_thumbnail_filters' );

• This reply was modified 3 years, 3 months ago by David Jensen.

For any one else getting here after trying to disable the Woodmart Lazy loading (which does not respect the wp_lazy_loading_enabled filter, unfortunately), you can do this by calling a dedicated function they created for this woodmart_lazy_loading_deinit():

if ( function_exists( 'woodmart_lazy_loading_deinit' ) ) {
	woodmart_lazy_loading_deinit( true ); // true to "force deinit"
}

if you need to ‘clean up’ after yourself, you can activate it in a similar manner with the woodmart_lazy_loading_init() function:

if ( function_exists( 'woodmart_lazy_loading_init' ) ) {
	woodmart_lazy_loading_init( true ); // true to "force init"
}

They add several filters, but for the product images the relevant one is wp_get_attachment_image_attributes:

function woodmart_lazy_loading_init( $force_init = false ) {
	if ( ( ( ! woodmart_get_opt( 'lazy_loading' ) || is_admin() ) && ! $force_init ) ) {
		return;
	}

	// Used for product categories images for example.
	add_filter('woodmart_attachment', 'woodmart_lazy_attachment_replace', 10, 3);

	// Used for avatar images.
	add_filter( 'get_avatar', 'woodmart_lazy_avatar_image', 10 );

	// Used for instagram images.
	add_filter('woodmart_image', 'woodmart_lazy_image_standard', 10, 1);

	// Images generated by WPBakery functions
	add_filter('vc_wpb_getimagesize', 'woodmart_lazy_image', 10, 3);

	// Products, blog, a lot of other standard wordpress images
	add_filter('wp_get_attachment_image_attributes', 'woodmart_lazy_attributes', 10, 3);

}