WooCommerce Email Template Customizer

Created: 02/2020
By: VillaTheme

Thank you for using our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

FILE INCLUDES

INTRUCTION

WooCommerce Email Template Customizer is a helpful tool that helps you build and customize the Email templates for WooCommerce. The plugin provides sufficient base elements and WooCommerce elements, developmental tools  for users to build a completed email. You can easily drag and drop, edit and style for transaction emails using Layouts, insert desire contents with no coding knowledge required. All you need to do is a couple of mouse clicks to create and experience your email template that will be sent to your customers.

 

THE PLUGIN FEATURES:

  • Easily drag and drop elements to build and customize emails: – The user-friendly email template builder allows you to build professional and outstanding WooCommerce email templates.
  • Email Elements – Add different elements (Basic, Woocommerce and hooks) to your email template with full shopping information of WooCommerce and users’ information. The editing tab will show allow you to work directly on fast and effectively each element.
  • Unlimited Number of Rows – unlimited rows can be added to the email template and include everything you need in the emails.
  • Settings for email: Select to assign email type, billing country and/or category even in the email template.
  • Live Preview of Changes – visually observe emails by the preview, update any changes in the preview mode, integrate to see on the desktop, mobile.
  • Send Test Emails – Check the email design before the real sending.
  • Add Images to WooCommerce Emails – Add images in your email templates and make them attractive with banners, logos, featured images, etc.
  • Display Dynamic Data with Placeholders – Displaying placeholders makes it easy to design templates. Placeholders such as customer name, site name, User name, Password, My account URL which will be replaced by real user/order data while sending the WooCommerce emails.
  • Compatibility with Most WooCommerce Plugins – Compatible with all VillaTheme’s plugin that helps you customize and send emails of VillaTheme’s plugins, Compatible with Almost all plugins in the WooCommerce
  • Responsive and work perfectly on any devices.

EMAIL ELEMENTS

Basic Elements

  • Text: Add text content to the template and customize the font color, font size, alignment, border width, insert/edit link, insert/edit image, shortcode, info icon, social icon, border style, border color, background color, text padding, and text margin.
  • Divider: Add a single line divider to the template and choose a style for the divider. Customize the style, width, height, color, alignment, margin and padding of the divider.
  • Socials: Add social icons to the email template, enter your ULRs in the placeholder including Facebook, Twitter, Instagram.
  • Image: Add an image to the email template and adjust its size and alignment, border style, border color, background color, text padding, and text margin.
  • Button: Add and customize the button: Name, the link of a button, style the border, alignment, background and padding.
  • Menu bar: Add and customize the menu bar or named the navigation bar that includes links to the most important sections of the site: Home, Shop, Contact…
  • Contact: Display contact information with icons on the email template.
  • Spacer: Add a space between other elements and customize its height, borders with style and color, and the background color.

WooCommerce Elements

  • Order detail: Display fully the details of orders with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.
  • Order total: Display total number of orders including Subtotal, discount, shipping, payment method, order fully refunded, total…with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.
  • Order subtotal: helps you display specifically components of orders: including Subtotal, discount, shipping, payment method, order fully refunded, …with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.
  • Shipping method: Helps you display the shipping method in the template, customize the borders, background color, padding, margin.
  • Payment method: Helps you display the payment method in the email template, customize the borders, background color, padding, margin.
  • Billing address: Display the billing details in the email template with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.
  • Shipping address: Display the shipping details in the template and customize the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.
  • Products: Recommend some products and links to the products in your store.
  • Coupons: Helps you display a coupon that customers get and display on the email template. Customers can copy the coupon and apply for their order.
  • Post: Helps you display your posts the email template and links to those posts in your store.

WooCommerce Hooks

Add the hooks provided by WooCommerce into the email templates.

 

 

 

 

 

INSTALLATION

System Requires:

Make sure that those limits to a minimum as follows in order for free-trouble while installing:

  • WordPress 5.0.x or higher
  • Woocommerce 4.0.x 
  • PHP 7.0

