Fix conflict issue in email nofitication when showing product images on Woocommerce Thank you page

📍 Issue

Working one some Woocommerce projects make me realize that, for the default layout, Woocommerce don’t even show any product images on checkout, thankyou page and my account orders. I think it will make customer confused to revise their cart before checking out or after they finished the order.

🙄 The current solution

I often use this code to display images on thank you page:

/**
 * Show Product Image in Thankyou and My Account View Order v1.1
 */

add_filter('woocommerce_order_item_name', 'dc_product_image_on_thankyou_myacount', 10, 3);
function dc_product_image_on_thankyou_myacount($name, $item, $visible){
	if(!is_order_received_page() && !is_account_page()){
		return $name;
	}
	
	// update my $image_html here
	
	return $image_html . '<span>' . $name . '</span>';
}

In our company, the front-end dev ask to use a background images <div> with an image tag inside, so they can style the product image easily.

🙌 How I improve the code

This week, a customer found that when they received the admin new order email notification, they saw that product images still show in emails which broke the layout. The issue happened.

Because in email notifications, there is no styling added, so when the product images added, it always makes the layout be broken (with some big and un-styled images).

I found that in Woocommerce, email notifications will use the same hook woocommerce_order_item_name to display order item. This is the only hook I can use since I don’t want to modify many templates, override templates can caused issues when we upgrade Woocommerce.

In Woocommerce plugin code – /woocommerce/templates/emails/email-order-items.php – the hook will be called something like this:

// Product name.
echo wp_kses_post( apply_filters( 'woocommerce_order_item_name', $item->get_name(), $item, false ) );

I realized that I can use the final parameter $visible to check if the order item is in thankyou page or it’s in email content. (But I think it’s a temporary solution since I can’t find any hint for email content in this hook). The $visible parameter is always false in email content, so I updated my code to:

That’s it 🥳