Customising WooCommerce Order Emails

As seen on SkyVerge. You’ve lovingly setup your first WooCommerce shop: picked out that perfect theme (maybe one we recommend), polished your product page content to an irresistible shine, tested your frictionless checkout, and… received a nice enough but totally generic order email that in no way matches the look, the style of your shop. This generic email doesn’t represent the impression you want to leave your customer with! A common question from new shop owners is: how exactly do I customize the default WooCommerce order emails to either match my shop’s look and feel, or how do I add some additional content to assist customers with their order? While creating HTML emails is admittedly a specialty unto itself with a lot of complexities involved, WooCommerce offers some options that will allow the most novice to perform some basic tweaks, and if you’re comfortable with HTML, CSS, and even some PHP/WordPress development, there’s no limit to the customizations you can create.

Customer Emails

“Out of the box” WooCommerce includes 7 email types, 4 of which are sent to the customer and related to their order, these are the ones we’ll be concerning ourselves with (though any techniques can certainly apply to the other types):

Processing order – sent to the customer after payment and contains the order details.
Completed order – sent to the customer when the order is marked complete, and usually indicates that the order has been shipped.
Customer invoice – sent to the customer for an order which requires payment
Customer note – sent to the customer when a customer note is added from the edit order admin

In addition to the standard email types, you can add completely new and custom emails, though this is considered an advanced topic.

WooCommerce Global Email Options

The standard WooCommerce email looks like the following:

wc-customizing-order-emails-default-email

The WooCommerce admin allows some basic customization of this default email layout, with options found by logging into your WordPress Admin and going to WooCommerce > Emails > Email Options. Some of options include:

Set the “From” name/address that the customer sees
Add a header image
Change the email footer text
Choose different base, background, and body text colors

Keeping in mind that these configuration options will apply to all emails, and in just a few minutes we can start creating a custom branded look by setting a header image, custom footer text, and a new “base” color (yellow):

wc-customizing-order-emails-custom-email-1

Looking pretty good! If you’re following along closely you may notice that WooCommerce has detected that a “light” base color was used (the yellow) and automatically changed the title text color to black to provide an appropriate level of contrast. Cool! Unfortunately, the same was not done with the footer text, so this is something we will clean up later.

WooCommerce Email Specific Options

Each email type offers its own set of customization options. These can be found by going toWooCommerce > Settings > Emails > Processing order (for the processing order type, of course). Here you can further tweak the content for this particular email type, changing for instance:

Whether the email is even sent at all (enabled/disabled)
The email subject
Email heading (defaults to “Thank you for your order”)
Whether the email is sent as HTML or plain text (defaults to HTML)

Here we set a custom email heading “Thanks From Los Pollos”:

Overriding Email Templates

A more powerful (and advanced) way to customize order emails is to override an email template file. WooCommerce uses a convenient templating system that allows you to customize parts of your site (or emails) by copying the relevant template file into your theme, and modifying the code there. Each of the email types has a template file for its content (ie woocommerce/templates/emails/customer-process-order.php) along with a number of shared templates that are used for all emails types (iewoocommerce/templates/emails/email-footer.php). It is this latter which we will override to fix that hard-to-read footer text from before.

First you make sure that the following directories exist in your wordpress install: wp-content/themes/your-theme/woocommerce/emails/
Next, copy the file found at wp-content/plugins/woocommerce/templates/emails/email-footer.phpinto your theme at: your-theme/woocommerce/emails/.
Finally edit your-theme/woocommerce/emails/email-footer.php to change the footer text to black (only the relevant part of the template file code is shown, for brevity):

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

This gives us a much more readable footer:

wc-customizing-order-emails-customer-email-3

Conditional Customization with Actions/Filters

The final, and most powerful/advanced way to customize an email is to make use of the actions/filters provided by WooCommerce with some custom code. While this does require some comfort with simple PHP and the WordPress Plugin API, the benefit is that it’s more upgrade-friendly, as the original WooCommerce templates are still used: we’re just injecting/modifying some of the content. Makes sense? Great! For this example we’ll add some helpful payment instructions to the email, based on the checkout payment type used. To try this out, add the following to your theme’s functions.php:

add_action( 'woocommerce_email_before_order_table', 'add_order_email_instructions', 10, 2 );
function add_order_email_instructions( $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>';
    }
  }
}

When checking out using the “Cash on Delivery” method, the email received by the customer will include the helpful order instructions indicated below:

Other methods will include the “Please look for…” instructions instead.

Plugin/Payment Gateway Options

There are a few plugins/payment gateways that actually allow you to customize portions of the order emails. For instance, the built-in bank/wire transfer payment method allows you to configure instructions (containing your wire transfer into, etc) right from the WooCommerce > Settings > Checkout > BACS admin. Although fairly uncommon, it’s good to be aware that these types of options can exist, when you’re choosing/configuring plugins for your site.

In Closing

In this article we covered five techniques available for customizing WooCommerce order emails, ranging from trivial admin configuration, to advanced action/filter usage. We took the clean but undistinguished default order processing email, and styled it to match our imaginary shop. If you found this material useful and put any of the methods described above into practice, or have one of your own, please let us know with a comment below!

Article Resources

Want to see more “How to” articles? We’ve got a whole category of them!

Revisions

September 2, 2015 @ 14:16:44 [Current Revision] by PeterLugg
September 2, 2015 @ 14:16:00 by PeterLugg
September 2, 2015 @ 14:15:11 [Autosave] by PeterLugg
September 2, 2015 @ 14:09:57 by PeterLugg

Revision Differences

There are no differences between the September 2, 2015 @ 14:16:00 revision and the current revision. (Maybe only post meta information was changed.)

Tags: woocommerce