preview-email-header2WooCommerce is an amazing tool for selling products through your WordPress powered website. It’s infinitely extendable for developers, has great documentation, and overall gets your online e-commerce up and running very smoothly. We love it so much we made QuickCheckout that let’s your customers buy with WooCommerce even faster.

Another thing I particularly appreciate about WooCommerce is the emphasis on the customer experience from start to finish. Users can navigate to the products easily, see screenshots, add or read reviews, add the product to their cart, purchase, and then get a well formatted confirmation email. This is great.

So if you care at all about your customer experience, you want to know how to customize those receipts and notifications to give them the best impression of your business and give them the most relevant information about their purchase. So, like the rest of WooCommerce, there’s all these great hooks and filters available to customize the email templates to optimize that experience. There’s just one problem:

You Can’t Preview Changes to the Template at all!

I’m certain…like REALLY certain that this feature is on someone’s to-do list over at Woo, and they’ll make it awesome — one day! But until now making updates to your email templates requires that you re-send the emails to yourself for every change you make in order to see the changes live. As a developer, this really is inconvenient and irksome.

I struggled with this directly when building out a new WooCommerce site. I needed to make basic changes to a couple of the templates and I just refused to re-send emails over and over again. In researching a solution I learned a lot about customizing the email templates, and ended up putting together a resource that speeds up development of email templates a lot. I think you’ll love it.

So let’s jump into this.

WooCommerce Email Templates Overview

So you’ve decided that you need to add some content, or adjust the layout a bit to some of your email templates. With WooCommerce 2.3+ you can jump right into this just the same way you change other WooCommerce templates. Basically, go into the woocommerce folder and navigate to the templates sub-folder. Inside there you’ll see another sub-folder called emails. You can grab any and all of those files, and copy them (don’t “move”) into your theme folder into woocommerce\emails.

What I typically like to do at this point is add an inline comment like: <!--This is in my theme! --> then preview the template and make sure that it’s actually over-writing correctly. Of course, that’s exactly where I hit my first roadblock since there’s NO way to preview the email templates. But no worries for now, I’ll cover in detail later.

At this point, you’ve already got “custom” email templates running, you just haven’t customized them yet. Let’s do that next.

Customizing Your Email Templates

The email templates depend on PHP, HTML, and CSS just like page templates do. But there’s a couple “gotchas” to watch for.

No Javascript

Emails are not dynamic. Everything that is output needs to be static. That means that jQuery and Javascript will have no effect on these. Keep that in mind.

WooCommerce Globals and Hooks

The large majority of the content that you’re outputting is going to come from data that WooCommerce handles. This means you’ll want to get really familiar with the various classes and actions that WooCommerce uses during the purchase process. Here’s a couple important things to familiarize yourself with:

  • WC_Emails (Documentation) This class contains pretty much all of the actions that you’ll need to deal with adjusting the email layouts or moving content to other places. For example, the email_header and email_footer and the customer_invoice->order are all in there and available to be extended. If you are going to be making serious layout changes you’ll want to know how to output these into your new layout
  • wc_get_template (Documentation) This is how the general framework of each template is structured. The email-header.php and email-footer.php are called with this.
  • do_action (Codex Documentation) This is your friend, but it’s a WordPress Core function. You’ll use this to call up any of the WooCommerce available actions.

CSS

WooCommerce uses emails\email-styles.php to output the color styles from the WooCommerce Email Settings tab directly into the template as inline styles. Inline styles are best for email. WooCommerce takes the header styles and dynamically inserts them into the template as inline styles. It’s pretty impressive how they do that. This also applies to any custom styles you add, even to new class or id names.

One quirk I found though is make sure you don’t add any inline comments in your styles. For some reason that breaks this feature and your styles won’t get applied. The bottomline is that you can add all the styles you want into the email-header.php file, and WooCommerce will take care of adding them into your template as inline styles. Pretty awesome work.

Preview WooCommerce Email Templates

OK. Now’s the fun part. Head over to our Github Repo to see our Preview Email script:

download-on-github

UPDATE: This library has been updated to be current with WooCommerce 2.6+

This does several things to make this whole process easier for you:

  1. It gets you adding the woocommerce\emails folder to your theme to get you on your way to customizing your templates.
  2. It adds a link to the WooCommerce Email Settings tab that allows you to preview all of your email templates live. YEAH!
  3. The Preview window allows you to choose which template you want to see, and even populate that email with order information.
  4. It has the email-header.php and email-footer.php files in order to make the preview work. But since I needed to add those anyway I updated the markup to make the table layout responsive. Responsive Email Receipts, right out of the box!

Here’s the link in the Email Settings panel:

woo-email-settings-w-preview-links

And what’s a tutorial without an animated GIF? Here’s the Preview page doing awesome stuff:

