WooCommerce Email Customizer with Drag and Drop Email Builder

Now enjoy sending customized stylish order email with WooCommerce Email Customizer with Drag and Drop Email Builder. With woocommerce email custmomizer you can send order email for different order status including dynamic information about product and order. Dynamic information can be added using shortcodes. It also supports multilanguage. You can send email templates for following cases,

  • New order
  • Cancelled order
  • Failed order
  • Order On-hold
  • Processing order
  • Completed order
  • Refunded order
  • Customer Invoice / Order Details
  • Customer note
  • Reset Password
  • New account

The drag and drop feature comes in a handy to easily design and customize your email template.

Quickstart video

Below step-by-step instructions explains you how to build an email template by dragging and dropping.

Requirements

  1. PHP version 5.6 or greater
  2. WordPress 4.1 or higher
  3. WooCommerce 2.5 or higher

Installation

Basic settings

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

Reset :

To restore all your email templates to the default style, use this Reset button to restore all the templates.

Display payment instruction above order table :

To display the payment instruction, for example: If you are using Bank transfer as your payment method and would like to show the bank details in the order email, use this option to show it on above the order table.

Show product image :

Choosing yes will show the product's thumbnail image in the order item table.

Order item table border color :

This option is used to set the border color for the order item table.

Custom css :

If you wants to style your email template using css, then add your custom styles in the text area provided here.

Order URL :

Enter the URL to order page you have in your website, if you would like to add the link to the order page in your email. If wants your customer to be redirected to particular order, use the short code [woo_mb_order_id] at the end of your order page url.

For example,

https://www.example.com/email-builder-demo/my-account/orders/[woo_mb_order_id]

And then use the short code [woo_mb_order_link] in your email template to place the link.

Finally, click save button at the bottom of the page to save the changes.

Create an order email template

From wordpress dashboard go to WooCommerce > WooCommerce Email Cusotmizer. There are several steps involves in creating an order template. Lets see below for creating email template for Completed Order.

Getting started

On the top bar, you would see the following options that are needs to be chosen to customize the email template.

  1. Select your language :. WooCommerce Email Builder supports for mulitilanguage. This option is used if your site is multilingual based. Choose your language from the dropdown list to create a email template for specific language.
  2. Select your email template from the available list of 10 different email templates. For example if you would like to send an email to the customer whose order is completed, then choose the template Completed Order.
  3. After selecting language and email template, now you will have to choose the customer order. The plugin will use this order (selected here) as a sample data for the email template.

On the right side of the top bar you could find the options and buttons to copy the content of the one email template to other and to preview the email template.

After selecting the language, email template and customer order, the system will show you the default customized template (comes with your plugin package). Refer the below image:

To copy the content of another email template, click on Copy from at the right side of the top bar. Clicking on this icon will show you the popup to choose from which language and template you wants to copy the content.

Customize the email template using drag and drop feature

This plugin offers drag and drop feature to easily customize the email template layout.

On the left side, you can see the panel with list of icons. Each icons possess different function. Mouse over on those icons will show you the name of the icon and short description about the use of icon.

How to create a header part ?

Mostly, the Header part of email should have the informations such as business logo, title, company contact info,etc. Lets see how to add logo and title for our completed order template.

Logo image

At the top of left side panel, you can the icon named Logo. Use this icon to add your company or store logo. Drag and drop this icon will insert default logo. You can also edit and upload your own business logo here.

Title and subtitle

From the list of icons, the icon next to the logo is Title and subtitle. 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.

Divider

This icons is located next to the title and sub-title icon. It is used to insert horizontal line between any two blocks.

On mouse overing each element, you can see the icons to edit / delete / copy / move the element. Clicking on edit icon allows you to style the element by changing the background color, to change the content, etc.

Screen shots of editing logo element and title element

How to create email body content ?

Body of the email may contains order details, address information (billing / shipping), customer information, status of the customer order like completed, shipped, etc. Lets see how to add additional dynamic information using drag and drop feature.

Order item

From the left panel icons list, you can see the icon named Order Item. Use this icon to add order information (ordered items, subtotal, total and payment method) in table format. You can also edit this element to add more information and to style this block.

On editing this element, you can see the short code of order item table in the text editor.

Billing Address

It is used to add customer's billing address alone. On editing this element, you can see the short code of billing address in the text editor.

Shipping Address

It is used to add customer's shipping address. On editing this element, you can see the short code of shipping address in the text editor.

Text box

This icon will add editable text box inside the email template.

Billing and Shipping Address

Use this icon to add both billing and shipping address in 2 columns. Edit the element and see how the short codes are used.

Customer info and addresses

Drag and drop this icon to insert customer information, billing address and shipping address in a 3 columns. Edit the element and see how the short codes are used.

How to create footer section ?

Footer

It is used to insert editable footer block. You can include your own text here. For example, copyright information.

Social icons

Adding social icons to the email is the another way of marketing or advertising your company or store. Use this icon to include social icons in email template. This icon will insert 4 social icons (Facebook, Twitter, Linkedin, Youtube). After adding this element, click on edit icon to add your social page url.

Button

Drag and drop this icon to add button link to custom url. It is also possible to change the button background color. After adding this element, click on edit icon to change the button text, url and background color.

List of Shortcodes

You could see the shortcodes at two places. One at the top of the page, the button named SHORTCODES and another at the bottom of the left side panel, you can see the icon for shortcode.

