Published under WooCommerce
Last updated on

How to Customize WooCommerce Email Templates

An email has a great role in online marketing, but you have to bring value to inboxes, not noise. Understanding what users respond to, allows you to get better with every email. The more you engage with customers the clearer things become and easier to determine what you should be doing. When creativity flows curiosity is stoked.

In general, we all have curiosity when we find something to be creative in any platform. The same is to happen with online marketing, here the mode of communication with our customers is through emails. It is important that emails are customized creatively for better results. Transaction emails generally have the details of the order that the customer has placed in the store.

A WooCommerce store owner can convert a visitor into a long-term customer through effective transactional emails. What if these transactional emails are customized with some additional features that result in an increase in your revenue? Let’s achieve this with the help of the WooCommerce Email Customizer plugin.

WooCommerce Email Customizer enables full customization of your transaction emails. Customize color, header, footer, logo, link to your social network, use shortcodes to include dynamic data - all done using WooCommerce Email Customizer with Drag and Drop Email Builder.

Customizing an email with the use of special formatting techniques can often enhance the tone and appearance of the message you are sending. Continue reading this article to learn more about the ways you can customize the transactional email.

Why Customize Email in WooCommerce?

WooCommerce Email Customizer is one of the most effective plugins to customize transactional emails. You can send a customized order email with WooCommerce Email Customizer using drag and drop email Builder.

Predefined WooCommerce email templates can be easily imported and can be used as per your requirement.
Dynamic information can be added using shortcodes. WooCommerce stores also support multi-language.

You can send email templates for different order statuses of respective customers. The Drag and Drop feature is so handy that you can design and customize your email template easily.

As an online merchant, your target is that your website must sell more and look its best. Don’t you think your store’s email should give it’s best?

WooCommerce Email Customizer helps to customize your emails effortlessly. The plugin upgrades the store's email notifications with much more effective designs. The most important feature is no duplicate emails will be sent.

Benefits of WooCommerce Email Customization

Generally, transactional emails are a sort of interaction between the store and its customers.
Transactional emails play a crucial part while you are running an online store and moreover it is the only mode of communication to be in contact with your customers.

It is necessary that these mails are aesthetically pleasing and appealing so that the customers come back to your store. This would eventually boost your store’s revenue. This is definitely achievable if you customize your WooCommerce emails with the help of a plugin.

Let’s look into the benefits of WooCommerce Email Customization

  • An elegant email customizer with drag and drop editor allows you to customize order emails interactively.
  • It provides various templates to design your mail, once created they can be saved and reused later.
  • Less time consuming, as you need not have to start from scratch in order to design your email
  • You can style your email template using CSS and also add your custom styles.
  • It allows you to preview the email templates before it reaches your customer.
  • It supports Multi-Language.
  • Shortcodes help you to add dynamic information for your order. [Dynamic information like order details, customer information, billing address, shipping address and more]

WooCommerce Email Customizer Templates

With the help of the WooCommerce Email Customizer we can customize the following email templates effortlessly:

  • New Order - Sent when a customer places a new order.
  • Canceled Order - Sent to the customer when they cancel an order that has been placed.
  • Failed Order - Sent when the customer fails to do the payment for the order placed.
  • Order-on-Hold - Contains the details after the placed order is on-hold.
  • Processing Order - Sent once the customer completes the payment and it contains the order details.
  • Completed Order - Sent to the customer once the order has been completed and it mentions that the order has been shipped.
  • Refunded order - Sent to the customer when the orders are marked as refunded.
  • Customer Invoice/Order details - It contains order details along with the payment links.
  • Customer Note - To give any note to the store by the customer.
  • Reset Password - Sent to the customer when they request a password reset.
  • New Account - Account Sign Up page, sent to the customer for sign up at the time of checkout.

Drag and Drop Builder in WooCommerce Email Customization

Drag and Drop builder in email customization can customize the transactional emails more effectively.
It makes the email template to be more appealing that makes your customers come back to you. This would eventually increase your brand value.