preview-email-screengrab

There are a few plugins out there that handle this kind of thing a bit more robustly. And like I mentioned, I’m pretty sure WooCommerce will incorporate something like this into it’s Core in the near future. But for now, I can’t imagine customizing WooCommerce emails without this!

Tools for Making Awesome Emails

OK, now you’ve got an overview of the mechanics for customizing WooCommerce Email Templates. Now you need some tools to actually build cool stuff. Here’s a few things that should help a ton:

Email Logs WordPress Plugin

email-logs-screenshot

This is a really handy tool that gives you a dashboard to see every email that is sent from your WordPress install. This was really valuable for me while building out the Preview script. I wanted to make sure that only the code that I wanted was getting output to the actual email. This tool shows you the log of the email being sent, and give you a popup to see the actual email.

With this my workflow was:

  • Customize the template file
  • Refresh the Preview panel. Repeat one and two until satisfied.
  • Lastly, go to a test order and go to “Customer Actions” in the right hand panel and choose “Customer Invoice” under “Resend Order Emails” and hit “Save Order”. This resends that email to my email address on that order.
  • Go to the Email Logs dashboard and preview the final email in a popup.

Zurb

Zurb is a really impressive (and we don’t use that word lightly around here 😉 ) design and development company. They’re the geniuses behind the Foundation CSS Framework. They have several really excellent resources available for Responsive Emails.

zurb-email-templatesFree Responsive Templates. This great library of Responsive Email Templates with quite complex layouts. If you really want to impress your customers, you might lean on some of these for powerful layouts.
responsive-emails-introResponsive Email Course: Zurb University does all kinds of really useful courses. I haven’t personally taken this course, but the fact that they have a dedicated course just for Responsive Emails is pretty great.
zurb-inkZurb Ink: Zurb Ink is a whole library dedicated to Reponsive Emails. You’ll get more than you ever wanted from Responsive emails just be cruising around the website. But if I were you, I’d download everything you can get your hands on.

Antwort Responsive Email Templates

antwort

This is another excellent responsive template library. Antwort had very detailed documentation for it’s layouts and features. If you’re just getting into responsive email templates you might want to start here and move on to the Zurb stuff after you’ve got a good grasp of this.

Add Additional Email Triggers and Templates

skyverge

We’ve been discussing customizing only the default WooCommerce Email Templates. What if you want to have additional emails sent and customize those templates? The folks at Skyverge have a great tutorial on doing just that. The bonus is that once your new email and template are created you’ll still be able to preview it with our code too.

What are you Building?

Have you created an amazing email template for your WooCommerce store? We’d love to see it. Are you using our Preview code and simply adore us now?! Let us know, we’d love to hear your story.

Matt is Head of Support and Community Outreach at WordImpress.com. He's the author of many free WordPress plugins, a popular blogger at his website, an admin of the Advanced WordPress Facebook group, co-organizer of the San Diego WordPress Meetup, and a frequent WordCamp speaker and attender.

Follow Matt:

