WooCommerce Email Customizer | Email Customer for WooCommerce

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.

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.

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: {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 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. Gap: Provide a gap in the email template at any row using this element.
  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.
  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.

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ThemeHigh

ThemeHigh

ThemeHigh develops plugins to customize the product and checkout pages of a WooCommerce Online Store.https://www.themehigh.com/