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?
- How to customize WooCommerce emails
- How to preview WooCommerce emails
- Plugins that help customize WooCommerce 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
- Step 2: Customize the email sender options and template
- Step 3: Customize specific WooCommerce emails
- Step 4: Make it an HTML or plain text email
- Step 5: Consider editing the HTML template
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 Subject, Email 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
- Step 2: Run test transactions to view the individual emails with dynamic content
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:
- Make sure you have WooCommerce Payments, and the Stripe payment method, activated.
- Add an item to your cart and fill in the information as if you were a customer.
- In the Email field, add your email address.
- In the credit card field, use one of the Stripe testing cards to process a payment.
- 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.
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:
- WooCommerce Email Customizer: Offers more advanced tools to adjust the overall style of your emails, but not the text or content.
- Decorator – WooCommerce Email Customizer: Edit the style, content, and media elements within each email, all while using a visual builder.
- Metorik: Override the default WooCommerce emails for full customization control over your automations and designs.
- Kadence WooCommerce Email Designer: Allows you to customize the built-in WooCommerce emails in the WordPress Customizer for more visual control.
You can also override WooCommerce transactional emails with an email marketing service, like Omnisend, MailPoet, 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