How to Preview and Test Your WooCommerce Emails (The Easy Way)

Struggling with how to customize WooCommerce emails? 😎

WooCommerce already offers automated transactional emails for over 10 actions like new orders, processed orders, and new accounts. However, you’ll probably want to customize those emails to make them your own.

In this step-by-step tutorial, you’ll learn how to customize WooCommerce emails using the built-in settings in WooCommerce, as well as some free or paid plugins you can use to gain even more control over your store’s emails.

Why should you customize WooCommerce emails?

  • To change from the default WooCommerce purple to a color more suitable for your brand.
  • To add personalization and a brand voice to email templates.
  • To change settings like the “From” name or “From” address.
  • To add media elements like a logo, header image, or animated GIFs.
  • To deactivate some of the automated messages that don’t fit your operation.
  • To link to support pages, upsells, or promotions.
  • To switch between HTML and text email types.
  • To preview what the email looks like before turning it on for automation.

How to customize WooCommerce emails

With just the built-in settings in WooCommerce, you can customize multiple parts of your WooCommerce emails, including:

  • Email sender options ⚙️
  • The general email theme 🎨
  • Specific email content 📝

We’ll show you how to customize these built-in settings below. Then, after that, we’ll also share some WooCommerce email customization plugins that give you even more flexibility if needed. 👇

Step 1: Go to email settings in WooCommerce

In your WordPress dashboard, navigate to WooCommerce > Settings > Emails. Here, you’ll see a headline for Email Notifications, along with a list of those default notification emails that WooCommerce already has configured for you.

Step 2: Customize the email sender options and template

Scroll past the list of email notifications to find the section called “Email sender options.”

You’ll see two fields:

  • “From” name: the name customers see when they receive an email—stick to the business name, or potentially a real person if they’re part of your branding strategy.
  • “From” address: the “from” email address that users can contact if they reply to the automated email.

Modify those fields as needed.

Under the Email Template section, you can start customizing elements like:

  • Header image
  • Footer text
  • Base color
  • Body background color
  • Body text color

If you want to add a custom header image to the email, paste the URL of the image into the Header Image field. You can host an image in your WordPress Media Library and get the image URL from there.

👉 We also recommend removing the “Built with WooCommerce” text from the footer. You are welcome to add anything else you want in the footer.

Further down in the Email Template area, you’ll find color settings for the general WooCommerce email template. As mentioned before, WooCommerce automatically adds its default purple as the base color, which is not what you want when running an online store.

Choose a color that corresponds with your brand as the Base Color and consider changing the other color fields if you need to.

Click Save Changes when you’re done.

Step 3: Customize specific WooCommerce emails

From New Order emails to Completed Order emails, WooCommerce provides preset templates that are automatically sent to site admins and customers to keep everyone informed about orders. Yet, you’ll want to customize some of these emails to include your own content and to remove some unnecessary WooCommerce defaults.

Complete these individual email customizations by clicking Manage next to the email you want to edit. It’s not a bad idea to start with the “Processing Order” and “Completed Order” emails, since those are the most commonly viewed by the customer.

Walk through the following fields based on your needs:

  • Enable/Disable
  • Subject
  • Email heading
  • Additional content

👉 We suggest keeping all WooCommerce emails enabled unless you have a unique circumstance where you don’t need one of them, or if you intend to use a separate plugin for transactional emails.

Fields like SubjectEmail Heading, and Additional Content dictate your overall email content, so adjust them as needed.

Click the “?” icons to see which dynamic placeholders are available to insert into the content fields. For example, you can use a placeholder to have WooCommerce fill in a link to your website on each email.

Step 4: Make it an HTML or plain text email

Click the Email Type field to see your options. Pick one of the following:

  • Plain text: emails with no images or formatting
  • HTML: emails with rich content like images, tables, and formatting
  • Multipart: this one dynamically switches between plain text and HTML based on the user’s email client, since some clients don’t support HTML emails

Step 5: Consider editing the HTML template

At the very bottom of the page, you’ll see a section called “HTML template.” WooCommerce doesn’t have a drag-and-drop editor for its emails, but you can customize each email’s HTML code.

Click on the View Template button to see its code.

WooCommerce locks its default HTML template, so you can’t edit anything. However, you can click the Copy File To Theme button to override and edit the template.

👉 After that, you’re able to put your cursor into the text editor and make changes. We only recommend using this section if you’re skilled with HTML.

If you don’t feel comfortable editing this code directly, you might want to hire a WordPress developer. Or, you can try one of the WooCommerce email plugins we’ll share in the next section.

And that’s how you customize WooCommerce emails! Click the Save Changes button to finish the process.

How to preview WooCommerce emails

You must preview your transactional emails before they are sent out to customers. This way, you can check for misspellings, WooCommerce branding that needs changing, and opportunities for promotions or upsells.

Here’s how to preview your WooCommerce emails.

Step 1: View a visual preview of your general email template

Under WooCommerce > Settings > Emails, find the Email Template section and click on the link that reads “Click here to preview your email template.”

That opens a new browser window showing the email with your specified general email settings. You should see new colors, a header image, and an edited footer if you changed all of that. Keep in mind that the content for the template preview remains generic.

Step 2: Run test transactions to view the individual emails with dynamic content

You most likely want to see the actual emails that go out to customers, but WooCommerce lacks the features to view those visual previews. Instead, you must run test transactions to trigger the emails to your own inbox.

Here’s how to do it:

  1. Make sure you have WooCommerce Payments, and the Stripe payment method, activated.
  2. Add an item to your cart and fill in the information as if you were a customer.
  3. In the Email field, add your email address.
  4. In the credit card field, use one of the Stripe testing cards to process a payment.
  5. Finish checking out.

The test transaction should send you an Order Processing email, which allows you to see how the emails render for customers. Check that the dynamic tags appear correctly, and that all of your branding and inserted text shows properly.

To trigger other emails, go to WooCommerce > Orders, and adjust the Status field to something else. As an example, you might switch it to Completed to trigger the Completed Order email from WooCommerce. Make sure you click the Update button to save the change.

Then it sends to your inbox for you to review.

To simplify the process, you can consider a plugin like WooCommerce Email Test.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *