Search the site:

Home Blog How to customize WooCommerce Order Emails

How to customize WooCommerce Order Emails

Customizing the WooCommerce email template is a good way to modify the emails based on your store’s design or personalize the transactional emails. WooCommerce provides this functionality with their various email templates. WooCommerce sends emails to the admin & customers at different stages in the order processing cycle.

WooCommerce contains email templates for New Order, Completed order, canceled order, customer invoice, new account, & password reset among other things. You can use WooCommerce’s default templates, but you may want to style the templates according to your theme’s design. Let’s see how we can do that.

Email template settings
Email template settings

There are 3 different ways in which we can change the WooCommerce email templates. Each of the 3 ways allows us to modify different aspect of the email templates. You might need to use any one of the below or a combination of the below methods to make changes to your store’s email templates:

  1. WooCommerce Settings The inbuilt WooCommerce settings can be used to change the styling for the emails like background color, text color, base color, email ‘from’ name, email ‘to’ name. But you cannot make layout changes or changes in the email body with these.
  2. By using different hooks If you just want to add additional content and keep the layout as it is, you can customize using hooks. You can add content in different parts of email based on different hooks.
  3. By overriding the templatesIf you want to change the layout of the email, you will have to override the email templates. By overriding, you can change the HTML of the email templates, or change the default text which appear in the emails.

Let’s dive into each of these methods.

1. WooCommerce Settings

WooCommerce provides a few different settings to customize the default email template. You can find these settings in Dashboard > WooCommerce > Settings > Email. The default email template when admin receives an email for a new order, looks like this –

Default Email Template
Default Email Template

The default settings for all email templates are shown below –

Default Settings For Email Templates
Default Settings For Email Templates

You can change the body color, background color, text color, footer text , from name & from address and also add a header image in the email.

The above settings are not available at the individual email template level. Any change done here is applied to all the email templates. There are templates for new order, completed order, canceled order, failed order, processing order, refunded order, customer invoice, new account, password reset.

We will now add a header image and change the base color of the template. These styles will apply globally to all the email templates.

Change the styles for Emails
Change the styles for Emails

Before we get to the results, let’s have a look at different customizable options for the New Order email template for admin. Here we can enable/disable the email, change the email subject, email heading. You can use the placeholders – {site_title}, {order_number}, and {order_date}. You can open the below page by clicking on the Settings icon in the email template list available at Dashboard > WooCommerce > Settings > Email.

Let’s change the subject & heading of the email:

Admin New Order settings
Admin New Order settings
Email with header image & new email heading
Email with header image & new email heading

 

Take a look at the below screenshot. It will help you understand what we can change through WooCommerce settings and when will we have to override the templates:

Editable components in an email
Editable components in an email

2. By using Hooks

If you want to add some additional content in the emails, you can use different hooks defined by WooCommerce.

You need to keep in mind that hooks will let you add additional content but not modify the existing text. If you want to modify the existing text, you will need to override the templates. Let’s try to add some content in various parts of the email.

We will add some content in the Customer Invoice email template. There are various hooks we can use depending on where we want to place the content. We can use the following email hooks to add our content –

  1. woocommerce_email_header ($email_heading, $email)
  2. woocommerce_email_order_details ($order, $sent_to_admin, $plain_text, $email)
  3. woocommerce_email_before_order_table ($order, $sent_to_admin, $plain_text, $email)
  4. woocommerce_order_item_meta_start ($item_id, $item, $order, $plain_text)
  5. woocommerce_order_item_meta_end ($item_id, $item, $order, $plain_text)
  6. woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email)
  7. woocommerce_email_order_meta ($order, $sent_to_admin, $plain_text, $email)
  8. woocommerce_email_customer_details ($order, $sent_to_admin, $plain_text, $email)
  9. woocommerce_email_footer ($email)

You can add the below code snippets in your child theme’s functions.php file or in a separate plugin file.

a. woocommerce_email_header( $email_heading, $email ) hook is used to place the custom content just below the header. Here’s an example –

b. woocommerce_email_order_details ($order, $sent_to_admin, $plain_text, $email) hook places the content below the sentence – ‘You have received an order from Rashmi Malpande. The order is as follows:’ .

c. woocommerce_email_before_order_table ($order, $sent_to_admin, $plain_text, $email) places the content above the order details table.Lets try a simple example-

d. woocommerce_order_item_meta_start($item_id, $item, $order, $plain_text) places the content below the item name in the order table. This meta will be added first before any other meta.

