WooCommerce Email Customizer | Email Customizer For WooCommerce

WooCommerce Email Customizer plugin lets customize the WooCommerce Emails using a visual template editor. With WooCommerce Email Customizer, display the emails in different styles and layouts, with images, GIF, buttons and social media icons.

Access the WooCommerce Email Customizer settings from Dashboard → WooCommerce → Email Customizer.

Email Customizer Plugin Settings

There are three tabs in the WooCommerce Email Customizer plugin settings:

1. General Settings
2. Add/Edit Templates
3. Plugin License

General Settings

The general settings contain two sections: 1. Builder Elements and 2. The Template Builder.

Builder Elements: The Builder Elements displays the rows, columns, and elements as a hierarchical list. There are settings for each of them in the Builder Elements, where they can be edited, removed, rearranged and the properties can be customized.

Template Builder: The Template Builder is an empty canvas for building the template as per the requirements. Add rows, columns, and elements from the Builder Elements. Elements can also be added by clicking on Add Content displayed in the Template Builder. In the beginning, the Template Builder will be empty. Start building a template by adding a row.

Editing the Template Builder: The border properties and background properties of the total template can be edited by clicking on the ✎ icon on the right of the Template Builder.

Rows, Columns And Elements

Rows: Add any number of rows to the template builder. Each row prompts to choose a basic structure in terms of columns to start with. Once it is chosen, the user can start adding contents to the template. To add a new row, click on Add Row from the Builder Elements.

Columns: Choice of the number of columns can be made while adding a row to the template. A maximum of four columns can be added likewise. More columns can be added by clicking on the Add Column button in the Builder Elements. Contents cannot be added directly into a row, but only under a column. Take care while adding the number of columns, as there occurs overflow while adding columns without considering the size of contained elements.

Elements: Elements in the Email Customizer for WooCommerce can be classified into four: (i) Basic Elements, (ii) WooCommerce Elements, (iii) WooCommerce Hooks, and (iv) WooCommerce Features. Add elements into the template by clicking on either the Add Content button on the Template Builder or the Add Element button on the Builder Elements under a column.

Basic Elements:

Following are the basic elements that can be included in the Email Customizer:

1. Text: Add a text anywhere using this element. In the element settings, the text box height, width, padding, etc. can be defined. Also set the properties for the text, background and border.

• Placeholders:

1. For email templates which need any dynamic data to be displayed in addition to that is available, these can be included in the text as dynamic placeholders. Following are the placeholders for specific email data:
2. {th_customer_name} — Get customer name
   {th_billing_phone} — Phone number from billing address
   {th_order_id} — Order ID
   {th_order_url} — Order URL
   {th_billing_email} — Email from billing address
   {th_site_url} — Site URL
   {th_site_name} — Site name
   {th_order_completed_date} — Order Completed Date
   {th_order_created_date} — Order Created Date
   {th_checkout_payment_url} — Checkout payment URL in case of pending payment
   {th_payment_method} — Payment Method
   {th_customer_note} — Customer note
   {th_user_login} — Username
   {th_user_pass} — User password
   {th_account_area_url} — Account area URL
   {th_reset_password_url} — Reset password link for the Account
3. Note: Some of these placeholders may not work if they are placed illogically in any template. For ex: The Order Completed Date will not be displayed if it is included in any email sent before completing the order.
4. Image: Add an image to the email with this element. Always take care to input the width and height of the image correctly in the element settings.
5. Social: Add social media to the emails. If any social media URL field is left blank in the element settings, it will be omitted from the icon list.
6. Buttons: Add a link button to the WooCommerce emails. In the button settings, the user can add a URL, title, etc. for the button and apply various stylings for the button, button text, and border.
7. Divider: With this element, add a dividing line anywhere in the email template. Suppose if it is needed to split the template into two different sections, a divider line can be used to do so.
8. GIF: Add a GIF image to the emails. Always take care to input the width and height of the GIF correctly in the element settings.
9. Gap: Provide a gap in the email template at any row using this element.

The settings for the rows, columns and elements are given alongside the name. When hovered upon, there are three options to choose from:

1. Edit: Go to Edit to access the settings of the row/column/element.
2. Clone: Choose this option to create a duplicate of the row/column/element just beneath.
3. Delete: Choose this option to delete the added row/column/element.

Notes:

1. Applying unit percentage as height to the elements doesn’t work until it’s parent has a fixed height value. For example, the height of an element inside a table column in percentage works only if the height of the table column is a fixed value.
2. In the padding settings of an element, the fields are arranged as top, right, bottom, and left respectively. These values should be inputted in px. Similarly, background image size should be inputted as two values (for width and height) separated by a space. If only one size is inputted, this will be considered for both width and height.

WooCommerce Elements:

The WooCommerce elements provided in the Email Customizer are the pre-existing contents in WooCommerce emails. Following are the WooCommerce elements in the Email Customizer:

1. Header: This is the normal title for the email normally displayed on top of the email template. It can be rearranged to display anywhere as preferred.
2. Customer: This element displays the customer details related to the order. There are options to customize the properties of text, details, background, and border of the customer details.
3. Order: The Order element displays all details related to the purchase, as provided by WooCommerce. Other than the total background and title details, there are options to separately customize the table details, border and background.
4. Billing: The billing details of the order are displayed by this element. There are options to customize the properties of text, details, background, and border of the billing details.
5. Shipping: The shipping details of the order are displayed by this element. Customize the properties of text, details, background, and border of the shipping details from the element settings.
6. Downloadable Product: The table for downloadable products can be included in the email with this feature.

Though the WooCommerce elements are essentially displayed in default WooCommerce emails, they can be omitted if any of them feels unnecessary.

WooCommerce Hooks:

These Elements Help To Add Existing WooCommerce Hooks Into The Email Template. Following Are The Hooks Available In The Email Customizer:

1. Email Header: With this hook, the default email header of the WooCommerce emails can be displayed.
2. Email Order Details: This hook displays the default order details in a WooCommerce email.
3. Before Order Table: Display the ‘Before Order’ table with this hook.
4. After Order Table: Display the ‘After Order’ table with this hook.
5. Order Meta: The default Order Meta details can be included in the template with this hook.
6. Customer Details: This hook displays the default customer details in a WooCommerce email.
7. Email Footer: With this hook, the default email footer of the WooCommerce emails can be displayed.

Preview, Clear And Save

Once finished with building the template, click on the Preview button to see a preview of the template.

If the templates need to be rebuilt completely, the Template Builder can be reset using the Clear button and can start building again.

After seeing the preview and making the necessary changes, save the template by clicking Save. Add a proper name (exclude the use of ‘ (single quotes) and “ (double quotes) in the name) for the template before saving.

Once a template is completed and saved, click on the New Template button to start creating a fresh template.

Note: A template cannot be saved without adding at least one element to the template builder.

Add/Edit Templates

Edit Template

In the Edit Template section, choose any template from the pull-down, and Edit or Delete it.

Choose Template

Here, assign the created templates to different WooCommerce emails like Admin New Order, Customer New Order, Cancelled Order, etc.

Save Changes once the templates are assigned to the required emails.