Download Plugin:

Go to Plugin/Add New/Upload Plugin/Choose file/ select plugin zip file email-customizer/click “Install Now“/click “Active plugin“.

Done! Let’s start using the plugin.

Guiding video on how to install and set up:

 

HOW TO USE

After you install and activate WooCommerce Email Template Customizer on your website, you can completely activate to send email templates altering default WooCommerce Emails.

  • You can add, edit, and design available email templates.
  • You can create your new template fit your need and your business style.

Go to Email Template > All emails > scroll down to edit available email templates or add a new template.

 

1. Add a new email template. You can see how to create and customize an email here.

2. Customize available email templates. You can see how to edit an email here.

How does it work

EMAIL PANELS OVERVIEW

1. Widget panel and Editing area

1. Components: The panel of components helps you work with options in order to drag and drop layout and contents to the editing space.

2. Editor: The editor panel will appear when you are working with an element and allow you to customize such us the borders, background color, padding, margin…

3. Email subject: Add email subject, customize easily with variety of shortcodes.

4. Background color: insert background for email. You can add images and customize the color.

5. Editable space: The area displays the email content you are editing.

6. Select layout button: Click to add a new layout quickly.

 

2. Actions with current email template.

At the left bottom of the email editing page, you can choose to interact with the email:

1. Exit to Dashboard 4. Copy to draft
2. Toggle admin menu 5. Move to trash
3. Add new email template 6. Publish the email

 

3. Advanced options

a. Rules: Set rules to send an email if an order matches the rules.

1. Apply to billing countries: Select countries which this email template is applied to.

2. Apply to categories: Select categories which this email template is applied to.

3. Apply to min order: Send this email template to the orders hit this min amount.

4. Apply to max order: Send this email template to the orders hit this max amount.

 

b. Testing: Observe emails by the preview in PC and mobile mode; Check the email design before the real sending.

1. Select order: Select an order to send this email template.

2. Send to: Testing email will be sent to this email address.

3. PC preview: Observe emails by the preview in PC.

4. Mobile preview: Observe emails by the preview in mobile.

5. Testing email button: Check the email design before the real sending

 

CUSTOMIZE AVAILABLE TEMPLATES

WooCommerce Email Template Customizer is available with a variety of templates that are used to alter for WooCommerce emails, you can easily add, edit and style in your own.

Steps 1: Go to Email Template settings> All emails

Step 2: Choose any email templates available, they can be: New Order;  Order On-Hold; Order Processing; Order Completed; Canceled Order; Failed Order; Order Refunded; Customer Invoice; Customer Note; Password Reset; New Account…

Step 3: Click on the edit button to go to the email editing page.

Step 4: Customize the template.

You can see this guide to edit, drag and drop, create…on the template.

BUILD YOUR NEW EMAIL TEMPLATE

Steps 1: Go to Email Template settings> Add new.

Step 2: Create an email template you want to send customers, it can be: New Order;  Order On-Hold; Order Processing; Order Completed; Canceled Order; Failed Order…

WooCommerce Email Template Customizer uses 3 main building blocks: Row, Column and elements.  Row are the largest building blocks, and inside them are groups of Columns. Columns are used to cover outside elements. Elements are placed inside of columns.

You control, edit duplicate, remove row, Columns with their handles.

To edit row, column padding.

To duplicate row, column.

To remove row, column and element.

 

A. Layout

The layout can be 1-4 columns for you to choose from.

1. Set the Columns padding. You can do it under Layout, or drag the dashed line between the Columns.

2. Insert elements to your Columns.

B. Content

Content includes with different elements (Basic, Woocommerce and hooks) to your email template with full shopping information of WooCommerce and users’ information. The editing tab will show allow you to work directly on fast and effectively each element.

1. Insert Elements inside your Columns

2. Click on each element to edit and style.

3. Follow the Basic and WooCommerce Elements tab below to learn how to use Elements.

BASIC ELEMENTS

Text

The Text element gives you more styling options that let you change settings like font weight, line height, letter spacing, alignment and more.

