As Featured In Fatstacks

How to Preview WooCommerce Emails – Design & Template Customisation

Published Categorized as Ecommerce Stores

So WooCommerce does a lot of the heavy lifting when it comes to providing standard transactional email templates, without the need for a plugin. In many ways, it’s plug and play without the ability to “tinker”.

Most eCommerce store owners using WooCommerce however will be integrating with a transactional email and email marketing automation solution such as Klaviyo, Jilt or Mailchimp – so actually the number of emails that WooCommerce itself sends can be reduced significantly or completely replaced.

How to Preview & Test WooCommerce Emails

This article contains affiliate links which means we may earn a small commission if you purchase plugins and services we mention at no extra cost to you. We only recommend the best plugins and services – which we have used and can recommend.

That being said, if you are using some of the built in, default or standard WooCommerce emails such as; Processing Order (new order), Completed Order (Order Shipped), Reset Password etc. the only visibility you’ll have of the design of the email is through the “Click here to preview your email template.” link at the bottom of the WooCommerce > Settings > Emails screen.

Preview WooCommerce Email Template

This preview however just populates a generic template and doesn’t show you how each of your WooCommerce emails displays to the customer and email recipient.

So you’re left wondering; “What does the WooCommerce Order Received email actually look like?”

A few solutions come to mind:

  1. Setup a test order and manually perform all the actions to generate all the emails (wow what a pain in the arse)
  2. Use a plugin that allows you to click “test email” and receive that email directly to your inbox (EASY!)
  3. Don’t bother…

Number 1 is a pain

Number 2 is my advice

Number 3 is a legitimate answer. What are you actually going to do when you receive the email? Based on how it looks, have you got a plan to customise the WooCommerce Emails?

If you haven’t got a plan to customize the design of WooCommerce transactional emails – you could always formulate one. So I’ll suggest a couple of ways to customize the WooCommerce Emails using Tools and Plugins for editing the design of WooCommerce customer emails.

How to test or preview WooCommerce emails using a Plugin

Using the Preview E-mails for WooCommerce plugin you can simply send yourself the WooCommerce emails you want to test – so you can see exactly how they look when they’re received into your customer’s inbox.

You wouldn’t however be the first WooCommerce store owner to only discover what these emails look like AFTER your customers have received them!

Here’s the FREE Plugin for previewing WooCommerce transactional emails

OK you received the emails and they’re not quite what you had in mind for your killer new brand.

Let’s start by sizing the issue…

How to Customize WooCommerce Email Templates for Transactional Emails

Using Mailchimp with WooCommerce to Customize Transactional email

If you’re using Mailchimp with WooCommerce, the standard Mailchimp plan will take over the sending of the following emails:

  • Order Confirmation Email
  • Shipping Confirmation Email
  • Refund Confirmation Email
  • Cancellation Confirmation Email
  • Abandoned Cart Email

But it will leave the following emails to be sent by WooCommerce (via your configured email client through SMTP, like Gmail or SendInBlue):

  • Customer Note
  • Reset Password
  • New Account

Plus a few others depending on what other WooCommerce extensions you have installed.

The “New Account” is obviously an interesting one, as not all store owners will expect their customers to create accounts during the checkout process. Even if they do create an account, you may simply want to send the order confirmation email as opposed to both an “order confirmation” email AND a “Welcome to your new account” email.

Within Mailchimp you can welcome “New subscribers” (new customers who’ve opted in to marketing message AS WELL) meaning that would be 3 emails for a single order being sent to your brand new customer. Probably not ideal if they’re sent in quick succession.

Back to the point.

You may actually only be left with the “Customer Note” and “Reset Password” emails using the default WooCommerce emails layout – customised with your brand colouring of course using WooCommerce’s limited built in ability to customise the email designs.

Is this such a big deal?

I’d suggest in the 80:20 rule of marketing, your efforts are better put to use elsewhere in your business. But I appreciate you may want to customise your WooCommerce Transactional emails – so I’ll suggest a couple of options

Using Jilt with WooCommerce to Customize Transactional email

Check out JILT Here

In much the same way Mailchimp provides a bunch of Transactional emails with a paid plan, so does JILT, including:

  • Receipts
  • Shipping Confirmations
  • Order Cancellations
  • Refund Notifications
  • Completed Orders

There’s a lot more detail on this JILT Web page explaining exactly how JILT can help you with transactional email WITHOUT needing to sign up to a separate transactional email service like SendGrid.

Check out JILT Here

Customise WooCommerce Email Template Layout & Design with WooCommerce Email Customizer

This plugin is available from WooCommerce and adds a small level of functionality beyond what’s available in core WooCommerce.

But that small level might be sufficient!

Not to mention, this plugin also comes with the ability to both Preview the visual contents of the email but also send a TEST email so you can see what the newly designed email looks like in your email inbox.

