google.com, pub-2394874653903681, DIRECT, f08c47fec0942fa0

How to Customize WooCommerce Emails (And Preview Them Before Sending)

 


How to Customize WooCommerce Emails (And Preview Them Before Sending)

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.

📚 Table of contents:

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.

emails tab to customize WooCommerce emails

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.

email sender options

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.

customize WooCommerce emails with images and text

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.

customize WooCommerce emails with colors

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.

manage button to customize WooCommerce emails

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.

enable notification

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.

subject heading and content to customize WooCommerce emails

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.

view template to customize WooCommerce emails

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.

copy file to theme

👉 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.

customize WooCommerce emails 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.

save button

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.”

preview link

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.

woocommerce email visual preview

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.

thank you order email

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.

change status to see new preview

Then it sends to your inbox for you to review.

order confirmation email from woocommerce

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

WooCommerce Email TestWooCommerce Email Test

Author(s): RaiserWeb

Current Version: 1.2.2

Last Updated: December 17, 2021

woocommerce-email-test.zip

Plugins that help customize WooCommerce emails

Several plugins provide advanced WooCommerce email customization tools, either expanding upon the current features in WooCommerce or completely overriding them for a more user-friendly (usually drag-and-drop) experience.

Here are some WooCommerce customizer plugins to consider:

You can also override WooCommerce transactional emails with an email marketing service, like OmnisendMailPoet, or Sendinblue, all of which offer ecommerce automation and additional options for things like abandoned cart recovery.

Customize your WooCommerce emails today

In this article, we covered:

  • Why you should customize WooCommerce emails.
  • How to customize the overall settings and design of your WooCommerce emails.
  • How to customize specific transactional emails.
  • How to take control of the email HTML if you have the experience.
  • Plugins to add more functionality to WooCommerce emails, like drag-and-drop and visual tools.

Most fledgling ecommerce stores can get away with the basic WooCommerce email customizations, but we recommend eventually paying for a premium email editor like one of the plugins or email marketing software we covered above.

Once you’ve figured out your store’s transactional emails, you can read our guide on WooCommerce email marketing to nail your marketing emails, too.

If you need any clarification about how to customize WooCommerce emails, or would like to share any tips you have with other users editing their emails, drop us a note in the comments!

Post a Comment

Previous Post Next Post