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

--- September 2, 2015 @ 14:09:57
+++ Current Revision
 Unchanged: As seen on <a href="https:/ /www.sellwithwp.com/ customizing- woocommerce-order-emails/" target="_blank" >SkyVerge</a>.
 Unchanged: You’ve lovingly setup your first <a href="https:/ /www.sellwithwp.com/link/ woocommerce"> WooCommerce</a> shop: picked out that perfect theme (maybe one <a title="We Recommend" href="https:/ /www.sellwithwp.com/ recommends/" target="_blank">we recommend</a>), 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 <em>your</em> shop. This generic email doesn’t represent the impression you want to leave your customer with!
-Deleted: 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 <a href="http:// kb.mailchimp.com/article/ how-to-code-html-emails" target="_blank">specialty unto itself</a>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.
+Added: 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 <a href="http:// kb.mailchimp.com/article/ how-to-code-html-emails" target="_blank">specialty unto itself</a> 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.
 Unchanged: <h2 id="customer- emails">Customer Emails<i class="fa fa-link heading-icon"></i></h2>
 Unchanged: “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):
 Unchanged: <ul>
 Unchanged:  <li><strong>Processing order</strong> – sent to the customer after payment and contains the order details.</li>
 Unchanged:  <li><strong>Completed order</strong> – sent to the customer when the order is marked complete, and usually indicates that the order has been shipped.</li>
 Unchanged:  <li><strong>Customer invoice</strong> – sent to the customer for an order which requires payment</li>
 Unchanged:  <li><strong>Customer note</strong> – sent to the customer when a customer note is added from the edit order admin</li>
 Unchanged: </ul>
 Unchanged: In addition to the standard email types, you can <a href="http:// www.skyverge.com/blog/how- to-add-a-custom- woocommerce-email/">add completely new and custom emails</a>, though this is considered an advanced topic.
 Unchanged: <h2 id="global-options" >WooCommerce Global Email Options<i class="fa fa-link heading-icon"></i></h2>
 Unchanged: The standard WooCommerce email looks like the following:
 Unchanged: <a href="https:/ /www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- default-email.png" data-rel="lightbox-0"><img class="aligncenter size-medium wp-image-1724" src="https:// www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- default-email- 337x450.png" alt="wc-customizing- order-emails- default-email" width="337" height="450" /></a>
 Unchanged: The WooCommerce admin allows some basic customization of this default email layout, with options found by logging into your WordPress Admin and going to <strong>WooCommerce &gt; Emails &gt; Email Options</strong>. Some of options include:
 Unchanged: <ul>
 Unchanged:  <li>Set the “From” name/address that the customer sees</li>
 Unchanged:  <li>Add a header image</li>
 Unchanged:  <li>Change the email footer text</li>
 Unchanged:  <li>Choose different base, background, and body text colors</li>
 Unchanged: </ul>
 Unchanged: Keeping in mind that these configuration options will apply to <em>all</em> 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):
 Unchanged: <a href="https:/ /www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- custom-email-1.png" data-rel="lightbox-1"><img class="aligncenter wp-image-1731 size-medium" src="https:// www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- custom-email- 1-280x450.png" alt="wc-customizing- order-emails- custom-email-1" width="280" height="450" /></a>
 Unchanged: 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.
 Unchanged: <h2 id="specific- options">WooCommerce Email Specific Options<i class="fa fa-link heading-icon"></i></h2>
 Unchanged: Each email type offers its own set of customization options. These can be found by going to<strong>WooCommerce &gt; Settings &gt; Emails &gt; Processing order</strong> (for the processing order type, of course). Here you can further tweak the content for this particular email type, changing for instance:
 Unchanged: <ul>
 Unchanged:  <li>Whether the email is even sent at all (enabled/disabled)</li>
 Unchanged:  <li>The email subject</li>
 Unchanged:  <li>Email heading (defaults to “Thank you for your order”)</li>
 Unchanged:  <li>Whether the email is sent as HTML or plain text (defaults to HTML)</li>
 Unchanged: </ul>
 Unchanged: Here we set a custom email heading “Thanks From Los Pollos”:
 Unchanged: <a href="https:/ /www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- customer-email-2.png" data-rel="lightbox-2"><img class="size-medium wp-image-1727" src="https:// www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- customer-email- 2-450x263.png" alt="A custom email heading" width="450" height="263" /></a>
 Unchanged: <h2 id="overriding- templates">Overriding Email Templates<i class="fa fa-link heading-icon"></i></h2>
 Unchanged: A more powerful (and advanced) way to customize order emails is to <a href="http:// www.skyverge.com/blog/how- to-override-woocommerce-template- files/">override an email template file</a>. 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 <code>woocommerce/ templates/emails/customer- process-order.php</code>) along with a number of shared templates that are used for all emails types (ie<code>woocommerce/ templates/emails/ email-footer.php</code>). It is this latter which we will override to fix that hard-to-read footer text from before.
 Unchanged: <ul>
 Unchanged:  <li>First you make sure that the following directories exist in your wordpress install: <code>wp-content/ themes/<i>your-theme</i>/ woocommerce/emails/ </code></li>
 Unchanged:  <li>Next, copy the file found at <code>wp-content/ plugins/woocommerce/templates/ emails/email- footer.php</code>into your theme at: <code><i>your- theme</i>/woocommerce/emails/ </code>.</li>
 Unchanged:  <li>Finally edit <code><i>your- theme</i>/woocommerce/emails/ email-footer.php</code> to change the footer text to black (only the relevant part of the template file code is shown, for brevity):</li>
 Unchanged: </ul>
 Unchanged: <div>
 Unchanged: <div id="highlighter_262158" class="syntaxhighlighter plain">
 Unchanged: <table border="0" cellspacing="0" cellpadding="0">
 Unchanged: <tbody>
 Unchanged: <tr>
 Unchanged: <td class="gutter">
 Unchanged: <div class="line number1 index0 alt2">1</div>
 Unchanged: <div class="line number2 index1 alt1">2</div>
 Unchanged: <div class="line number3 index2 alt2">3</div>
 Unchanged: <div class="line number4 index3 alt1">4</div>
 Unchanged: <div class="line number5 index4 alt2">5</div>
 Unchanged: <div class="line number6 index5 alt1">6</div>
 Unchanged: <div class="line number7 index6 alt2">7</div>
 Unchanged: <div class="line number8 index7 alt1">8</div>
 Unchanged: <div class="line number9 index8 alt2">9</div>
 Unchanged: <div class="line number10 index9 alt1">10</div></td>
 Unchanged: <td class="code">
 Unchanged: <div class="container">
 Unchanged: <div class="line number1 index0 alt2"><code class="plain plain">...</code></div>
 Unchanged: <div class="line number2 index1 alt1"><code class="plain plain">$credit = "</code></div>
 Unchanged: <div class="line number3 index2 alt2"><code class="plain spaces">    </code><code class="plain plain">border: 0;</code></div>
 Unchanged: <div class="line number4 index3 alt1"><code class="plain spaces">    </code><code class="plain plain">color: black;</code></div>
 Unchanged: <div class="line number5 index4 alt2"><code class="plain spaces">    </code><code class="plain plain">font-family: Arial;</code></div>
 Unchanged: <div class="line number6 index5 alt1"><code class="plain spaces">    </code><code class="plain plain">font-size: 12px;</code></div>
 Unchanged: <div class="line number7 index6 alt2"><code class="plain spaces">    </code><code class="plain plain">line-height: 125%;</code></div>
 Unchanged: <div class="line number8 index7 alt1"><code class="plain spaces">    </code><code class="plain plain">text-align: center;</code></div>
 Unchanged: <div class="line number9 index8 alt2"><code class="plain plain">";</code></div>
 Unchanged: <div class="line number10 index9 alt1"><code class="plain plain">...</code></div>
 Unchanged: </div></td>
 Unchanged: </tr>
 Unchanged: </tbody>
 Unchanged: </table>
 Unchanged: </div>
 Unchanged: </div>
 Unchanged: This gives us a much more readable footer:
 Unchanged: <a href="https:/ /www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- customer-email-3.png" data-rel="lightbox-3"><img class="aligncenter size-medium wp-image-1732" src="https:// www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- customer-email- 3-450x170.png" alt="wc-customizing- order-emails- customer-email-3" width="450" height="170" /></a>
 Unchanged: <h2 id="conditional- customization" >Conditional Customization with Actions/Filters<i class="fa fa-link heading-icon"></i></h2>
 Unchanged: 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 <a href="http:// codex.wordpress.org/Plugin_ API">WordPress Plugin API</a>, 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!
 Unchanged: 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:
 Unchanged: <div>
 Unchanged: <div id="highlighter_645542" class="syntaxhighlighter php">
 Unchanged: <table border="0" cellspacing="0" cellpadding="0">
 Unchanged: <tbody>
 Unchanged: <tr>
 Unchanged: <td class="gutter">
 Unchanged: <div class="line number1 index0 alt2">1</div>
 Unchanged: <div class="line number2 index1 alt1">2</div>
 Unchanged: <div class="line number3 index2 alt2">3</div>
 Unchanged: <div class="line number4 index3 alt1">4</div>
 Unchanged: <div class="line number5 index4 alt2">5</div>
 Unchanged: <div class="line number6 index5 alt1">6</div>
 Unchanged: <div class="line number7 index6 alt2">7</div>
 Unchanged: <div class="line number8 index7 alt1">8</div>
 Unchanged: <div class="line number9 index8 alt2">9</div>
 Unchanged: <div class="line number10 index9 alt1">10</div>
 Unchanged: <div class="line number11 index10 alt2">11</div>
 Unchanged: <div class="line number12 index11 alt1">12</div>
 Unchanged: <div class="line number13 index12 alt2">13</div>
 Unchanged: <div class="line number14 index13 alt1">14</div>
 Unchanged: <div class="line number15 index14 alt2">15</div></td>
 Unchanged: <td class="code">
 Unchanged: <div class="container">
 Unchanged: <div class="line number1 index0 alt2"><code class="php plain">add_action( </code><code class="php string">'woocommerce_ email_before_ order_table'</code><code class="php plain">, </code><code class="php string">'add_ order_email_instructions'</code><code class="php plain">, 10, 2 );</code></div>
 Unchanged: <div class="line number2 index1 alt1"></div>
 Unchanged: <div class="line number3 index2 alt2"><code class="php keyword">function</code> <code class="php plain">add_order_ email_instructions( </code><code class="php variable">$order</code><code class="php plain">, </code><code class="php variable">$sent_ to_admin</code> <code class="php plain">) {</code></div>
 Unchanged: <div class="line number4 index3 alt1"><code class="php spaces"> </code></div>
 Unchanged: <div class="line number5 index4 alt2"><code class="php spaces">  </code><code class="php keyword">if</code> <code class="php plain">( ! </code><code class="php variable">$sent_ to_admin</code> <code class="php plain">) {</code></div>
 Unchanged: <div class="line number6 index5 alt1"></div>
 Unchanged: <div class="line number7 index6 alt2"><code class="php spaces">    </code><code class="php keyword">if</code> <code class="php plain">( </code><code class="php string">'cod'</code> <code class="php plain">== </code><code class="php variable">$order</code><code class="php plain">-&gt;payment_method ) {</code></div>
 Unchanged: <div class="line number8 index7 alt1"><code class="php spaces">      </code><code class="php comments">// cash on delivery method</code></div>
 Unchanged: <div class="line number9 index8 alt2"><code class="php spaces">      </code><code class="php functions">echo</code> <code class="php string">'&lt; p&gt;&lt;strong&gt; Instructions: &lt;/strong&gt; Full payment is due immediately upon delivery: &lt;em&gt;cash only, no exceptions&lt; /em&gt;.&lt;/ p&gt;'</code><code class="php plain">;</code></div>
 Unchanged: <div class="line number10 index9 alt1"><code class="php spaces">    </code><code class="php plain">} </code><code class="php keyword">else</code> <code class="php plain">{</code></div>
 Unchanged: <div class="line number11 index10 alt2"><code class="php spaces">      </code><code class="php comments">// other methods (ie credit card)</code></div>
 Unchanged: <div class="line number12 index11 alt1"><code class="php spaces">      </code><code class="php functions">echo</code> <code class="php string">'&lt; p&gt;&lt;strong&gt; Instructions: &lt;/strong&gt; Please look for "Madrigal Electromotive GmbH" on your next credit card statement.&lt; /p&gt;'</code><code class="php plain">;</code></div>
 Unchanged: <div class="line number13 index12 alt2"><code class="php spaces">    </code><code class="php plain">}</code></div>
 Unchanged: <div class="line number14 index13 alt1"><code class="php spaces">  </code><code class="php plain">}</code></div>
 Unchanged: <div class="line number15 index14 alt2"><code class="php plain">}</code></div>
 Unchanged: </div></td>
 Unchanged: </tr>
 Unchanged: </tbody>
 Unchanged: </table>
 Unchanged: </div>
 Unchanged: </div>
 Unchanged: When checking out using the “Cash on Delivery” method, the email received by the customer will include the helpful order instructions indicated below:
 Unchanged: <a href="https:/ /www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- customer-email-4.png" data-rel="lightbox-4"><img class="size-medium wp-image-1736" src="https:// www.sellwithwp.com/wp-content/ uploads/2014/ 05/wc-customizing- order-emails- customer-email- 4-450x206.png" alt="Custom payment instructions" width="450" height="206" /></a>
 Unchanged: Other methods will include the “Please look for…” instructions instead.
 Unchanged: <h2 id="plugin-options" >Plugin/Payment Gateway Options<i class="fa fa-link heading-icon"></i></h2>
 Unchanged: 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 <strong>WooCommerce &gt; Settings &gt; Checkout &gt; BACS</strong> admin.
 Unchanged: Although fairly uncommon, it’s good to be aware that these types of options <em>can</em> exist, when you’re choosing/configuring plugins for your site.
 Unchanged: <h2 id="closing">In Closing<i class="fa fa-link heading-icon"></i></h2>
 Unchanged: 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!
 Unchanged: <h2 id="resources">Article Resources<i class="fa fa-link heading-icon"></i></h2>
 Unchanged: Want to see more “How to” articles? We’ve got a <a href="https:/ /www.sellwithwp.com/category/ how-to/">whole category of them</a>!
 Unchanged: <ul>
 Unchanged:  <li><a href="http:// kb.mailchimp.com/article/ how-to-code-html-emails">How to Code HTML Emails</a></li>
 Unchanged:  <li><a href="http:// www.skyverge.com/blog/how- to-add-a-custom- woocommerce-email/">How to Add a Custom WooCommerce Email</a></li>
 Unchanged:  <li><a href="http:// www.skyverge.com/blog/how- to-override-woocommerce-template- files/">Overriding WooCommerce template files</a></li>
 Unchanged:  <li><a href="http:// codex.wordpress.org/Plugin_ API">WordPress Action/Filter Reference</a></li>
 Unchanged: </ul>

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: woocommerce