A. Text Editor

  1. Typography: Set the typography options for the text
  2. Alignment: Align the text to the left, right, center, or justified
  3. Link: Insert/Edit link.
  4. Image: Insert/Edit link.
  5. Font size: Set font size for the text.
  6. Text Color: Choose the color of the text.
  7. Background Color: Choose the color of the background.
  8. Shortcode: Insert shortcode in the text.
  9. Information icons: Insert Information icons in the text.
  10. Social icons: Insert social icons in the text.

B. Style

You can style the text includes: Line height (px); Background; Padding; Border (Width, Radius)

  • Line height (px): Type value for the height of text line.
  • Background: Set Image and color for text background.
  • Padding: Type space between the border of  and the content inside it.
  • Border Width (px) and Radius (px): Control the thickness of the border around the text and set the border radius to control corner roundness.

 

 

 

 

Button

The Button element helps you easily design and customize buttons without the need for any other plugins or shortcodes.

A. Content

  1. Enter the button’s text and you can add ()shortcode if you need
  2. Set the URL for the button’s link.

B. Style 

You can style the button includes:

  • Button: Border width; Border radius; Border color; Button color.
  • Padding:  Type space between the border of  and the content inside it.
  • Text: Font size (px); Font weight; Color;
  • Alignment: Align the text to the left, right, center.
  • Margin (px): Left; Top; Right; Bottom.

Image

The Image element helps you display images in the email template.

A. Content

Image – Upload an image like featured image, Site Logo, and Author Profile Picture.

B Style

  • Image Size: Choose the size of the image (Width px)
  • Alignment: Set the image Alignment: left, right, center.
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for image background if you need.

Menu Bar

The Menu bar element allows you to create a page with an internal navigation in the email template.

A. Content

  • Text: Give the anchor a name.
  • Link: Type ‘#’ + the anchor name (ie: #help center) in the URL link field of the menu item.

B. Style

  • Direction: Horizontal or vertical.
  • Text: Font size (px); Font weight; Color; 
  • Alignment: Align the text to the left, right, center.
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for menu background if it is necessary.

Socials

The Social element lets you add icon links to all your social media profiles.

A. Content

* Add a Social network icon, use the Icon Library to choose the Social Network icon of your choice, and enter a link URL to the social network.

B Style

  • Direction: Horizontal or vertical.
  • Alignment: Align the text to the left, right, center.
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for social background if it is necessary.

Contact

The Contact element allows your site’s visitors a simple way to get in touch with you.

A. Content

– Home

  • Icon: Add the home icon format: Black; White; White/border; Black/border; Black/White; White/Black.
  • Text: Enter your URL in text format.
  • URL: Enter a link URL of your homepage.

– Email

  • Icon: Add the Email icon format: Black; White; White/border; Black/border; Black/White; White/Black.
  • Email: An email type. Includes validation for email.

– Phone

  • Icon: Add the Phone icon format: Black; White; White/border; Black/border; Black/White; White/Black.
  • Number: A telephone number type.

 

B. Style

  • Text: Font size (px); Font weight; Color; 
  • Alignment: Align the text to the left, right, center.
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for contact background if it is necessary.

Divider

The Divider element allows you to add styled horizontal lines that divide your content.

  • Border: Color – Choose the color of the divider; Width – Control the width of the divider.
  • Padding: Left; Top; Right; Bottom.
  • Background: Set Image and color for divider background if it is necessary.

Spacer

The Spacer element creates a block of space anywhere on your page. You can fill this block of space with a color or an image. You can use it to create cool shapes and elements as well.

Height: Set the amount of vertical space.

WOOCOMMERCE ELEMENTS

Order detail

The Order detail element helps you easily display fully the details of orders with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.

A. Content

– Template: There are 3 templates of order detail to choose including:

  • Default

  • Vertical text

  • Horizontal text

– Translate text: Type to change the quantity text.

 