Clicking on shortcode icon will show you all the short codes in the popup window. These shortcodes can be used to add additional information of order details, customer info, etc while you editing element.

Below are the available list of shortcodes.

Order Details:

[woo_mb_items] - To Get Items

[woo_mb_order_id] - To Get Order ID

[woo_mb_order_link] - To Get Order URL (Takes url from settings)

[woo_mb_order_sub_total] - To Get Order Sub-Total

[woo_mb_order_total] - To Get Order Total

[woo_mb_order_fee] - To Get Order Fee

[woo_mb_order_refund] - To Get Order Refunds

[woo_mb_order_date] - To Get Order Date

Payment:

[woo_mb_order_payment_method] - To Get Payment Method

[woo_mb_payment_method] - To Get Payment Method

[woo_mb_transaction_id] - To Get Transaction ID

Shipping:

[woo_mb_shipping_method] - To Get Shipping Method

[woo_mb_order_shipping] - To get Shipping Total

[woo_mb_shipping_first_name] - To Get Shipping First Name

[woo_mb_shipping_last_name] - To Get Shipping Last Name

[woo_mb_shipping_company] - To Get Shipping Company

[woo_mb_shipping_address] - To Get Shipping Address

[woo_mb_shipping_address_1] - To Get Shipping Address 1

[woo_mb_shipping_address_2] - To Get Shipping Address 2

[woo_mb_shipping_city] - To Get Shipping City

[woo_mb_shipping_state] - To Get Shipping State

[woo_mb_shipping_postcode] - To Get Shipping Postal Code

[woo_mb_shipping_country] - To Get Shipping Country

Billing:

[woo_mb_billing_address] - To Get Billing Address

[woo_mb_billing_first_name] - To Get First Name

[woo_mb_billing_last_name] - To Get Last Name

[woo_mb_billing_company] - To Get Billing Company

[woo_mb_billing_address_1] - To Get Billing Address 1

[woo_mb_billing_address_2] - To Get Billing Address 2

[woo_mb_billing_city] - To Get Billing City

[woo_mb_billing_state] - To Get Billing State

[woo_mb_billing_postcode] - To Get Billing PostalTo Get User's Email Code

[woo_mb_billing_country] - To Get Billing Country

[woo_mb_billing_phone] - To Get Billing Phone

[woo_mb_billing_email] - To Get Billing Email

General:

[woo_mb_site_name] - To get Site Name

[woo_mb_site_url] - To Get Site URL

[woo_mb_user_name] - To Get User's Name

[woo_mb_user_email] - To Get User's Email

[woo_mb_customer_provided_note] - To Get Customer provided note

[woo_mb_customer_note] - To Get Customer last note

[woo_mb_customer_notes] - To Get all Customer Notes

Reset Password:

[woo_mb_password_reset_url] - To get reset url

New User: [woo_mb_user_password] - To get User Password

[woo_mb_user_activation_link] - To get activation url

Custom code:

[woo_mb_custom_code] - Your custom code can be overridden by copying [woo-email-customizer-page-builder/templates/woo_mail/custom_code.php] to [yourtheme/woo-email-customizer-page-builder/woo_mail/custom_code.php]. You can also add attributes if required Eg:[woo_mb_custom_code type="pre-order-link"]

Screenshots of different email templates

Email builder on mobile

Frequently Asked Questions

1. Are you receiving unstyled email ?

WooCommerce uses the Emogrifier class to add inline styles to the email. It is a small utility to convert css to in-line styles.

However, while parsing your template, this breaks some of styles you have made.

That is the reason why a few of the styles got broke.

Solution is to change the styles for that block (You can re-design that block alone)

If it keeps breaking, then here is a quick workaround

Edit wp-content/plugins/woocommerce/includes/emails/class-wc-email.php

Around line 462, you will find

$content    = $emogrifier->emogrify();

Change this to

//$content    = $emogrifier->emogrify();

Save

This would mean that the content does not pass through emogrifier utility.

2. How to create a template override for order items table ?

If you would like to customize the order items table appears in your email, you will have to create a template override for following files

/wp-content/plugins/woocommerce_email_cuztomizer_with_drag_and_drop_builder/templates/woo_mail/order_items-3.php/wp-content/plugins/woocommerce_email_cuztomizer_with_drag_and_drop_builder/templates/woo_mail/email-order-items-3.php/wp-content/plugins/woocommerce_email_cuztomizer_with_drag_and_drop_builder/templates/woo_mail/order_totals-3.php

Copy the above files and paste it under the directory path

/wp-content/themes/YOUR-THEME/woocommerce_email_cuztomizer_with_drag_and_drop_builder/woo_mail/

Then, edit the overridden file and make your changes. Save.

3. Are you receiving default email instead of the email template created inside our plugin ?

It is because, you might be having multiple languages in your site but have not created the email template for all the languages. For example: You are having following such languages in your site (English, German, French) and created the email templates only for the language English. If customer places an order using the language French, then he will receive the default email because there is no email template for the language French.

So always you should make sure that you have created email template for all your site's languages.

4. Don't get the email template to edit after selecting language, email and order and it keeps showing loading..?

The issue was due to the following definition added in the wp-config.php file.

Edit wp-config.php and find the below line

define( 'DISALLOW_UNFILTERED_HTML', true );

And comment the above line. So now it looks like:

//define( 'DISALLOW_UNFILTERED_HTML', true );

You can now be able to edit the email templates and save.

Once you have completed the editing, please uncomment the definition. (Just remove the two forward slashes)

Did this answer your question?