Skip to content
geekerhub

How to Display Product Images in WooCommerce Order Emails

By ali 4 min read

Display product images in WooCommerce order emails using PHP

WooCommerce order emails contain useful information about purchased products, including product names, quantities, prices, and order totals. You can also display product images in these emails to make order details easier for customers and store administrators to recognize.

WooCommerce provides email template hooks that allow developers to customize how order items are displayed. You can use these hooks to add product thumbnails without directly editing WooCommerce core files.

Display Product Images in WooCommerce Order Emails

One way to customize product images in order emails is to use the woocommerce_email_order_items_args filter. This filter allows you to enable product images in the order items table.

Add the following code to your child theme’s functions.php file or a custom plugin:

“`html

How to Display Product Images in WooCommerce Order Emails

WooCommerce order emails provide customers and store administrators with important order information, including product names, quantities, prices, and order totals. You can make these emails more useful by displaying product images alongside the purchased items.

WooCommerce provides hooks and filters that allow developers to customize email content without modifying the plugin’s core files. In this tutorial, we will use a WooCommerce filter to display product thumbnails in order emails and control their size.

Display Product Images in WooCommerce Order Emails

WooCommerce uses the woocommerce_email_order_items_args filter to pass display settings to the order items email template.

One of the arguments is show_image. Setting it to true enables product images in the order items table.

Add the following code to your child theme’s functions.php file or a custom plugin:

<?php

/**
 * Enable product images in WooCommerce order emails.
 */
function geekerhub_show_product_images_in_emails( $args ) {

    $args['show_image'] = true;

    // Set product thumbnail dimensions.
    $args['image_size'] = array( 64, 64 );

    return $args;
}

add_filter(
    'woocommerce_email_order_items_args',
    'geekerhub_show_product_images_in_emails'
);

This code enables product images in the WooCommerce order items table and sets the requested image dimensions to 64 by 64 pixels.

WooCommerce retrieves the product image from the product associated with each order item. You do not need to manually loop through order items or generate image URLs for this approach.

How Does the Code Work?

Let’s understand the two arguments used in the snippet.

1. Enable Product Images

$args['show_image']= true;

This tells WooCommerce to display product thumbnails in the order items section of the email template.

If you want to hide the images again, set the value to false.

2. Set the Image Size

$args['image_size']= array(64, 64);

This sets the requested image dimensions to 64 by 64 pixels. You can change these values according to your email layout.

For example, to use a 100 by 100 pixel image, change the argument to:

$args['image_size']= array(100, 100);

Alternative: Customize the Product Image HTML

If you want to change the product image HTML rather than simply enabling thumbnails, WooCommerce provides the woocommerce_order_item_thumbnail filter.

You can use it to customize the image markup displayed in the order items table.

<?php

/**
 * Customize product thumbnail HTML in order emails.
 */
function geekerhub_customize_email_product_thumbnail( $image, $item ) {

    $product = $item->get_product();

    if ( ! $product || ! $product->get_image_id() ) {
        return $image;
    }

    return $product->get_image(
        array( 80, 80 ),
        array(
            'style' => 'width:80px;height:auto;',
        )
    );
}

add_filter(
    'woocommerce_order_item_thumbnail',
    'geekerhub_customize_email_product_thumbnail',
    10,
    2
);

This example checks whether the order item has an associated product and image before generating the thumbnail HTML. If the product or image is unavailable, it keeps the original output.

Do You Need to Edit the WooCommerce Email Template?

No. For the basic requirement of displaying product images, using the woocommerce_email_order_items_args filter is simpler than overriding a WooCommerce template.

If you need more extensive changes to the email layout, you can override the relevant template in your child theme. The order items template is located at:

wp- content/ plugins/ woocommerce/ templates/ emails/ email- order- items. php

Copy it to the corresponding directory in your child theme:

wp- content/ themes/ your- child- theme/ woocommerce/ emails/ email- order- items. php

Template overrides need maintenance because WooCommerce may update its email templates. Check the template version and compatibility when updating WooCommerce. You can read the official WooCommerce template structure documentation before making template changes.

Important Things to Consider

  • HTML emails: Product images are displayed in HTML emails. Plain-text emails cannot display image markup.
  • Product images: Make sure products have featured images assigned in WooCommerce.
  • Image dimensions: Choose dimensions that fit your email layout and avoid unnecessarily large images.
  • Email compatibility: Different email clients may display images differently. Test the email in common email applications.
  • Template compatibility: If you use a custom email template or email customization plugin, check whether it overrides the default order items output.

If you are customizing WooCommerce email notifications for different order types, you may also find our guide on targeting WooCommerce email notifications by email ID useful.

Conclusion

You can display product images in WooCommerce order emails without editing the core WooCommerce files. The woocommerce_email_order_items_args filter allows you to enable product thumbnails and specify their dimensions.

If you need more control over the image markup, use the woocommerce_order_item_thumbnail filter. Always send test emails after making changes to confirm that product images display correctly across your supported email clients.

Related guides