B. Style 

  • You can style Order items; Product name; Product price; Product quantity with: Font size (px); Font weight; Color;
  • Padding: Type space between the border of  and the content inside it.
  • Background: Set Image and color for order detail background if it is necessary.

Order total

The Order detail element helps you display total number of orders including Subtotal, discount, shipping, payment method, order fully refunded, total…with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.

A. Content

Translate text: Type to change the total text.

 

B. Style 

  • Column radio: Control the width of last column of order total (%)
  • Alignment: Align the order total content to the left, right, center.
  • Border: Control the thickness of the order total border and choose the border color.
  • Padding: Type space between the border of  and the content inside it.
  • Text: Font size (px); Font weight; Color; 
  • Background: Set Image and color for order total background if it is necessary.
  • Margin: Set the space between the border of order total column and the next element in pixel including: Left; Top; Right; Bottom.

Order Subtotal

The Order subtotal element helps you display specifically components of orders: including Subtotal, discount, shipping, payment method, order fully refunded, …with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.

A. Content

Translate text: Type to change the Subtotal; Discount; Shipping; Refunded fully; Refund partially text.

 

B. Style 

  • Column radio: Control the width of last column of order subtotal (%)
  • Alignment: Align the order subtotal content to the left, right, center.
  • Border: Control the thickness of the order subtotal border and choose the border color.
  • Padding: Type space between the border of  and the content inside it.
  • Text: Font size (px); Font weight; Color; 
  • Margin: Set the space between the border of order subtotal column and the next element in pixel including: Left; Top; Right; Bottom.
  • Background: Set Image and color for order subtotal background if it is necessary.

Shipping method

The Shipping method element helps you display the shipping method in the template, customize the borders, background color, padding, margin.

A. Content

Translate text: Type to change the shipping method text.

 

B. Style 

  • Column radio: Control the width of last column of shipping method (%)
  • Alignment: Align the shipping method content to the left, right, center.
  • Border: Control the thickness of the shipping method border and choose the border color.
  • Padding: Type space between the border of  and the content inside it.
  • Text: Font size (px); Font weight; Color; 
  • Background: Set Image and color for shipping method background if it is necessary.
  • Margin: Set the space between the border of shipping method column and the next element in pixel including: Left; Top; Right; Bottom.

Payment method

The Payment method element helps you display the payment method in the template, customize the borders, background color, padding, margin.

A. Content

Translate text: Type to change the payment method text.

 

B. Style 

  • Column radio: Control the width of last column of payment method (%)
  • Alignment: Align the payment method content to the left, right, center.
  • Border: Control the thickness of the payment method border and choose the border color.
  • Padding: Type space between the border of  and the content inside it.
  • Text: Font size (px); Font weight; Color; 
  • Background: Set Image and color for payment method background if it is necessary.
  • Margin: Set the space between the border of payment method column and the next element in pixel including: Left; Top; Right; Bottom.

Billing Address and Shipping Address

The Billing Address element and The Shipping Address element helps you display the billing details  and shipping details in the email template with customization for the color, size, and alignment of the heading and details separately. Also, customize the borders, background color, padding, margin.

  • Text: Font size (px); Font weight; Color; 
  • Alignment: Align the content to the left, right, center.
  • Padding: Type space between the border of and the content inside it.
  • Background: Set Image and color for  background if it is necessary.

Products

The Products element helps you display to recommend some products and links to the products in your store.

A. Content

– Product type: You can choose any type of products to display on product recommendation in the email template. They can be: Related; Category, On sale; Featured; Upsell; Cross-sell; Best seller; Best rated; Newest.

– Max row: Select the number of the suggest product rows, max row is 4.

– Column: Select the number of the suggest product columns, max column is 4.

* For example:

 

B. Style 

– Product name:

  • Limit the number of character on the product name.
  • Text: Font size (px); Font weight; Color; 

– Product price: Font size (px); Font weight; Color;

– Product distance (px): The distance among product images in vertical and horizontal.

– Padding: Type space between the border of  and the content inside it.

– Background: Set Image and color for Product background.

