How to Customize WooCommerce Order Emails

Suppose after several days of hard work, you successfully setup your store on a specialized WooCommerce web hosting platform

The product page is now connected to a flawlessly working database and the checkout process has no problems at all. Every single element including the product pages, gallery, and feedback reflect the colors and style of your brand.

Then you decide to test your product ordering process and suddenly discover that order email is rather bland or too generic from the users’ point of view. Now you must be wondering what all your hard work of customizing your WooCommerce store was all for nothing.

WooCommerce includes several order statuses that may not match the flows of your store but still you can mark orders with custom status such as Payment Pending, Processing, On Hold, Failed, etc.

Many WooCommerce store owners and administrators have this common query: How can I modify the default WooCommerce request messages to have my brand’s look and feel and how can I add additional content to help clients with their order as well as how to create custom WooCommerce order status.

While making impressive HTML emails is truly an achievement in itself, WooCommerce offers several options so that even amateurs could create some amazing emails.

Customer Emails

“Vanilla” offers WooCommerce email notifications that are sent to customers in response to their interactions with the store. The following are the most important emails for the customers of your WooCommerce store.

• New Order:  New order emails are sent when a new order is received.
• Cancelled Order: Cancelled order emails are sent when order(s) has been marked as cancelled.  
• Failed Order: Failed order emails are sent when an under processing or on-hold order is marked as Fail.
• Order On hold: This is an order notification sent to customers. It contains order details after an order is placed on-hold.
• Processing Order: This is an order notification sent to customers. It contains order details after payment.
• Completed Order:  Order complete emails are sent to customers when their orders are marked completed. These emails usually indicate that the orders have been shipped.
• Refunded Order: Order refunded emails are sent to customers when their orders are marked refunded.
• Customer Invoice: Customer invoice emails contain order information and payment links.
• Customer Note: Customer note emails are sent when you add a note to order.
• Reset Password: Customer “reset password” emails are sent when customers reset their passwords.
• New Account: Customer “new account” emails are sent to the customer when a customer signs up via checkout or account sign up page.

In addition to these standard email types, you can add customized emails as well.

Why Speed Is Crucial For SEO & UX?

These Expert Tips Will Show You How to Improve The Speed of Your WooCommerce Stores.

I agree to the Cloudways Terms of Service & Privacy Policy

Get Ebook Now!

Thank You

Your Ebook is on its Way to Your Inbox.

WooCommerce Global Email Options

The standard WooCommerce email looks like this:

The WooCommerce admin allows some basic customization of this default email layout. These options could be accessed after logging in to the WordPress Admin and going to WooCommerce > Settings > Emails > Email  Sender Options. These options include:

• Set the From name/address (visible to the customer)
• WooCommerce email header image size
• Change the email footer text
• Choose different base, background, and body text colors

Remember that these choices apply to all emails. In just a matter of minutes, you can create a highly customized email by altering WooCommerce email header image size, custom footer text, and another base color.

You might have noticed that the WooCommerce identified that a bright base color was used. To compensate, it used a suitable shade for the title. Unfortunately, this logic was not applied to the footer’s content. This mishap can easily be fixed manually!  

WooCommerce Email Specific Options

