How to Customize WooCommerce Order Confirmation Email (With and Without a Plugin)

How to Customize WooCommerce Order Confirmation Email (With and Without a Plugin)

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 good reliable emails including order details and 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 settings and deep customization, hop on to the plugin solution in which we’re using YayMail to customize all WooCommerce transactional emails.

1. Customize WooCommerce Order Confirmation Email Without a Plugin

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, or colors. This is where a third party plugin comes in to help.

2. Customize Emails Using YayMail Customizer Plugin

Customize WooCommerce order confirmation email with YayMail

YayMail is a specialized drag and drop WooCommerce email customizer using drag and drop interface and live preview editor.

After activated, you can easily access this email designer by going to WooCommerce > Email Customizer.

This plugin adds a brand new side panel in which 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 button, image list, image box, divider, multiple columns, etc.

The video below clearly shows how you can customize every block from the top to bottom.

  • Change logo and adjust its size
  • Tweak background color, heading color, text color
  • Block and content padding
  • Add a call to action and edit the button color, shape, size
  • Show navigation links and social media

Moreover, there are advanced elements 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 and edit it however you want.

Other plugins to customize WooCommerce order confirmation email

Here are some alternative solutions if you are not a fan of drag and drop interface or not fancy advanced email structure: 😃

  • 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 while 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 enable 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.

Related Posts
Leave a Reply

Your email address will not be published.Required fields are marked *