You can add a logo, header, footer, images to make your email template more interactive. It is like a page-builder where you can drag and drop image blocks, paragraph blocks, text blocks and also edit them as required.

The most creative feature in the plugin is it supports “Next Order Coupon” by integrating Retainful with Email Customizer plugin.

Engage your Customers by providing offer codes for their next purchase. A dynamically generated coupon code can be provided to the customer in their order notification email. This feature would really make the customers purchase from your store regularly.

Installation of WooCommerce Email Customizer

Download and Install WooCommerce Email Customizer with Drag and Drop Email Builder in your WordPress Admin.
Step 1 - Login to WordPress Dashboard Click Plugins-> Add New

1 Add new plugin
Step 2- Click on “Upload Plugin”
Step 3- Click on “Browse” and select the Email Customizer plugin package 

2 upload pluginHit the “Install Now” button. Now, the plugin will be installed successfully.
Step 4- Click on “Activate Plugin” to finalize the installation process.3 activate plugin

Once installed and activated in WordPress Dashboard,
Click on WooCommerce -> WooCommerce Email Customizer

4 wc email customizer

To be more clear with the installation process, you can check the installation guide from the documentation section.

Create and Customize your WooCommerce Email Template

WooCommerce Email Customizer comprises of three major parts that are essential for crafting a modernized transactional email.

  • Header section
  • Body of the email
  • Footer section

Get to know how to harness the real power of WooCommerce email customization in this module.

The drag and drop email editor present you to select an Order. It is just considered as a sample email template with dummy data. 

5 email editor

The Email design editor allows you to select the language [as it supports multi-language], the status of the order and the respective order. This feature is just to have a real-time preview of your email design.

As mentioned earlier, shortcodes are used for entering dynamic data like shipping address, order number, order total etc..the email templates are saved along with their respective shortcodes. When a customer makes an order, only the email design is used. The shortcode will be replaced with the dynamic data of the respective element.

WooCommerce Email Customizer with Drag and Drop Builder has several tools that would help you to customize your email template interestingly.
The below listed are the powerful tools in Drag and Drop Builder. 

6 drag and drop tools

Let’s get in detail with the features

Header Section of the email

The header part should contain a business logo, title, etc. Let’s see how to add a logo and the title for a New Order email.

Logo Image: To add your site’s or company’s logo
The top-most icon in the left panel (drag and drop builder) to add the business logo to your email. Drag and drop this icon will insert the default logo. You can also edit and upload your own business logo here. 

6A logo tool

Title and Subtitle: To insert the title and subtitle for your email template.

The second icon in the left panel. This icon allows you to insert title and subtitle. Drag and drop this icon in your email template and edit the element and add your own title/subtitle.

On the mouse hovering each element, you can see the icons to delete/ move /copy as shown below.

7 edit title

Editable text box: To add an editable text box inside the template.

This icon is after the “Shipping Address” icon, it can be used to add the required text anywhere in your template.

8 edit textbox

Divider: This icon is next to “Title and Subtitle” it is used to add a horizontal line between any two blocks.

Body of the email

The body of the email may contain order details, address information (billing/shipping), customer information, the status of the customer order like completed, shipped, etc. Let's see how to add dynamic information using drag and drop features.

Order item: Used to add order details to your email. Also, you can add and modify the style of the table

9 order details

Order Item icon is used to add information like the order number, product subtotal, quantity, payment method, in a table format. You can also edit this element and even style the block by adding color to the table.

While editing the order table you can see it’s shortcode in the text editor(right panel) as shown below

10 shortcode order

Billing Address: To enter the billing address of the customer, the shortcode can be viewed in the text editor.
Shipping Address: To enter the shipping address of the customer, the shortcode can be viewed in the text editor. 

11 shipping and billing

Billing and Shipping Address: Displays billing and shipping address in 2 columns. The shortcode can be viewed in the text editor.

Billing, Customer details and Shipping Address: Displays billing, customer details, and shipping address in 3 columns. The shortcode can be viewed in the text editor.

