How to Customize WooCommerce Order Confirmation Email – Tips and Tricks

How to Customize WooCommerce Order Confirmation Email – Tips and Tricks

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 your online business’ WordPress website.

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.

woocommerce email template basic customization


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.

basic WooCommerce HTML email template

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

woocommerce email notifications

In this case, I’ve picked 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 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

YayMail email customizer free 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.

A WooCommerce email template sample
My first attempt to customize a new order email

Other plugins to customize WooCommerce order confirmation email

If you are not a fan of drag and drop interface or advanced email structure, here are some alternative solutions: 😃

  • Kadence Email Designer: WordPress native customizer with some pre-made templates
  • Decorator: Simple and light-weight email editor using a left-hand customizer

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!

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

Recommendation

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
  • Polylang
  • TranslatePress
Purchase
Related Posts