How to Customize WooCommerce Order Emails

Do you have a problem with the default WooCommerce email template?

I do.

After having taken so much trouble to set up the store, to select a good theme, adding each awesome product, to create an engaging user experience, I want every detail added, to go perfectly with rest of the store. And as for the emails sent to your customers are concerned, why should they be any different.

Okay, I accept WooCommerce has managed to keep the email template generic. But is that enough?

More often than not, clients ask us to customize Woocommerce order emails as well, to go along with the rest of their shop. They either want to add their site logo, or change the header, add additional links, to share offers or promote products, etc.

WooCommerce Email Settings

WooCommerce offers settings options, to change some basic look of the email templates, under WooCommerce -> Settings -> Emails-> Email Options. You can change the header image, title text, font color, footer text, etc.

But, if you were comfortable with a little coding, you could go beyond just changing the styling of the email, to changing the contents as well. Since WooCommerce provides several options for you to change the email template, you can do so without having to change anything in the core plugin.

Creating Custom Templates

WooCommerce sends out emails to customers on order creation, completion, for a payment invoice and for any changes made to an order. If you go to a particular option in WooCommerce Email Settings, for example ‘Processing Order’, you will notice a message.

To override and edit this email template copy {file-path} to your theme folder: {theme/file-path}. This method allows you a more advanced option to customize WooCommerce order emails. Because by doing this, you can directly override the email template file.

WooCommerce Email Templates

Every email sent out by WooCommerce is a combination of templates. This allows you more modular control over the customization. Thus, you only need to copy the required template file to your theme folder and then edit it. For example,

• If you wanted to change anything in the header, you will have to edit email-header.php
• For changes in the footer, you have to change, email-footer.php.
• And for the contents in the body, you will have to edit the particular order template, such as, customer-invoice.php or customer-processing-order.php, etc.

Changing the Email Template

Before assigning an email template to the order email, WooCommerce searches your theme’s folders, for the email template files. Thus, to change the email sent, all you have to do, is select the template file you want to change, and add it to your theme. For example, say you want to change the footer text color,

• By default the footer text color is set to a lighter shade of the base email color you select. To change this to say black, you have to change email-footer.php.
• You have to locate the file wp-content/plugins/woocommerce/templates/emails/email-footer.php
• Copy this to wp-content/themes/your-theme/woocommerce/emails/. If you do not have the directories woocommerce/emails, you will have to create those.
• Next is simple, open and edit the email-footer.php, and edit the following:

$credit = "
    border: 0;
    color: black;
    font-family: Arial;
    font-size: 12px;
    line-height:125%;
    text-align: center;
";

Another example we will take a look at, is to add say ‘Order Notes’, to a completed order email. For this, you’ll have to similarly copy, customer-completed-order.php, to your theme’s woocommerce/emails/ directory.

Open the file, and add the following:

<h2><?php _e( 'Order Notes', 'woocommerce' ); ?></h2>
<?php
    $args = array(
        'status' => 'approve',
        'post_id' => $order->id
       );
    $comments = get_comments($args);
    foreach($comments as $comment) :
        echo $comment->comment_content . '<br />';
    endforeach;
?>

You’ll have to place the code, depending on where you want it displayed, in the email. Let’s say you can add it after ‘Order’ and before ‘Customer Details’.

Using Action Hooks and Filters

For more control over the content sent in the email, you will have to delve in a little deeper into actions and filters, which WooCommerce provides. For example, say you wanted to add the Shipping method chosen, in the order email. You could use the ‘woocommerce_email_after_order_table‘, or ‘woocommerce_email_before_order_table‘, to add the content.

add_action( 'woocommerce_email_after_order_table', 'wdm_add_shipping_method_to_order_email', 10, 2 );
function wdm_add_shipping_method_to_order_email( $order, $is_admin_email ) {
    echo '<p><h4>Shipping:</h4> ' . $order->get_shipping_method() . '</p>';
}

Remember, these methods are tightly linked to the theme you choose. Hence when you change your theme, you will have to move your modified template files, or the added actions, to the new theme as well.

Coming to the end of this article, I hope you found it useful, and it helped you customize your WooCommerce order emails. If you had any doubts or questions, or had more useful methods you’d like to share with our users, do remember to leave your comments, in the comment section below.

You might also like: FREE Cheat-Sheet of 23 Tips & Tricks to effectively manage large orders in your Woo store

• WordPress Tips & Tricks
• With tags: Emails, Orders, WooCommerce

Share:

• Aparna G

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!