Add Product Images to WooCommerce Emails
WooCommerce includes the ability to add your product images to the order items within your shop’s transactional emails, and turning them on is possible via filter. We’ll need to use the woocommerce_email_order_items_table filter to change which data is included in the order items table. This filter lets us change the default values for the items in the “Email Order Items” template so that we can make changes like turning SKUs on or turning on product images. This filter passes in all of the default values for the email order items table. SKUs, purchase notes, images, and download links are all set tofalse
(“off”) by default. WooCommerce conditionally handles turning some of these on itself, such as download links when downloadable access should be granted, but SKUs and images will need to be turned on manually.
Let’s first enable product images within our email order items template. We can do so my taking the data passed into this filter and returning it, but changing the show_image
value to true
instead with this snippet (in a custom plugin or functions.php):
// Edit order items table template defaults | |
function sww_add_wc_order_email_images( $table, $order ) { | |
ob_start(); | |
$template = $plain_text ? 'emails/plain/email-order-items.php' : 'emails/email-order-items.php'; | |
wc_get_template( $template, array( | |
'order' => $order, | |
'items' => $order->get_items(), | |
'show_download_links' => $show_download_links, | |
'show_sku' => $show_sku, | |
'show_purchase_note' => $show_purchase_note, | |
'show_image' => true, | |
'image_size' => $image_size | |
) ); | |
return ob_get_clean(); | |
} | |
add_filter( 'woocommerce_email_order_items_table', 'sww_add_wc_order_email_images', 10, 2 ); |
$image_size
for this value, we can pass in an array of sizes. The first number in the array will be the width, then the second number is the image height (it’s best if you keep the aspect ratio for your product thumbnails, which is probably 1:1).
Let’s change the image size to 150px by 150px instead of the default 32px by 32px. Change:
'image_size' => $image_sizeto
'image_size' => array( 150, 150 )This will give us larger images in the order items table within emails: This can let you show a picture to customers side by side with the product name in emails to confirm the purchase.
Add Product SKUs to WooCommerce Emails
Product SKUs can also be turned on easily within emails using the same snippet. If you enable SKUs within the email order items table, they will display as#sku
(the hash before the SKU will always be shown).
To enable SKUs, you’d change:
'show_sku' => $show_sku,to
'show_sku' => true,When SKUs are enabled, they’re added right after the product name. Notice that I’ve kept images enabled here, but you don’t have to do so — leave the snippet as
'show_image' => $show_image,instead of
'show_image' => true,if you don’t want to show images. As a final note on adding SKUs to emails, I dislike that they’re shown inline with the product name. We can use the woocommerce_order_item_name to adjust the product name and add a line break after it easily:
function sww_edit_order_item_name( $name ) { return $name . '<br />'; } add_filter( 'woocommerce_order_item_name', 'sww_edit_order_item_name' );
Adding Information to WooCommerce Emails
While adding other information to your WooCommerce emails is possible, it requires more advanced customization to do so. These pieces of data are already included in the emails, and are simply turned off by default. Our code snippets turn them on for email order items tables. You can also change the way emails look without changing any of the code around emails byfollowing our tutorial or using the WooCommerce Email Customizer plugin. I wouldn’t recommend changing the'show_download_links'
default, as WooCommerce handles this for you based on your settings (and only includes them with processing and / or completed order emails). However, you could also include purchase notes if desired.Revisions
- September 2, 2015 @ 14:18:15 [Current Revision] by PeterLugg
- September 2, 2015 @ 14:18:15 by PeterLugg
Revision Differences
There are no differences between the September 2, 2015 @ 14:18:15 revision and the current revision. (Maybe only post meta information was changed.)
No comments yet.