Customizing WooCommerce order emails

You’ve lovingly setup your first WooCommerce shop: picked out that perfect theme, 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 with a lot of complexities involved, WooCommerce offers some options that will allow the most novice to perform some basic tweaks. If you’re comfortable with HTML, CSS, and even some PHP/WordPress development, there’s no limit to the customizations you can create.

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

• On-hold – sent to customers containing order details after an order is placed on-hold.
• 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.
• Refunded – sent to customers when their orders are refunded.
• Customer invoice (sent manually) – 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.

The standard WooCommerce email looks something like this:

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):

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’ll clean up later.

Each email type offers its own set of customization options. These can be found by going to WooCommerce > 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”:

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 (ie woocommerce/templates/emails/email-styles.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-styles.php into your theme at: your-theme/woocommerce/emails/.
• Finally edit your-theme/woocommerce/emails/email-styles.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:

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 where you keep custom code:

// Adds instructions for order emails
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>';
    }
  }
}
add_action( 'woocommerce_email_before_order_table', 'add_order_email_instructions', 10, 2 );

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.

There are a few plugins or 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.

Plugins for customizing emails may even let you take changes further. Here’s an example of an email you can send once an order is completed:

Products Used

Sep 27, 2017 · 1 min read

Email MarketingLearn more