Email Customizer with the Drag and Drop elements gives you an exciting experience in creating customized emails.
You can do much more than you think to attract your customer with a highly professional Order Email including your site logo, images and more..
Let us see how to create your First email template.
Create an order email template
From WordPress dashboard go to WooCommerce > WooCommerce Email Customizer. There are several steps involves in creating an order template. Lets see below for creating email template for Completed Order.
On the top bar, you would see the following options that are needs to be chosen to customize the email template.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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 ?
It is used to insert editable footer block. You can include your own text here. For example, copyright information.
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.
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.
Here is a document on the available short codes -> Click here
Custom Short code:
You can also create custom short code in order to create the short codes to get the fields from a third party plugin.
There are lot more exciting features to do in email customizer:
Raise a support request here -> [email protected]