56 Responses to “Customize and Preview WooCommerce Emails”

  1. John Cartlon

    Good post, Matt.

    Here is the plugin that allows you to view in bowser tests of the WooCommerce emails – https://wordpress.org/plugins/woocommerce-email-test/

    – John
    PS: WordPress Development Company

    Reply
    • Matt Cromwell

      Hi John. I saw that one and honestly, I didn’t even test it because of the 3 1 star reviews. I like to give developers the benefit of the doubt, but the responses to those reviews was also less than satisfactory. In the end, this method is much more direct, requires no additional plugin code, and gives me a lot more control over the end result. That’s why I opted for this instead.

      Thanks for stopping by!

      Reply
  2. dcsenterprise

    Hello,
    I followed your instructions to the T but can’t get this to work. Please see attached.

    Reply
    • Matt Cromwell

      Most likely (from Step 2) the $preview variable is not pointing to woo-preview-emails.php file correctly. It depends where you included the whole folder in relation to where you are pasting that function. Experiment with that and you’ll work it out for sure.

      Reply
  3. Ciska

    Hello,

    where can I find the woo-preview-emails.php (file)?

    Reply
    • Ciska

      Sorry….I found the file 😉 But I can’t get it to work… My function.php is located in my child-theme folder. I tried the following paths:

      $preview = ‘woocommerce/emails/woo-preview-emails.php’
      $preview = ‘superstore-child/woocommerce/emails/woo-preview-emails.php’

      $preview = ‘themes/superstore-child/woocommerce/emails/woo-preview-emails.php’

      Do you know what is wrong??

      Reply
      • Matt Cromwell

        Try this:

        $preview = get_stylesheet_directory . ‘woocommerce/emails/woo-preview-emails.php’;

        Reply
        • Ciska

          Hi, thanks for your reply! It still doesn’t work. I get an error. If I delete the space before the . than I don’t get an error, but I still don’t see the preview in my back office……

          Reply
          • Matt Cromwell

            I’ve updated the code at Github and provided a suggestion for child themes as well. See here: https://github.com/WordImpress/woocommerce-preview-emails/blob/master/README.md

            I think all that is needed for the example I provided above is to add a forward slash before woocommerce. So this would be the update:
            $preview = get_stylesheet_directory . ‘/woocommerce/emails/woo-preview-emails.php’;

            Of course if you are using a parent theme (not a child theme), then see the code I provided at Github instead.

          • Fernando Lopes

            For child themes use:
            $preview = get_stylesheet_directory(). ‘/woocommerce/emails/woo-preview-emails.php’;

  4. Kyle Held

    This would be perfect, but like many others, I couldn’t get it to work. I tried adjusting the path to woo-preview-email.php with no success. Please let me know if you have additional information since your original posting as this would be very useful.

    Reply
  5. Pieter Claesen

    Hi,

    I am kinda new to this, but I have a really basic question:
    I downloaded the repo from Github, but it contains more files than only the 3 .php files and image folder. There is a folder called ‘Assets’. Where do I put this on my FTP?

    Reply
  6. Laszlo

    Hey,

    I using custom header and footer for the emails, so I already edited both “email-footer.php” and the “email-header.php” files for my emails. How should I include these without any overwrite?

    Thanks

    Reply
    • Matt Cromwell

      I would use the ones that come with this script, then incorporate your changes from your files into them. There’s just a few important lines in both of those files that make the whole system work. I might add some inline documentation to more clearly indicate that to make it easier for instances like yours.

      Reply
  7. mike

    Hi Matt,

    just an FYI that Woocommerce has recently changed some action hooks in a recent update – which is causing your email viewer to pull in the headers and footers twice – so you get a nested email within an email effect! The solution is simply to remove lines 58,60 and 64 of your preview emails file.

    Hope this helps others out!

    Reply
    • Matt Cromwell

      Hi Mike, I’ll have to check that out. I’ll have to dig into that. There is some customizations in the header and footer templates that I don’t want to loose. I’ll update the article and the Github with the fix when it’s done. Thanks for the heads up!

      Reply
    • Matt Cromwell

      Hey Mike, I just tested this locally on the latest WooCommerce (2.3.9) and didn’t have duplicate headers at all. So, unless others confirm they have that problem as well, I think it might be something unique to how you set it up on your side. Can you provide any detail on the changes Woo made that you’re referring to that I can dig into?

      Reply
      • mike

        Hi Matt,

        running woocommerce 2.3.8 (yep, not ruling out a difference in 2.3.9) and wordpress 4.2.2

        Could well be something particular to my install (also running multisite, which I know does strange things sometimes), but I’d also had another issue with woocommerce and custom/overridden templates because of their recent update, as documented here: https://wordpress.org/support/topic/cart-sum-two-times?replies=10#post-6846946

        So assumed straight away that it was because of a woocommerce change. They recently removed some of their includes in template files, and substituted them for hooks/actions – which meant for me that certain elements were getting included twice – the same issue that was happening with your header/footer templates. I’ve fixed the issue for myself, and it may be an isolated thing for me. I’ll try with woo 2.3.9 tomorrow and will get back to you.

        Mike

        Reply
  8. Matt

    Thanks for the great article and code.

    I have found this paid plugin http://pluginterritory.com/shop/woocommerce-preview-emails/ that will have to be very good to justify not using your solution

    Reply
  9. James robins

    Hi. Great article. I had the same issue RE previewing templates so I made a WordPress plugin for this: https://wordpress.org/plugins/woocommerce-email-test/

    Reply
    • Matt Cromwell

      Hi James. Naturally, before I built this code I searched the repo and found your plugin. Like several others in your support forum I was unable to get it to work reliably. I also considered making this code into a plugin, but the truth is, this is a template for creating your own custom WooCommerce emails, and those typically are done within the theme. I didn’t want to do something unorthodox so I thought building out this resource as a starting point for others to learn how to customize their emails themselves was a good way to go. Thanks for stopping by!

      Reply
  10. Chase

    Thank you, this is great!

    Reply
  11. Pamela Lopez

    This is great!!!! It installed perfectly.. The only thing I noticed was where the email header text is supposed to be is blank. It’s blank on your sample animated gif above as well.. is there something I’m missing or a way to fix this? Will this also make the actual email go out to the customer without the heading as well? Thanks for your help!

    Reply
    • Matt Cromwell

      Hi Pamela,

      Ya, unfortunately I haven’t found a way around that. It seems WooCommerce inserts the header in a different way than the rest of the email. But your header definitely will still work.

      Since writing this email I was informed of another really useful plugin called Email Cop. It basically stops ALL emails from going out and let’s you see what they would have looked like with a simple preview screen. My script in combo with that is a pretty much perfect solution. Try it out! Thanks for stopping by!

      Reply
      • Pamela Lopez

        Ok thanks, I’ll check out that plugin.. thanks for your help!

        Reply
  12. joanna

    i do not have the function file or preview file. this is all is have

    http://screencast.com/t/M0BK1uWv

    Reply
  13. John

    Hi Matt thanks for putting this together, it looks great!

    Reply
  14. Bassscape

    Thanks, this is a great tool!

    Reply
    • Bassscape

      I should have added that I merged your header and footer files with the latest versions found in WooCommerce versions 2.3 and 2.4.

      Reply
  15. pipdig

    Wow this is awesome!

    Reply
  16. Adrian

    Wow, that’s fantastic. I’m working locally and it makes it much much easier to be able to see the emails! All with only 5 minutes to download and install…. great resource and delighted to have come across 🙂 I’m looking to add a custom field in to the customer-completed-order.php. Can I be cheeky and ask your advice on doing this. I already have tried but no joy. Cheers, Adrian

    Reply
  17. The Niche Think Tank

    The interesting thing about the preview and the email log, emails weren’t being sent out when we would send an update email, but when email log was installed, the email updates started working, go figure.

    Reply
  18. Caio Mar

    Hi! I’m not sure if I’m the only one, but in the email preview I get two headers and two footers. Something in the lines of:

    Anyone else? Maybe it is because I updated to WP 4.4 (??)

    Reply
    • Sam Cranwell

      I’m using WooCommerce 2.5.5 (on WP 4.5.2) and it now has Email preview built in. However it doesn’t give you an accurate representation of what the emails look like.

      This script would be great but it doesn’t seem to work with the latest version of WooCommerce. I get the same problem – doubled up headers and footers.

      Can it be adapted to work with latest version of WooCommerce?

      Reply
      • Caio Mar

        Hi Sam, Did you get it to work?

        My WC email preview is working fine now with the latest versions of WP and WC. For some reason the email header and footer were getting called twice, thus I was getting two of each every time. I can’t remember right now where it was though, but it was something simple, one line of code somewhere. I suggest tracing from woo-preview-emails.php how these two templates ( header and footer) gets included and go from there.

        I will keep this on the back of my mind and if I do remember, I will let you know. Soon I will have to work with email templating again… good luck

        Reply
      • KoolPal

        Hi, I am on WooCommerce 2.6.2 (on WP 4.5.3) and I just cannot locate any option to preview emails.

        Where can you see the ‘built in’ options to preview emails?

        Thanks.

        Reply
      • Matt Cromwell

        Just updated for compatibility with WooCommerce 2.6+ Thanks!

        Reply
    • Matt Cromwell

      Try again, it’s just been updated for compatibility with WooCommerce 2.6+

      Reply
  19. KoolPal

    Hi,

    Does this plugin still work with WooCommerce 2.6.2 (on WP 4.5.3). Would there be any modifications required?

    I am trying to use this with my child theme which has functions.php in a subfolder.

    I am still not clear if my relative path is incorrect OR if this plugin is not functional now.

    Please advise.

    Thanks.

    Reply
  20. Annie

    https://uploads.disquscdn.com/images/e2b518c717fbac0279ea59a0760fd53e5e6e2197344d42c94ee9a0951a7b4471.png
    Hi,
    I would like to add Email Customizer for WooCommerce to the list of plugins. It can help you customize the WooCommerce order mail templates without touching any core files. You can add your content with simple WYSIWYG editor. Drag & drop WooCommerce variables to mention customer name in greetings. You can design all the WooCommerce email templates in your unique style.
    Thanks

    Reply
  21. James Robin

    Hey. Have you seen this plugin that does just this? https://en-gb.wordpress.org/plugins/woocommerce-email-test/ – helped me a bunch!

    Reply
    • Matt Cromwell

      That didn’t exist when I created this snippet. I’ll give it a spin. But what I like about the snippet above is that it’s more than just previewing emails, it also helps you understand how to customize your WooCommerce emails as well.

      Reply
  22. Renato

    Very useful! Thanks for sharing 🙂

    Reply
  23. Mellisa

    Matt this is great, but there is no styling. When I go to Emails in Woocommerce Settings and view Email Templates, your email template page has no styling to it.

    Reply
  24. Dave Ebersole

    Hi Matt,
    I don’t want to change the content of the woo new-admin-order email just make it wider so it doesn’t take up 2 pages for a 2 item order.I can’t believe no one has wanted to make the order email wider. I just can’t seen to find the information on how to do it.

    Dave E

    Reply

Leave a Reply