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 Built-in Options
Basic options of WooCommerce order confirmation emails
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.
However, this section only allows you to edit the major text in the mail. You have no options for buttons, columns, images, or footer background. This is where an email customizer plugin comes in to help.
2. Customize Emails Using YayMail Plugin
Reasons to use YayMail
YayMail is a powerful WooCommerce email customizer using drag and drop interface and 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 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.
Start 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 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.
Below you will find more tips and tricks to design email templates.
How to set header/footer as default
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 at 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.
How to change email text link color
You can customize every aspect of the email template such as making the link color match with 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 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.
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 aspects with your own creativity. Since the email recipients use various email clients/software to read mails, 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!
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, which enables you to design all the various different aspects inside that particular email.
The whole process becomes easy with YayMail, so get it for free now.
If you use one of these extensions on your WooCommerce site, we recommend an upgrade to YayMail Pro version for full compatibility.
- 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