Customisation options are limited – so take a look at what’s possible before buying this plugin as it might not provide the level of customisation you’re after.

Customise WooCommerce Email designs with Email Customizer Plus for WooCommerce

This plugin is developed by Flycart and allows you to take control over your transactional email design in WooCommerce.

It’s worth noting that Flycart offers the ability to customise the WooCommerce email templates significantly – to the point where the design is possibly better than you’d achieve using the standard transactional email templates with your transactional email provider such as Jilt, Mailchimp or Klaviyo.

In this case, you may be better off switching ALL transactional emails back to WooCommerce and using an email delivery service such as SendInBlue

Sending your transactional emails via SendInBlue wouldn’t replace Mailchimp or Jilt.

You’d simply be managing your transactional email using a combination of WooCommerce and SendInBlue, whilst you’d use Mailchimp, Klaviyo or Jilt to send your “marketing” emails and “Marketing Automation” flows.

You don’t need to know any code to be able to customise with Flycart and again, you can send test emails and bunch of other features come with this pretty awesome feature rich email customisation plugin.

Check out Flycart Here

Customise WooCommerce Email Templates with code… (not suggested!)

WooCommerce provides the ability for us to “Download” the existing PHP Email template to give us a starting point for customisation.

This is pretty awesome as it means you don’t actually need to be a “competent coder” to be able to make minor tweaks.

WooCommerce then provides instructions on where to save your new template file so that it can use YOUR email template and NOT the WooCommerce Default Email Template.

You’ll find the email template at the bottom of each of the “Email Management” screens and it says the following:

HTML template
To override and edit this email template copy woocommerce/templates/emails/customer-processing-order.php to your theme folder: <theme-name>/woocommerce/emails/customer-processing-order.php

They also provide a handy button that says “Copy to theme”

WooCommerce Email Template Customization

This basically automatically saves a copy of the template into the correct folder so you can go ahead and edit the copy directly in the theme folder.

If you don’t see the above messages or the “Copy to theme” button, it’s likely because this line of code in your wp-config.php file:

( ‘DISALLOW_FILE_EDIT’, true )

You’ll need to change the “true” to “false” and this will enable this feature in your WooCommerce settings.

Incidentally, this will also add another option under the “Appearance” tab in WordPress called “Theme Editor” – you can steer clear of this one. But the adjustment of this setting is what will have caused this.

If you don’t know how to access your wp-config.php file to edit it, you shouldn’t be thinking about editing the php email template provided by WooCommerce.

So that’s a good natural quality check point right there!

How to test WooCommerce emails are being sent

If you’re worried that WooCommerce emails aren’t being sent (or you’ve noticed you’re not receiving WooCommerce emails) you want to switch on a form of logging so you can see if it’s an email sending issue, or an email receiving issue.

If you want to log emails, you have a few choices in terms of plugins. Here are a couple of choices:

If you find out that emails are being sent, but not being received – this could very well be an email server configuration issue. This is an area that SO MANY WooCommerce store owners trip up on – as it’s a reasonably technical area that has extremely poor documentation on the WooCommerce website. This is possibly because there are a number of configurations you could choose to use that don’t involve the core WooCommerce plugin – so it would be difficult to provide documentation on every possible setup.

That being said, if you’re struggling with WooCommerce emails going to spam, I wrote a guide specifically walking you through the steps you need to take to ensure your email server has all the correct verification, authentication, DKIM and SPF record requirements setup. You may not have even been aware of those words until, now – don’t worry, you’re not the only one!

Take a look at my guide on how to prevent WooCommerce emails going to Spam

Wrapping up

This has been a quick look at how to Preview WooCommerce Emails – we’ve dived a bit deeper, but it’s worth evaluating what you’re trying to achieve before heading too far down a path.

Hopefully I’ve provided some clarity.

Of course, if you’re still looking for somewhere to host your WooCommerce store, we recommend SiteGround WooCommerce Hosting and you check out exactly why we know it’s the best choice for your eCommerce business in our SiteGround WooCommerce Hosting Review.

You may have search for:

how to test woocommerce emails

woocommerce test email

woocommerce email templates

woocommerce test order

woocommerce send test email

woocommerce preview emails

woocommerce email templates plugin

woocommerce email template

woocommerce new order email

woocommerce email confirmation

woocommerce emails

woocommerce order email notification

woocommerce email settings

edit woocommerce emails

woocommerce email notifications

woocommerce preview emails

woocommerce email notification

customize woocommerce emails

By Ashley Pearce

I'm the founder of Future State Media, a "small-on-purpose" creator-focused SEO agency skilled in helping creators systematically generate traffic, build audiences and maximise their monetisation whilst staying true to their brand.