WooCommerce order confirmation email is one thing that you should never overlook when it comes to boosting sales and improving store branding. It is the first thing your customer receives after placing an order via your WooCommerce website.
So you have to send reliable emails including order details, order status changes, and other useful resources. With this thoughtful means of communication, your customers will remember your brand and know where to find you when they need a particular product.
In today’s tutorial, I’ll guide you step by step on how to customize WooCommerce order confirmation emails sent out by WooCommerce standard workflow.
The first section is a non-plugin solution, which is very basic and merely relies on default options. If you want advanced options, hop on to the plugin solution in which we’re using the YayMail framework to customize all WooCommerce transactional emails.
1. Customize WooCommerce Order Confirmation Email With Default Options
Basic options in WooCommerce order email settings
WooCommerce email customization is quite sufficient for newly opened stores. It allows you to add your store logo and choose a color profile to fit your brand.
To edit the default template color and such, go to WooCommerce > Settings > Email section.
Here you can set the “From” email address and its display name, i.e. your store — from whom the emails are sent.
What else can you customize?
- Header image: your logo, store image, seasonal banner…
- Footer text: your website URL, contact links, social networks…
- Base color: the color that fills your heading’s background, linked text, etc. — should be the same color code of your website’s primary color
- Background color: the full-width area that lies outside of the email template
- Body background color: the background color for the email main text/paragraph
- Body text color: the color for email text content
As for the general email template appearance, you can add your brand image/logo by pasting its File URL after uploading it to WordPress media library. Please note that basic WooCommerce email customization options won’t allow you to resize your logo. That’s why you should prepare the right image dimension before adding it to the email templates.
After fine-tuning the email design, you can click on the link Click here to preview your email template to preview the customized email sample in a new tab.
This is just a base view of your WooCommerce emails with dummy text. To edit email content, you got to find each email and choose to manage it. This will be demonstrated in the next step.
Edit order confirmation email notification content without a plugin
By default, WooCommerce allows you to choose email types including plain text, HTML, or multipart. To change the subject and content of the email notifications, navigate to WooCommerce > Settings > Email, pick an email you would like to edit then click Manage.
In this case, I’ve picked the Processing Order email to send to my customer to notify them about their order confirmation. Here, you can edit the email subject, heading, and additional content.
To enhance your email templates by adding extra content and call-to-actions, you gotta modify the theme templates. For instance, if you wish to get buyers to go back to your online shop and buy another item with a coupon code, you would need to place PHP snippets at the bottom of your functions.php file (child theme). The PHP snippet goes like this:
/**
* @snippet Add extra content to order processing email
*/
add_action( 'woocommerce_email_before_order_table', 'yay_add_content_specific_email', 20, 4 );
function yay_add_content_specific_email( $order, $sent_to_admin, $plain_text, $email ) {
if ( $email->id == 'customer_processing_order' ) {
echo '<h2 class="email-upsell-title">Get 20% off</h2><p class="email-upsell-p">Thank you for shopping at YayCommerce! Come back and use the code "<strong>BACKFORMORE</strong>" to get a 20% off all products! </p>';
}
}However, this section only allows you to edit the major text in the email template. You have no options for buttons, columns, images, or footer backgrounds. This is where an email customizer plugin comes in to help.
2. Customize WooCommerce Custom Emails Using YayMail Plugin
Reasons to use YayMail
YayMail is a powerful WooCommerce email customizer using a drag and drop interface and a live preview editor.
There are actually a variety of email customizer plugins that can help design your email. However, YayMail is the best framework because:
- It’s completely free – YayMail offers fully customizable options for all 11 default Woo email templates.
- It works by drag and drop – As I have no coding knowledge and I don’t want to modify the theme code either.
- It has a live editor and lets me preview the template on desktop/mobile devices.
- Sending a test email is just one click away.
I have a bunch of other reasons including premium-only features to go ahead. But for now, that’s just about enough to give it a go.
So go ahead to install and activate it from your WordPress dashboard, then you can easily access this email builder by going to WooCommerce > Email Customizer.
Customizing order emails with YayMail free plugin
This plugin adds a brand new side panel where you can find advanced elements to customize all transactional emails.
These elements are organized into basic, general, and WooCommerce categories. From this sidebar, you have powerful options to make your emails prettier such as additional buttons, image lists, social media icon boxes, dividers, multiple columns, etc.
The video below clearly shows how you can customize every email block from the top to bottom.
- Header: Change the logo and adjust its size
- Text format: Tweak background color, heading color, text/link color
- Spacing: Block and content padding
- Button: Add a call to action and edit the button color, shape, size
- Company info & more network: Show menu, sub-menu, navigation links and social media
Moreover, there are advanced blocks for more complicated email templates with many details. For example, if you want to display a 3-column row in the email body, you don’t have to craft HTML from scratch.
This plugin is built-in with ready elements so that you just have to drag and drop the element in. Select, move and edit it however you want.
Within a few minutes, you can build a bespoke WooCommerce order confirmation email template like the sample below.
Additionally, with YayMail free version, you can add extra sections to your email. For example, a section of frequently asked questions to help your customers better navigate your store.
Below you will find more tips and tricks to design email templates.
Add targeted product upsells in your email receipt
Want to bring customers back again? Why not recommend some similar products based on the purchased item!
Thanks to YayMail’s premade blocks, you will be able to add a grid of featured best seller products, related products, or new arrivals to the email receipt without any HTML or coding knowledge required.
Set header/footer as default in every WooCommerce custom email
For reusable elements like header logo and footer, you can keep it consistent across all templates by setting it as default.
Once you finish customizing the content and design, choose Footer block, scroll down, and tick Set as default. This helps make all other email templates in your store share the same content and design of logo and footer.
Alternatively, you can also choose to copy this footer block only to those templates that you wish to put in use.
Change email text link color
You can customize every aspect of the email template such as making the link color match your color schemes.
For instance, to turn the default link color of purple to orange, simply follow these steps:
- Select Settings (i.e. global settings) and expand Email Settings
- Choose the Text link color and pick the new color. Once you choose a new color, it will automatically show in the email editor on the right.
- Then, just click Save to keep the changes you’ve made.
3. Send Dynamic Email Content With Conditional Logic
Conditional logic enables email template creators to insert extra content into their emails, meaning that the email content can change based on certain conditions or actions. This is a powerful tool that can be used to create highly personalized and targeted emails.
Below you will find a detailed step-by-step video tutorial to help you send dynamic email content.
As a growth hacker, you can ensure that the message conveyed in the transactional email is always relevant to the recipient. This conditional logic plugin allows you to show/hide each email content block based on your own rules, to name a few:
- When the order total is less/greater than a specified amount.
- When the billing country is in the USA, Canada, or Japan, etc.
- When the products in the purchase belong to a specific category.
- And other conditions which are related to shipping method and product metadata.
And below are some of our designs for the WooCommerce order confirmation email template built up with YayMail.
Final thoughts
Customizing WooCommerce order confirmation email used to be hard. You would have to edit by custom coding into things directly inside the templates. And it was really easy to mess up the files.
So it’s great to see you’ve got an option like the YayMail – WooCommerce Email Customizer! It enables you to design different aspects inside WooCommerce order confirmation email and custom email templates.
The whole process becomes easy with YayMail, so get it for free now.
Things to consider when editing WooCommerce email templates
You can be an excellent designer by nature. However, it is not recommended that you override every email block aspect with your own creativity. Since the email recipients use various email clients/software to read emails, many elements like text font, font family, padding, etc. might not show correctly on their end as seen on your end.
To send out the order confirmation emails that look good on most devices and clients, make sure to send test emails! That said, it’s been a must to choose an email editor/customizer that comes with a handy Send a test email button, just like what’s featured in YayMail. Make sure your chosen plugin has your back!
Recommendation
If you use one of the extensions mentioned below on your WooCommerce site, we recommend an upgrade to the YayMail Pro version for full compatibility. The premium version allows you to add lots of variables, shortcodes, custom text, order tracking information into the WooCommerce order confirmation email template.
- Shipment Tracking by WooCommerce
- Checkout Field Editor by WooCommerce
- Order Status Manager by SkyVerge
- Admin Custom Order Fields by SkyVerge
- Advanced Shipment Tracking by Zorem
- YITH WooCommerce Order Tracking
- Flexible Checkout Fields by WPDesk
- Custom Order Status by TycheSoftwares
- Checkout Field Editor by ThemeHigh
- WooCommerce Show Attributes
- Back In Stock Notifier | WooCommerce Waitlist Pro by codewoogeek
- WPML | WooCommerce Multilingual
- Polylang
- TranslatePress
If you use third party WooCommerce extensions that add extra email templates to their workflows, be sure to look for some YayMail Integration Addons to support them.