e. woocommerce_order_item_meta_end ($item_id, $item, $order, $plain_text) places the content below the item & woocommerce_order_item_meta_start. This will be added at last after all the other meta information.

f. woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email) places the content just below the order table.

Here we will display a coupon code to the customer for next purchase if the order is completed.

g. woocommerce_email_order_meta ($order, $sent_to_admin, $plain_text, $email) places the content after the order table and below the hook woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email).

For example, we will find out the category of the order items and display products of the same category based on the customer’s order. It can help you increase the sales of your products.

h. woocommerce_email_customer_details ($order, $sent_to_admin, $plain_text, $email) hook places the content before the customer billing & shipping address.

i. woocommerce_email_footer($email) hook places the content just above the footer text. Here we will add a link to our shop page.

Add the above code in your theme’s functions.php file or a plugin file. The email sent to the customer will be displayed like below –

Hooks in WooCommerce Email Templates
Hooks in WooCommerce Email Templates

You can also add conditional logic in your emails. We will add a link to shop page if the order is completed.

 

As you can see, we can place our content in different parts of the email body using different hooks and some custom code. This is just a glimpse of what we can do with the hooks. You can use these hooks to personalize the emails as well.

3. By overriding the templates

The above 2 methods do not allow us to change the layout of the WooCommerce email templates. In order to do that, you have to override the email template whose layout you wish to change. Each of the email templates is made up of different templates combined together.

Below is the template hierarchy for New Order email template sent to the store admin. All email templates have the exact same hierarchy, with the only exception being the main template file itself (which in this case is admin-new-order.php).

WooCommerce Email Template Heirarchy
WooCommerce Email Template Heirarchy

We will customize the customer invoice template which has similar heirarchy as admin new order template. If you want to override the customer invoice template, you first need to copy the template file from plugins > woocommerce > templates > emails > customer-invoice.php to themes > {theme-name} > woocommerce > emails > customer-invoice.php.

Let’s add some simple content in the customer-invoice template file. We will add a message in the email template before the order details.

In the above example, we have added our content before woocommerce_email_order_details action. Our template will look like –

Personalize the email header by displaying First Name

Now let’s try a bit more complex example. We will change the email heading to display the customer’s first name. You need to make these changes in the same customer-invoice.php file that you copied to your theme’s folder.

If you look at the file class-wc-emails.php , you will see this piece of code:

The email_header() function displays the email-header.php template which contains the HTML markup. The email header HTML is same for all the templates. This template displays the email heading passed to it from the email_header() function. So, if we want to change the email heading, we need to change this $email_heading variable.

As we are customizing customer invoice template, we make the changes in customer-invoice.php file. We have $order object in the customer-invoice.php template. From the $order object we can get the customer details.

The get_billing_first_name() function returns the first name of the customer from the billing address.  Let’s change the heading to display the customer’s first name using this function.

Email Heading changed by overriding template
Email Heading changed by overriding template

This was an example for the customer invoice template. You can do the same thing with other templates.

If you want to customize the heading, you need to modify the $email_heading variable in the specific email template file. If you want to change the HTML for the header, you need to override the email-header.php template file. But remember, the header HTML is same for all templates.

Conclusion

Customizing the template is a good way to modify the emails based on our store’s design or adding some extra features for the customers.

But keep in mind that these template files will get deleted if you update your theme. So, just take a backup of these files whenever you update your theme.

Or a better solution is to create a child theme and create the woocommerce folder in it. So that even if you update your theme, your changes will remain as is.

Customizing the WooCommerce emails using hooks & filters is easier if the content you want to add is not complex.

So, go ahead and make your emails more user friendly, something that the customers would love to see.

Browse more in: Code Snippets, WooCommerce, WooCommerce How Tos, WooCommerce Tutorials

4
Leave a Reply

avatar
4 Comment threads
0 Thread replies
6 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
MatthewArtMichelleAndrius Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
Andrius
Guest
Andrius

Hi, I’m looking to customize WooCommerce emails and key to that is showing the Order Delivery Date fields in the email. Could you please post a tutorial on how to edit WooCommerce emails in order to display data coming from your plugin as well? Are there any template variables available? hooks? what are they and how can we call them?

Michelle
Guest

This is literally one of the most helpful customization articles I’ve read in a long time. Thank you so much for taking the time to document this!

Art
Guest

Thank you very much. I looked everywhere to find out how to remove order notes from emails without success until I found your site.

Matthew
Guest

Really helpful. Will test the code to see if it works for us.

from purchased

Subscribe Now