How to Display the Product Image in WooCommerce Email Notifications?

Email notifications allow store owners to communicate with customers and provide status updates apart from other things. You may want to customize the WooCommerce emails to include some extra elements such as product images, which can make them visually appealing and informative.

In this post, we’ll guide you through the process of adding product images to WooCommerce email notifications using code snippets.

Where to Add Custom Code in WooCommerce?

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Solution: Displaying the Product Image in WooCommerce Email Notifications

Imagine you run an online clothing store that sells different kinds of clothes. To provide a visual confirmation of the products ordered by your customers and to increase customer satisfaction, you want to display the product image in the order confirmation email. You can use the code snippet below to show the product image along with its link.

add_filter( 'woocommerce_email_order_items_args', 'ts_order_with_product_images', 10 );
 
function ts_order_with_product_images( $args ) {
   $args['show_image'] = true;
   $args['image_size'] = array( 100, 100 );
   return $args;
}

add_filter( 'woocommerce_order_item_name', 'ts_add_email_order_item_permalink', 10, 2 ); // Product name
function ts_add_email_order_item_permalink( $output_html, $item, $bool = false ) {
    // Only email notifications
    if( is_wc_endpoint_url() )
        return $output_html;

    $product   = $item->get_product();

    return '<a href="'.esc_url( $product->get_permalink() ).'">' . $output_html . '</a>';
}

Output

In the below output, you will receive email notifications that will display the product image, product link, and a call to action to review the product.

Reduce Abandoned Cart Rate

Wondering WHY the customer left the cart in the middle and HOW to bring them back?

Abandoned Cart Pro helps you send periodic reminders and personalized offers via email, text, & messenger to win back your abandoned cart users.

Learn More

Code Explanation

The above code snippet is used to add product images and links to WooCommerce email notifications. It works by adding two filters i.e. woocommerce_email_order_items_args and woocommerce_order_item_name.

Here is the explanation of the code:-

1. Adding a Filter for WooCommerce Email Order Items

This line of code adds a filter to modify the arguments passed to the woocommerce_email_order_items function. When an order email is generated in WooCommerce, this filter allows us to customize the order items in the email.

2. Custom Function to Modify Order Item Arguments

This function ts_order_with_product_images is hooked into the woocommerce_email_order_items_args filter. It takes the default arguments for the order items in the email and adds a new key-value pair to the $args array. Specifically, it sets show_image to true. This indicates that product images should be displayed in the email.

3. Adding Filter for WooCommerce Order Item

This line of code adds a filter to modify the output of the order item name in WooCommerce emails. It targets the woocommerce_order_item_name filter hook.

4. Custom Function to Add Permalink to Order Item Name

Inside the function:

• It first checks if the current page is not a WooCommerce endpoint URL. If it is, it returns the original $output_html unchanged. This ensures that the modification only applies to email notifications, not to other WooCommerce pages.
• It then retrieves the product object associated with the ordered item using $item->get_product().
• Finally, it wraps the original $output_html (which is the order item name) in a <a> tag with the product’s permalink as the href attribute. This effectively turns the order item name into a clickable link to the product.

Conclusion

Apart from adding product images to the WooCommerce customer notification emails, the above code snippet also makes the order item names clickable & links to the respective product pages when viewing email notifications.

You can also customize WooCommerce order email templates if you need some advanced changes in the emails.

Let us know the usefulness of the code snippet in the comment sections below.