Coupons

The Coupon element helps you display a coupon that customers get and display on the email template. Customers can copy the coupon and apply for their order.

A. Content

In the coupon setting, you can choose type of coupon, they can be Existing coupon or Generate coupon.

a. Existing coupon: This type of coupon is WooCommerce Coupon, the plugin will link to available coupons that have been generated in WooCommerce. You can learn how to manage this type of coupon in this document.

  • Coupon type: Choose Existing coupon.
  • Select coupon: Type 2 or more characters of WooCommerce coupon to apply in the email template.

 

b. Generate coupon: You can generate new coupons and set their own coupon’s rules.

  • Coupon type: Choose Generate coupon.
  • Discount type: You can select type of discount: Percentage discount; Fixed cart discount or Fixed product discount.
  • Coupon amount: Fixed value or percentage, depending on discount type you choose. Entered without a currency unit or a percent sign, which are added automatically, e.g., Enter ’10’ for £10 or 10%.
  • Expired date: Date the coupon should expire and can no longer be used. Expiry happens at 12:00 am or 00:00 on the date chosen. If you want a coupon to be valid through Christmas Day but invalid the moment Christmas is over, set the expiration date to YYYY-12-26 as it will expire on YYYY-12-26 00:00. It uses your site’s time zone setting at Settings > General > Timezone in WordPress.
  • Minimum spend – Allows you to set the minimum subtotal needed to use the coupon.  Note: The sum of the cart subtotal + tax is used to determine the minimum amount.
  • Maximum spend – Allows you to set the maximum subtotal allowed when using the coupon.
  • Products – Products that the coupon will be applied to, or that need to be in the cart in order for the fixed or percentage discount to be applied.
  • Exclude products – Products that the coupon will not be applied to, or that cannot be in the cart in order for the “Fixed cart discount” to be applied.
  • Categories – Product categories that the coupon will be applied to, or that need to be in the cart in order for the fixed or percentage discount to be applied.
  • Exclude categories – Product categories that the coupon will not be applied to, or that cannot be in the cart in order for the “Fixed cart discount” to be applied.
  • Usage limit per coupon – How many times a coupon can be used by all customers before being invalid.
  • Limit usage to X items – How many items the coupon can be applied to before being invalid. This field is only displayed if there is one or more products that the coupon can be used with, and is configured under the Usage Restrictions.
  • Usage limit per user – How many times a coupon can be used by each customer before being invalid for that customer.
  • Allow free shipping – Removes shipping cost when coupon is used. Requires Free Shipping to be enabled.
  • Individual use only – Tick the box if you don’t want this coupon to be used in combination with other coupons.
  • Exclude sale items – Tick the box if you don’t want this coupon to apply to products on sale. Per-cart coupons do not work if a sale item is added afterward.

 

B. Style 

  • Coupon: Control the thickness of the coupon border and choose the border color.
  • Padding: Type space between the border of  and the content inside it.
  • Text: Font size (px); Font weight; Color; 
  • Alignment: Align the coupon content to the left, right, center.
  • Margin: Set the space between the border of coupon column and the next element in pixel including: Left; Top; Right; Bottom.

Post

The Post element helps you display your posts the email template and links to those posts in your store.

A. Content

– Categories:  You can choose any categories  to display on product recommendation in the email template. They can be: Related; Category, On sale; Featured; Upsell; Cross-sell; Best seller; Best rated; Newest.

– Max row: Select the number of the suggest product rows, max row is 4.

– Column: Select the number of the suggest product columns, max column is 4.

 

* For example:

 

B. Style 

– Product name:

  • Limit the number of character on the product name.
  • Text: Font size (px); Font weight; Color; 

– Product price: Font size (px); Font weight; Color;

– Product distance (px): The distance among product images in vertical and horizontal.

– Padding: Type space between the border of  and the content inside it.

– Background: Set Image and color for Product background.

EXTRA INFORMATION

Thank you for your attention!

If you have any questions, please create a topic at our FORUM, we will support within 24 hours.