Next order Coupon: To add next order coupons to the email template.

This is to provide a coupon to your customer which can be used in his/her next purchase. It’s an additional feature that makes your email to be more interactive and appealing.

12 next order coupon

Background Color: To change the background color of the email template.

Short Codes List: Displays a list of shortcodes that can be included while editing an element.

The shortcodes are available in two places. One is at the top of the page, and the other is at the bottom of the Drag and Drop Email Builder. 

13 short codes

Once you click on any of these, a popup will be displayed with the list of shortcodes as shown below.

14 list of shortcodes

The respective shortcodes are included while editing that particular element.

For example:

[woo_mb_shipping_adaddress] - To Get Shipping

While you include the above shortcode to your email, the shipping address details will be displayed.

Custom Shortcode: You can also create custom shortcodes in order to create the shortcodes to get the fields from a third-party plugin.

Footer Section of the email

Footer part of the email contains a footer text (optional), social links, next order coupon (optional), shortcodes, clickable button, etc. Let us see how to create a footer for the template.

Footer Block: To add editable footer block to the template. You can include your own text like copyright information and disclaimers.

15 footer block

Social Icons: To add social buttons to the template.

Adding social icons to your email is another way of marketing your company or store. Use this icon to add social buttons to your email.
Facebook, Twitter, YouTube and more - these icons can be included in your mail.

Clickable Button: To add a subscription button.

Drag and drop this icon to add a button link to your URL. After adding this element you can change its text, URL and background color of the button
For eg, “Click here to Subscribe for Newsletter”

Once you are done with the customization, Drag and Drop Builder allows you to have a preview of your email design additionally, you can even send a test mail to get an understanding of the functionality.

Find the below image where an Email template is designed for “New Order”

15B final screen

Now, enjoy customizing your email with the drag and drop builder features and make your customers feel pleasing about your store.

Basic Configurations in WooCommerce Email Customization plugin

Basic settings of Email Customizer can be modified as per your requirements.
The settings modified here will be reflected in the email template, which would be customized further with the Drag and Drop Builder.

Let us look into the basic settings in detail.

Click on “settings icon” at the left side of the top to configure the basic settings.

16 settings icon

This will navigate you to the Settings page.

17 basic settings page 

General Tab settings

License Key - Validate your license key for future updates.

Display payment instruction above order table - To enable/disable the payment instruction above the order details.

Show product image - To enable/disable the image of the product in the order table.

Show product SKU - To enable/disable the SKU of the product if it is provided while you add the product to your site.

Order Item table border color - This is to pick the border color of the order details table.

Container Width - Width measurement of the email container.

Custom CSS - To write your own customization with CSS, you can style your own email template programmatically.

Order URL - To enter the URL of the Order page on your website. This will redirect the customer to that particular order.

Reset Templates

18 reset templates

To restore all templates to the default style, click on the Restore button.
Finally hit the “Save” button to save the changes.

Import/Export Templates

This option is to have a backup of the designed email templates for your future.

19 import export

This feature is really helpful as you can always have a backup of the email templates in your drive. You can export it whenever it is required.

Enable/Disable Templates

To either enable/disable the required email templates.

Retainful- Next Order Coupon

This is the most attractive feature in the Email Customizer. This is to provide next order discount coupons in your email.
To apply a coupon to your email, integrate Retainful with Email Customizer. The coupon settings are made as per requirements in the “Retainful - Next Order Coupon” tab.
To make it more clear, check the tutorial for Next Order Coupon.

I hope now you would find it easier to customize your email with the help of the WooCommerce Email Customizer plugin. The Email Customizer with its exclusive feature “Drag and Drop Builder” results in great output for your e-commerce store.

As dynamic information is added using shortcodes, you need not worry even if you are not a programmer.
The plugin is so flexible that you can customize your email as required. Enjoy customizing transactional email which would produce great results.

Start customizing your WooCommerce emails today and build the brand value to a greater extent.

Wishing You Good Luck.