Every email type has its own set of customization options. These options can be accessed through WooCommerce > Settings > Emails > Processing order (This example path focuses on Processing Order Emails. You can alter several aspects of the email, including:  

• Enable or Disable whether the email is even sent at all
• The email’s subject
• Email heading (The default is “Thank you for your order”)
• Whether the email is sent as HTML or plain text (The default option is HTML)

Here, I have set the custom email heading as ‘Thank You For Your Order.’

Overriding Custom Email WooCommerce Template

A more effective and efficient approach is to modify the default email layouts. WooCommerce offers a helpful template system that allows you to customize parts of your store or emails by replicating the format file(s) into the theme. Every email type has a template file for its content (For example, woocommerce/templates/emails/customer-process-order.php). In addition, there are shared templates that all email types can access and use. These could be found at  woocommerce/templates/emails/email-styles.php. In many cases, this is the template that developers override to change shared aspects of the emails. The process of dealing with the footer issue mentioned earlier is:

1. First you make sure that the following directory exists in the WordPress installation: wp-content/themes/your-theme/woocommerce/emails.
2. Next, copy the file found at wp-content/plugins/woocommerce/templates/emails/email-styles.php into the store’s theme at: your-theme/woocommerce/emails/.
3. Finally, edit your-theme/woocommerce/emails/email-styles.php to change the footer text color to black (for brevity, only the relevant part of the template file code is shown):

$credit = "
color: #66bae3;
font-size:15px;
text-align:center;
";

This generates a much more readable footer:

Conditional Customization with Actions/Filters

The final and most effective approach to customizing emails is to work with WooCommerce custom code. This obviously requires a high-level of expertise in PHP. The good news is that the process is straightforward because the original WooCommerce layouts are still in use. The process involves changing portions of the content.

Filter Functions

• has_filter()
• add_filter()
• apply_filters()
• apply_filters_ref_array()
• current_filter()
• remove_filter()
• remove_all_filters()
• doing_filter()

Actions Functions

• has_action()
• add_action()
• do_action()
• do_action_ref_array()
• did_action()
• remove_action()
• remove_all_actions()
• doing_action()

Activation/Deactivation/Uninstall Functions

• register_activation_hook()
• register_uninstall_hook()
• register_deactivation_hook()

For this example, I will add some helpful payment instructions to the email, based on the checkout payment type used.

To start, add the following to the theme’s functions.php:

add_action( 'woocommerce_before_email_order', 'add_order_instruction_email', 10, 2 );
 
function add_order_instruction_email( $order, $sent_to_admin ) {
  
  if ( ! $sent_to_admin ) {
 
    if ( 'cod' == $order->payment_method ) {
      // cash on delivery method
      echo '<p><strong>Instructions:</strong> Full payment is due immediately upon delivery: <em>cash only, no exceptions</em>.</p>';
    } else {
      // other methods (ie credit card)
      echo '<p><strong>Instructions:</strong> Please look for "Madrigal Electromotive GmbH" on your next credit card statement.</p>';
    }
  }
}

If the customer opted for “Cash on Delivery” when checking out, the customer will receive the email with helpful order instructions:

Plugin/Payment Gateway Options

Several plugins and payment gateways actually allow you to customize parts of the order emails. For instance, the built-in bank/wire transfer payment method allows you to configure instructions and insert wire transfer information. This could be done easily through  WooCommerce > Settings > Checkout > BACS.

Although it’s uncommon, it is good to know that these options are available. This information could also help you in opting for a particular plugin for the store.

WooCommerce Emails add_actions Hook

When working with WooCommerce emails, add_actions hook often comes handy. When working with this hook, you will need to use a global variable, email that will contain email subject. here is the code snippet:

add_action( 'woocommerce_email_header', 'woocommerce_emails_before_header', 1,3 );
function woocommerce_emails_before_header( $email_heading, $email ){
    $GLOBALS['email'] = $email;
}

The above hook can be placed in functions.php ( located in your theme folder) or at the start of the WooCommerce email template. the global variable $email calls the main WooCommerce email object, while $order contains an instance of the global WooCommerce order object

global $email; 
$order = $email->object;

WooCommerce Custom Email Per Product

Following code send custom order emails template for a different product

for example for the product ID 87 you want to display the header title WooCommerce email notification OR how to test WooCommerce emails:

function woocommerce_custom_email_per_product_depending_on_product_id( $email_heading, $order ) {
    global $woocommerce;
    $items = $order->get_items();
    foreach ( $items as $item ) {
        $product_id = $item['product_id'];
        if ( $product_id == 87 ) {
            $email_heading = 'WooCommerce email notification OR how to test WooCommerce emails';
        }
        return $email_heading;
    }
}
add_filter( 'woocommerce_email_heading_customer_processing_order', 'woocommerce_custom_email_per_product_depending_on_product_id', 10, 5 );

Note:  Now that you know the entire process of Customizing WooCommerce order emails, you now have the choice of either retaining the function or creating a separate WooCommerce email plugin for Woocommerce email confirmation and notification.

Conclusion

Setting up a WooCommerce store is pretty easy but customizing the default email templates becomes tricky sometimes. In this tutorial, I discussed how you can send fully customized WooCommerce hosted store emails to accommodate all aspects of the store’s activities. I also highlighted the way in which the default email templates can be altered to insert store-specific and order-specific information in emails for providing the better user experience.

Leave a comment below if you wish to add to the discussion or ask a question!

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Connected on: Twitter Community Forum