Overview

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 DashboardEmail Customizer.

Email Customizer Plugin Settings

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

  1. Add New
  2. Templates
  3. Plugin License

General Settings

The general settings contain two sections:

  1. Customizer
  2. Template Builder

Customizer: The Customizer is a sidebar to display the rows, columns, and elements as a hierarchical list. There are settings for each of them in the Customizer, where they can be edited, removed, rearranged and the properties can be customized.

The border properties and background properties of the whole template can be edited by clicking on the gear icon on the right of the Customizer.

Template Builder: The Template Builder is an empty canvas for building the template as per the requirements. Add rows, columns, and elements from the Customizer. In the beginning, the Template Builder will be empty. Start building a template by adding a row.

Rows, Columns and Elements

  1. 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 Click to add a Row from the Builder Elements.

  2. 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. More columns can be added by clicking on the Add Column: button in the Customizer. 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 the contained elements.

  3. Elements:

    Add elements into the template by clicking on either the Add Element button on the Template Builder or the Add Element button on the Customizer under a column.

    Elements in the Email Customizer for WooCommerce can be classified into four:

    1. Layouts
    2. Basic Elements
    3. WooCommerce Elements
    4. WooCommerce Hooks
  4. Layouts:

    Layouts contain different column layouts available for the rows.

  5. 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.
    2. Placeholders: 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:
      {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. 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. In the image settings, the user can add an image. Also set properties for the image border, Padding, Margin etc.
    4. 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. Other properties for the Icon settings like border, the background can also be set.
    5. Buttons: Add a link button to the WooCommerce emails. In the button settings, the user can add a URL, Content, title, etc. The properties like Content, Border, Background and Additional details can also be customised.
    6. 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. Properties for the divider can also be configured.
    7. 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.
    8. Gap: Provide a gap in the email template at any row using this element. Also, set properties for the gap, border, and background.
  6. 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 default title for the email normally displayed on top of the email template. There are options to customize the properties of the header such as text, logo, logo border, border and background of the header.
    2. Customer: This element displays the customer details related to the order. There are options to customize the properties such as heading, details, background and border of the element. Other than this, additional details such as size, padding, margin, alignment etc can also be customised.
    3. Order: The Order element displays order details as provided by WooCommerce. Other than the total background and title details, there are options to separately customize the content details, table details, border and background. At the Additional details tab, the details such as size, padding and margin can be edited.
    4. Billing: The billing Address of the order are displayed by this element. There are options to customize the properties of heading, details, background and border of the billing. Other than this, additional details such as size, padding, margin, alignment etc can also be customised at Additional settings tab.
    5. Shipping: The shipping details of the order are displayed by this element. Customize the properties of heading, details, background and border of the shipping. Other than this, additional details such as size, padding, margin, alignment etc can also be customised at the additional details tab.
    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.

  7. 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 without any change in default properties.
    2. Email Order Details: With this hook, the default order details of the WooCommerce emails can be displayed.
    3. Before Order Table: Display the content just above the order table.
    4. After Order Table: Display the content just below the order table.
    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.
    8. Custom Hook: Custom hooks are similar to a normal WordPress action hooks, where the user can define a hook with custom name, add it anywhere in the email template and attach a function to the hook via functions.php. This provides the user with the facility to add additional dynamic data to the emails. Custom Hook names should be unique and should only consist of alphabets and underscore. The Custom hooks can add additional contents to emails.

Edit/Duplicate/Delete Rows, Columns & Elements

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.

Clear and Save

The Template Builder and can be reset using the Clear button and can start building again. After making the necessary changes, save the template by clicking the Save button.

Add/Edit Templates

Click on the New Template button from the top of the Template Builder to start creating a fresh template. Add a proper name (Use only letters ([a-z],[A-Z]), digits ([0-9]), hyphen ("-") and underscores ("_")) for the template before saving.

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.

Test Mail

Test your template design by sending a test mail. Click on the Test mail (paper-plane icon), a pop up appears to enter email id and click on the send button. A sample email will be sent with the template design to the entered email address.