WooCommerce Email Template Customizer


Created: 02/2020

Last updated: 10/2023 – Updated version: 1.2.2

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!

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 VillaTheme’s plugins – That helps you customize and send emails of VillaTheme’s plugins.
  • 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.

Advanced options

In addition, the plugin integrated with some advanced options that allow you set rules to send an email if an order matches the rules. For example, you want to send an current email template to United State in Shoes category if the order hits to a specific amount. Therefore, you can manage emails which be sent to each customer’s group as you want.

  • Billing countries: Select countries which the email template is applied to.
  • Categories: Select categories which the email template is applied to.
  • Products: Select products which the email template is applied to.
  • Payment methods: Select payment method(s) which the email template is applied to.
  • Min price order: Send the email template to the orders hit this min amount.
  • Max price order: Send this email template to the orders hit this min amount.

 

 

 

 

 

 

 

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:

 

In both free and pro version, our plugin support external shortcode. You can build you own shortcode, it’ll show the value if the shortcode is built correctly.

For how to build shortcode, you may visit this documentation.

 

In the pro version, the plugin provides shortcodes for metadata

Use parameter 'meta_customer_order' to get user meta. Allowed value : meta_customer_order=’yes’

For example: [wec_order_meta meta_customer_order="yes" key='META_KEY_NAME']

  • In email content:

[wec_order_meta key='']

Add meta key name to display custom value. For example: [wec_order_meta key='META_KEY_NAME']

  • In email subject:

[wec_order_meta_subject key=""]

 

 

Step 1:  Create a new folder with the name “email-template-customizer” in the original file of your current theme.

Step 2: Go to the original file of the WooCommerce Email Template Customizer plugin

Step 3: Copy files to overwrite and paste to the “email-template-customizer” folder

After you install and activate WooCommerce Email Template Customizer on your website, our templates will automatically overwrite WooCommerce default email templates.

Go to Email Template > All emails > scroll down to edit available email templates or add a new template. Now, you can:

  1. Build your own email templates: The point of having an email customizer plugin is to build/customize the email templates to match your expectation. Follow this documentation to build a new email template/customize an available one.
    You may need the specific explanation for the customizing options of each component/layout. Find the option/component/layout in this documentation.
  2. While building your template, you may need to:
  3. And these functions below may help you configuring your email in no time:
    • Import/Export template: Save your time re-making templates with similar design with this function.
    • Create mutual blocks: If there should be mutual content in your templates, use “Block” to make it easier. Simply make one block and apply it to all needed templates. You only need to customize that one original block and all the added blocks in the template will inherit.
  4.  Element and Template for extra information and emails created by another plugin: There are several plugins that creates custom field, attach additional information to WooCommerce emails, and even make their own email templates. WooCommerce Email Template Customizer has element/template to support that.
    • WC Hook: This element is to attach additional information that’s added to WooCommerce email by another plugin.
    • Default Template: This template is built for all emails created by 3rd plugins, if these emails are listed in WooCommerce Emails settings.

 

 

How to attach additional info

If you’re using a 3rd plugin that add additional information to WooCommrerce Email, you can use WC Hook to attach this information to our template. For example, the custom fields like Gender; Date of birth; CIF/NIF number… Specific steps are as follows:

 

Step 1: Locate the position of additional info in WooCommerce default email.

In this step, you would need to deactivate our plugin to locate the position of the info. The most common way is to create a test order with that info filled, and see where it’ll show in the WooCommerce email.

 

Step 2: Drag the hook to the corresponding place on the template.

 

Step 3: Select the correct hook. Based on the info, you would need to test with each hook and see with which one the additional info is shown.

 

The result will come out like this

 

 

Note when you use WC Hook:

    • The WC Hook does not inherit the rule for language. If you’re using a multilingual plugin, like WPML or Polylang, and there’s valid translation for the additional information. Then once you get the correct hook in the email template, the hook will display the info in the user’s selected language, no matter the template language.
      So you must create a template for each language, and each template must include the WC Hook, in order for the info and the template language to match.
    • If there are multiple info show in the same place, and they may use the same hook to be displayed. Then you only need to add one hook. If for example, you have 2 different pieces of info created by 2 separated plugins, but they all display below the order table, and you realize they use the same hook woocommerce_email_after_order_table, then only one hook should be added.
      If you add 2 same hooks, the info will be duplicated.
    • If you want to display the payment instruction, simply drag the WC Hook to any place on the email template, and select this hook woocommerce_before_order_table
    • All settings with WC Hook component should be test with a real email sending.  The hook which is added to a position with no additional info attached will be hidden in a real email, but will show in a test email.

 

 

 

Edit email template(s) created by 3rd plugins

There are plugins that create their own email(s), their email can be displayed in the form of the Default Template created by our plugin.

To edit the email created by a 3rd email, there are 3 points you need to carefully pay attention:

1. Email header and body

The important component that must be added to the Default Template to show the email content is “Content”

This component can be edited with customizing options. There are customization for the font size, font weight, font family, line height, text color, background color, padding, and some other customizations of borders if there’re any.

But you can’t edit the content. To change the message/information in the email content, you must edit it in the email settings of the 3rd plugin instead.

 

2. Email form

Now you can add other component to the Default Template and make changes to them. The available components for Default Template is less than in other email types. You can use: Block, Text, Image, Button, Products, Coupon, Post, Contact, Menu bar, Socials, Divider, and Spacer.

 

3. All 3rd plugin emails will inherit the same Default Template.

Even if you create multiple Default Templates, only one will be applied to all 3rd plugin emails. You can’t assigned one particular “Default Template” for a specific email of a 3rd plugin.

 

Important note: Default Template only works with 3rd plugin emails which are listed in WooCommerce Emails list. 

If the 3rd plugin creates their emails, but they’re not visible in the WooCommerce Emails settings, they can’t be displayed in the Default Template form.

 

 

Build a new email template

The first thing to do after activating the plugin, is to create/customize your own email templates.

To build your own email template, click “Add new” in the plugin settings like in this image

You’ll be redirected to a new blank email editor page. Build your email here by dragging and dropping layouts/elements and configuring them.

 

Email elements overview

First, let’s take a look at the elements that play important parts in making a complete email

 

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

 

Now, for the Layout, you need to select the layout according to necessity. These layouts are from 1 to 4 column in one rows, based on your requirements, select one to add elements into.

Simply drag the Layout from the Widget panel, or click the “Plus” button to add the layout you need.

 

 

Then start adding the element and edit the content, as well as its appearance: size, outline, style…

To add the element, drag them from the Widget panel to the place you want, like the image below:

 

These are the general steps for how to build a new template. To customize one, it’s almost the same, it’s just you have an available template with lots of components, all you need is to modify them to meet your expectation.

Drag and drop: Left click and hold this button, and drag the layout to your ideal place, and drop it there

Edit: Clicking this button will lead you to the Editor area of that layout/component

Duplicate: Clicking this button will double the current layout/component

Copy: Click this button to copy the layout/component

Paste: Place the layout/component you just copied

Remove: Delete the current layout/component

 

You can watch this tutorial video below for how to build a new email template/customize an available template.

 

Assign template to email type

After you build an email, you may need to take care of the email type attached to it. Once the action to trigger the email is done, you can make sure the template assigned to that email type will be sent.

To do that, you can select the email type here

 

 

Rules for template

These rules will let you control which template is sent in different conditions.

Priority: In case you have 2 templates with the same rules,  one with the higher given priority will be sent

Rules for languages: This rule only appears once you use a multilingual plugin (WPML, or Polylang). With this rule, you can create several templates and assigned them to different languages.

  • Apply to languages: Select the language(s). This template will be sent when the triggered action is done in the selected language(s)

Rule for billing countries

  • Apply to billing countries: Select the countries. The template will be sent when user’s billing country is one of the selected.

Rules for transaction email: These rules will be available for WooCommerce transaction emails – New order, Failed order, Cancelled order, Order on-hold, Customer invoice/Order details (both paid and pending), Processing order, Completed order, and Refunded order (both full and partial).

  • Apply to categories: Select the categories applied to this template. When the user makes an order with items belong to these categories, the template will be sent.
  • Apply to products: Select the products applied to this template. When the user makes an order with these items, the template will be sent.
  • Apply to payment methods: Select the payment methods applied to this template. When the user makes an order with these payment methods, the template will be sent.
  • Choose the price type which is applied to min/max price orders: Select the price type to apply this template, they can be Order subtotal, Order total.
  • Apply to min price order: Add the the minimum order subtotal. Once the order reaches this minimum amount or higher, the template will be sent.
  • Apply to max price order: Enter the maximum amount for the order subtotal. The template will be sent to when the user makes an order with the subtotal lower or equal to this value.

 

 

Attach file

You can add file(s) to the template. Once the template is sent, the file(s) will be sent along as the attachment(s).

Note: This function can’t be used along with dynamic data files. For example: If you use another plugin that can generate file with data based on each user’s particular order, those files generated can’t be attached.

 

Simply click the “Add file” button, then select the file(s) to attached.

 

 

Preview & Send test email

When you build a new template and want to see how this template works when it’s sent, especially in a particular situation. These functions in the Testing field can help.

PREVIEW

First, to preview the email, simply click these 2 buttons to view the template on Desktop and Mobile devices in “Preview”

 

SEND TEST EMAIL

If you’re not certain with the Preview, send a test email so you can see how email works.

Step 1: Select a particular order in the “Select order” field.  The real latest order for each status on your site will be updated here. Only one for each status for testing purpose.

Step 2: Enter your email to send the test email to the “Send to” field.

Step 3: Click the “Send test email” button.

 

Note:

Normally, the test email can be sent properly. Once it’s sent, you’ll see a green message letting you know the test email is sent successfully.

If it’s not sent, there’ll be a red message letting your know which reason caused this issue. You would need to check if the problem happens to only test email, or even the real email. In that case, please try these trouble shooting steps.

 

 

Import & Export Templates

These settings allow the admin to export a template, and import it back to another blank template, on the current website or on other websites (there must be WooCommerce Email Template Customizer installed and activated on those websites).

This function saves your time, you needn’t re-make another similar template.

Step 1: In the Editor page of an email template, click “Export”

 

Step 2: Copy the exported data.

 

Step 3: Go to a blank template, paste the copied data to the “Data” field. >> Click “Import

 

 

Background & Responsive point

In this part, we’ll learn how to edit the email background and make it display responsively on any device.

First, click “Background”.

In the Editor zone, you’ll see options to customize the email background and the responsive point.

Email Background

There’re 3 options to edit the email background – Width, Image and Color.

  • Width (px): Make the background width fit your screen size. The change is applied instantly after you enter a new value here.
  • Image: Click the “Select” button to choose the image for the email background from your media. Click the “x” button to remove the background image
  • Color: Similar to Background Image. Choose the color for the email background.

Responsive point (px)

If you view the email template via Preview mode, but you’re still not happy with how it looks on different screen. You may want to make the email on the desktop and mobile look the same, or perhaps you want elements on mobile look bigger than how they look on desktop.

Responsive point will help you with that. It allows your email content to flow freely across all screen resolutions and sizes, and renders it to look great on all devices. The higher responsive point, the bigger element.

 

 

ETC in WooCommerce Emails settings

Now the template has been assigned to the correct email type. You can check it in the WooCommerce Emails settings

Go to WooCommerce >> Settings >> Emails. In this email list, you’ll see the “Email Template Customizer” column.

Edit templates of particular email

In each email type, there’s a corresponding “Edit” button to edit the template(s) assigned to that particular email type.

Click the “Edit” button of a particular email type, you’ll be redirected to the templates assigned to that type only. Now you can customize the template.

 

 

Disable WooCommerce Email Template for a particular email type

You’ve activated the plugin, but for some specific email types, you don’t want to use the customized template, but the default email of WooCommerce instead. In that case, you can disable the template of WooCommerce Email Template Customizer in WooCommerce Emails settings for that email type.

 

 

Blocks & Apply Blocks to Email Templates

Block is built with layouts and components just like the email templates. It helps a lot and saves time if you want to make mutual blocks that can be used in different templates.

Step 1: Create new blocks

 

Step 2: Build your block with Drag-and-drop builder, using available layouts and components.

Note:

  • All the change in the block content and customization must be done here. You can’t change the block – either its content or its customization – in the email template editor page. Because it will inherit the content and the customization of the original block. Once you modify a block, all the templates containing the blocks also update the modification.
  • Some settings/rules can’t be applied to the block. For example: Background Image/Color; Responsive point; language rules… Because these configuration are made in each particular email template instead.

 

Step 3: Drag the completed block to a particular position in the email template.

 

Step 4: Select the block to apply.

 

 

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. Custom CSS:  You can add your own CSS code to design on the front-end as you want.

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

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

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

7. 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 products: Select products which this email template is applied to.

4. Apply to payment methods: Select payment methods which this email template is applied to.

5. Choose the price type which is applied to min/max price orders: Select the price type to apply this template, they can be Order subtotal, Order total.

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

7. Apply to max price 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. PC preview: Observe emails by the preview in PC.

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

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

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 – Bold; Italic; or Underline
  2. Alignment: Align the text to the left, right, center, or justified
  3. Link: Mark particular text, and insert/edit link.
  4. Image: Insert/Edit image.
  5. Font size: Set font size for the text.
  6. Text Color: Choose the color of the text.
  7. Background Color: Choose the background color for the text.
  8. Information icons: List of information icons you can use, select the icon you want in this list.
  9. Social icons: List of social icons you can use, select the icon you want in this list.
  10. Shortcode: List of shortcodes you can use, select the shortcode you want in this list.
  11. Font-family: Choose the font you want the text to be displayed

 

You can edit the “Text” element with HTML tags by selecting the “Text” tab that’s next to the “Visual” tab

 

 

B. Style

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

  • Alignment: Tick it if you want to show the text at the center on the mobile screen
  • 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 color and style: Set the color and style for the border
  • 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; Border style; Button color; and Button width.
  • 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.

  • URL: Add and URL links to the picture in this field.
  • Alt: An alternative name for the picture or a description, it will also link to the picture when click it.

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 menu bar in the template, containing a list of maximum 4 items, with text and URL link. In a real email, when user clicks to the text of an item, they’ll be redirected to the link assigned to that item.

A. Content

  • Text: Give the anchor a name.
  • Link: Add an URL link to the item in this field.

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.
  • Width: Control the width of icons by changing the value in this field.
  • 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 text you want to your homepage to be displayed, it can be an URL link or your homepage name.
  • 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 text you want to display on the email. With Default Temple, it can be: Product, Quantity, Price.

Option: Tick in the boxes if you want to show SKU or remove the links to the products.

 

B. Style 

 

  • Column ratio: Control the width of the last column by adding the value without unit (percentage).
  • Text: Change appearance of text by change value in Font size, Color and Line height.
  • 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 total 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 text.

 

B. Style 

 

  • Column ratio: 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.

Option: Tick if you want to remove Shipping field when shipping is free.

 

B. Style 

 

  • Column ratio: 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 ratio: 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 ratio: 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 help 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.

Auto add to cart in product URL: Tick in the Enable box if you want to automatically add to cart of customer when they click the link to the product.

* 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.

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 in the email template and link 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: All category,  Style or Uncategorized.

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

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

 

* For example:

 

 

B. Style 

 

Post title:

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

Post content: Font size (px); Font weight; Color;

Post distance (px): The distance among post images in vertical.

– Border: Control the color, style, width and radius of border.

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

Background: Set Image and color for Product background.

Margin (px): Left; Top; Right; Bottom.

Customer note

The Customer note component displays note from customers to shop owner.

A. Content

Customer note: Type to change text in the “Note” column you want to display

 

 

B. Style

– Column ratio: Type the value without unit (%) to change the width of column “Customer note” of your choice.

– Alignment: Align the content in the 2 columns.

– Border: Control the width and color of border.

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

– Text: Change text format with Font size, Font weight, Font-family, Font color and Line height.

– Background: Customize background with Image and Color.

– Margin: Type value to change width of margins.

 

WC hook

The WC hook element is integrated in the email that allows you to insert custom code at points wherever the hook is run.

A. Content

 

Select hook: You can choose one of positions to display custom code wherever the hook is run: Before order table or after order table.

* Note: It is impossible to style the sections run through WC hook.

 

Default template

If you are using a 3rd plugin such as: WooCommerce Subscription; WooCommerce Product Vendors  … and the email contents of this 3rd plugin is not attached in WooCommerce default emails, but they create their own email templates.  In this case, you can use the default template type.

This template can help to keep the email form of the email template plugin including the header, footer, suggested products and socials, and load all email contents of the 3rd plugin inside.

All email contents of the 3rd plugin will keep it initial format and can not be customized by WooCommerce Email Template Customizer plugin.

For example, you are using WooCommerce Product Vendors and want to show all email contents of this plugin. You can see the default email template can load the contents of WooCommerce Product Vendors and also display core design of WooCommerce Email Template Customizer:

 

 

 

 

 

 

 

BLOCKS

In the Blocks page, you can create custom blocks and put them in particular positions of email templates by dragging and dropping them.

 

Plugin Author
WooCommerce Photo Reviews – Review Reminders – Reviews for Discounts Villatheme
WooCommerce Lucky Wheel Villatheme
WooCommerce Orders Tracking Villatheme
WooCommerce Abandoned Cart Recovery Villatheme
WooCommerce Thank You Page Customizer Villatheme
WooCommerce Coupon Box Villatheme
CURCY – WooCommerce Multi Currency Villatheme
Claudio Sanches – Correios for WooCommerce Claudio Sanches
Order Delivery Date for WooCommerce Tyche Softwares
Flexible Checkout Fields for WooCommerce WP Desk
WooCommerce Checkout Add-Ons SkyVerge
Advanced Shipment Tracking for WooCommerce Zoreem
SUMO Discount Fantastic Plugins
Dokan Pro weDevs
‘Onea’ theme Elated Themes
TrackShip for WooCommerce TrackShip
Paid Memberships Pro Paid Memberships Pro
Germanized for WooCommerce vendidero
WooCommerce Order Status Manager SkyVerge
Slider Revolution ThemePunch
Gioia Elated Themes
AutomateWoo Automatewoo.com
Adorn theme Edge-Theme
Translate Multilingual sites – TranslatePress Cozmoslabs, Razvan Mocanu, Madalin Ungureanu, Cristophor Hurduban

AutomateWoo

AutomateWoo allows you to add Workflows. When configuring the workflow, you need to choose the action. One of the selections in the “Actions” is Email – Send Email. When you select this option, you’ll be able to select “Default Template” built by our plugin.

Please visit this documentation for editing the “Default Template”.

 

 

WooCommerce Photo Reviews

WooCommerce Photo Reviews can send 2 emails: Review Reminder email and Coupon email. By default, they’re displayed in the WooCommerce original email design.

You can use WooCommerce Email Template Customizer or Email Template Customizer for WooCommerce to customize these 2 emails.

Step 1: Build email template

Follow this documentation to build email template using email customizer plugin. You may build your own email templates, or select our built-in templates in the available Sample

 

 

C. Shortcodes for Photo review emails

c1. Shortcodes for Review reminder:

{wcpr_order_id}

{wcpr_customer_name}

{wcpr_order_date_create}

{wcpr_order_date_complete}

 

c2. Shortcodes Coupon for review:

{wcpr_coupon_code}

{wcpr_customer_name}

{wcpr_date_expires}

 

D. Products to Review element 

The Products to Review element will appear in the WooCommerce Email Template Customizer plugin when both WooCommerce Photo Reviews premium version and WooCommerce Email Template Customizer are activated, that helps to display purchased products along with the review buttons in the review reminder email template, so purchased customers can click and redirect to the purchased product pages and write reviews.

 

  • Product item: Background color, Image size, Border width (px), Border color, Item distance (px)
  • Product title: Font size (px), Font weight, Color, Line weight (px).
  • Product price: Font size (px), Font weight, Color, Line weight (px)
  • Review button: Button title; Padding (px): Left, Top, Right, Bottom; Border radius(px); Line height(px); Font size (px); Font weigh; Color; Background color.

 

WooCommerce Lucky Wheel

If you’re using WooCommerce Lucky Wheel and WooCommerce Email Template Customizer, or Email Template Customizer for WooCommerce, you can:

  • Customize emails that inform users the wheel spinning result
  • Create different limitless templates and assign the template to each wheel segment >> This function lets you manage the email content to each result.

 

How to send Lucky wheel emails using the WooCommerce Email Template Customizer plugin.

Step 1. Build templates for informing result.

Follow this documentation for how to create new template with the ETC plugin. You can create a whole new template, or select our built-in design “WooCommerce Lucky Wheel – Coupon Email” in available Sample

 

You must ensure the email template is saved under “WooCommerce Lucky Wheel – Coupon Email” type. More info in this documentation

 

Step 2. Assign email to each index

Now after you’re happy with the email design, go to WC Lucky Wheel >> Wheel Settings >> and assign the template to the segment with prize

You may create different template for different prize notification, and assign them separately.

 

Shortcodes for the lucky wheel emails

{wlwl_coupon_label}

{wlwl_site_title}

{wlwl_coupon_code}

{wlwl_customer_name}

{wlwl_customer_email}

{wlwl_customer_mobile}

{wlwl_date_expires}

 

 

WooCommerce Orders Tracking

If you’re using both WooCommerce Orders Tracking plugin and this plugin, there’s email settings in the order tracking plugin and you can use this email customizer plugin to manage that and make the email looks beautiful with the tracking info.

WooCommerce Orders Tracking can:

WooCommerce Email Template Customizer or Email Template Customizer for WooCommerce can:

  • Send order tracking email whenever tracking info changes
  • Edit the WooCommerce Orders Tracking emails sent to customers when the tracking info changes
  • Attach tracking info to WooCommerce order email (processing order, completed order…)
  • Attach the tracking info to the custom email templates of the corresponding email types selected in WooCommerce Orders Tracking plugin settings

A. Build, Edit & Assign WooCommerce Orders Tracking email template

Step 1: Build an email template

Follow this documentation for how to create new template with the ETC plugin. You can create a whole new template, or select our built-in design “WooCommerce Orders Tracking email” in available Sample

You must ensure the email template is saved under “WooCommerce Orders Tracking email” type. More info in this documentation

Step 2: Assign the template

You must select a template in the Email settings tab of WooCommerce Orders Tracking plugin. Only templates saved as “WooCommerce Orders Tracking email” can be selected there

If you don’t select the custom template, the email will automatically be displayed in “Default Template”. If there’s no “Default Template”, the email will be in its original WooCommerce email design.

Result:

 

B. Attach tracking info to WooCommerce order emails in ETC templates

Step 1: Select the order status to include the tracking info. The templates assigned to the corresponding email types will display the info.

Step 2: Choose a position to place the tracking information.

Step 3: Now, go to the editor page of the email templates you select in the step 2. Add the hook to the selected position. For how to use the correct hook, please see this documentation.

Result:

 

C. Shortcodes for the order tracking emails

  • {wot_billing_first_name}
  • {wot_billing_last_name}
  • {wot_tracking_number}
  • {wot_tracking_url}
  • {wot_carrier_name}
  • {wot_carrier_url}

 

D. Orders Tracking element

The Orders Tracking element will appear in the WooCommerce Email Template Customizer plugin when both WooCommerce Orders Tracking premium version and WooCommerce Email Template Customizer activated, that helps to display tracking information in order tracking email template.

D1. Orders Tracking content:

You can choose available shortcodes for order tracking columns, remove any columns you want by leaving empty the content field of that column.

D2. Style:

You can style text in tracking table including: Font size (px); Color; Line height (px).

The plugin has been integrated the feature to build and customize the order tracking emails of the WooCommerce Orders Tracking plugin, that help to sent the tracking updates to customers.

 

Learn how to build WooCommerce Orders Tracking email with WooCommerce Email Template Customizer in this short video

 

 

WooCommerce Abandoned Cart Recovery

The plugin has been integrated the feature to build and customize the abandoned cart recovery emails of the WooCommerce Abandoned Cart Recovery plugin, that help to sent the abandoned cart email to customers.

A. How to send abandoned cart emails using the WooCommerce Email Template Customizer plugin.

Step 1. Activate the WooCommerce Abandoned Cart Recovery premium version and WooCommerce Email Template Customizer free or premium version.

Step 2. Choose available abandoned cart templates in the Email template option that are designed in the WooCommerce Email Template Customizer plugin.

 

B. How to build and customize abandoned cart email templates in the WooCommerce Email Template Customizer plugin.

You can build unlimited abandoned cart email templates using layouts and elements of WooCommerce Email Template Customizer, and shortcodes designed uniquely for WooCommerce Abandoned Cart Recovery. You can read how to build email templates here, how to customize available email templates here . After building an abandoned cart template, save that email template under “WC Abandoned Cart” type.

 

C. Shortcodes for the abandoned cart emails

  • {wacv_customer_name}
  • {wacv_unsubscribe_link}

 

D. WC abandoned cart element

The WC abandoned cart element will appear in the WooCommerce Email Template Customizer plugin when both WooCommerce Abandoned Cart Recovery premium version and WooCommerce Email Template Customizer activated, that helps to display abandoned items in order in abandoned cart email template.

D1. You can translate the quantity and price text of abandoned items in the content section.

D2. In the style section, you can style how abandoned items, product name, product quantity, product price display in email.

WooCommerce Thank You Page Customizer

The plugin has been integrated the feature to build and customize the coupon emails of the WooCommerce Thank You Page Customizer plugin, that help to sent the coupon email to customers.

A. How to send coupon emails of WooCommerce Thank You Page Customizer using the WooCommerce Email Template Customizer plugin.

Step 1. Activate the WooCommerce Thank You Page Customizer premium version and WooCommerce Email Template Customizer free or premium version.

Step 2. Choose available coupon templates of WooCommerce Thank You Page Customizer in the Email template option that are designed in the WooCommerce Email Template Customizer plugin.

 

B. How to build and customize coupon email templates in the WooCommerce Email Template Customizer plugin.

You can build unlimited coupon email templates using layouts and elements of WooCommerce Email Template Customizer, and shortcodes designed uniquely for WooCommerce Thank You Page Customizer. You can read how to build email templates here, how to customize available email templates here . After building an coupon email template, save that email template under “WooCommerce Thank You Page Customizer” type.

 

C. Shortcodes for the coupon emails

  1. {wtypc_order_number}
  2. {wtypc_order_status}
  3. {wtypc_order_date}
  4. {wtypc_order_total}
  5. {wtypc_order_subtotal}
  6. {wtypc_items_count}
  7. {wtypc_payment_method}
  8. {wtypc_shipping_method}
  9. {wtypc_shipping_address}
  10. {wtypc_formatted_shipping_address}
  11. {wtypc_billing_address}
  12. {wtypc_formatted_billing_address}
  13. {wtypc_billing_country}
  14. {wtypc_billing_city}
  15. {wtypc_billing_first_name}
  16. {wtypc_billing_last_name}
  17. {wtypc_formatted_billing_full_name}

 

WooCommerce Coupon Box

The plugin has been integrated the feature to build and customize the coupon emails of the WooCommerce Coupon Box plugin, that help to sent the coupon email after the customers subscribe.

A. How to send coupon emails of WooCommerce Coupon Box using the WooCommerce Email Template Customizer plugin.

Step 1. Activate the WooCommerce Coupon Box premium version and WooCommerce Email Template Customizer free or premium version.

Step 2. Choose available coupon templates of WooCommerce Coupon Box in the Email template option that are designed in the WooCommerce Email Template Customizer plugin.

 

B. How to build and customize coupon email templates  for WooCommerce Coupon Box in the WooCommerce Email Template Customizer plugin.

You can build unlimited coupon email templates using layouts and elements of WooCommerce Email Template Customizer, and shortcodes designed uniquely for WooCommerce Coupon Box. You can read how to build email templates here, how to customize available email templates here . After building an coupon email template, save that email template under “WooCommerce Coupon Box” type.

 

C. Shortcodes for the coupon emails

  1. {wcb_coupon_value}
  2. {wcb_coupon_code}
  3. {wcb_customer_name}
  4. {wcb_date_expires}
  5. {wcb_last_valid_date}
  6. {wcb_site_title}

 

Advanced Shipment Tracking for WooCommerce

The plugin has been integrated to be compatible with the Advanced Shipment Tracking for WooCommerce premium version.

Dokan

In the premium version of Dokan, when a vendor account is registered, the “New account” email is triggered and you can enable an option to add a verification link into the email, it would look like this:

 

When you build the “New account” email using our plugin, and you enable this verification link in the Dokan settings, then you can use this shortcode to show the link in our email template: {dokan_activation_link}

 

 

A – Prepare

A – Prepare

1 – Enqueue file JS with dependent arrays that contain ‘woocommerce-email-template-customizer-components’.

2 – Add email type (If any):

function register_email_type( $emails ) {
   $emails[$id] = [
      'name'            => 'Display name',
      'hide_rules'      => [
         'country',
         'category',
         'min_order',
         'max_order'
      ],
      'accept_elements' => [
         'component_type' //Your component type
      ]
   ];

   return $emails;
}

add_filter( 'viwec_register_email_type', 'register_email_type' );

 

3 – Add sample subject

function register_email_sample_subject( $subjects ) {

   $subjects[$id] = 'Your sample subject';

   return $subjects;
}

add_filter( 'viwec_sample_subjects', 'register_email_sample_subject' );

 

4 – Add sample template

public function register_email_sample_template( $samples ) {

      $samples[$id] = [
         'basic' => [
            'name' => 'Display name',
            'data' => 'Your sample data'
         ]
      ];

      return $samples;
   }

add_filter( 'viwec_sample_templates', 'register_email_sample_template' );

 

5 – Declare relevant parameters for JS file:

– Use filter hook: ‘viwec_live_edit_shortcodes’ to declare shortcodes in editing email template pages.

function register_live_edit_shortcodes( $shortcodes ) {

   $shortcodes[ $id ] = array(
      '{shortcode}' => 'Display',
   );

   return $shortcodes;
}

add_filter( 'viwec_live_edit_shortcodes', 'register_live_edit_shortcodes' );

 

–  Use filter: ‘viwec_register_preview_shortcode’ to replace shortcodes when pressing in Preview button.

function register_preview_shortcode( $shortcodes ) {

   $shortcodes[ $id ] = array(
      '{shortcode}' => 'Display',
   );

   return $shortcodes;
}

add_filter( 'viwec_register_preview_shortcode', 'register_preview_shortcode' );

 

B – JS

1 – Add a new category in sidebar components.

ViWec.Components.registerCategory($id, $display_name);

 

2 – Add a new component

ViWec.Components.add({
    category: 'category_id',
    type: 'component_type',
    name: 'component_name',
    icon: 'component_icon',
    html: '<div class="target_selector">HTML after stop drag</div>',

    properties: [
        {
            key: "unique_key",
            inputType: SectionInput,
            name: false,
            section: contentSection,
            data: {header: "Section header"},
        },
        {
            key: "option_key",
            htmlAttr: 'innerHTML',
            target: '.target_selector',
            section: contentSection,
            col: 16,
            inputType: TextInput,
            renderShortcode: true,
            data: {shortcodeTool: true}
        },
        {
            key: "padding_header",
            inputType: SectionInput,
            name: false,
            section: styleSection,
            data: {header: "Padding (px)"}
        },
        {
            name: "Left",
            key: "padding-left",
            htmlAttr: "style",
            section: styleSection,
            col: 4,
            unit: 'px',
            inputType: NumberInput,
            data: {id: 20, max: 250},
        },
        {
            name: "Top",
            key: "padding-top",
            htmlAttr: "style",
            section: styleSection,
            col: 4,
            unit: 'px',
            inputType: NumberInput,
            data: {id: 20},
        },
        {
            name: "Right",
            key: "padding-right",
            htmlAttr: "style",
            section: styleSection,
            col: 4,
            unit: 'px',
            inputType: NumberInput,
            data: {id: 20, max: 250},
        },
        {
            name: "Bottom",
            key: "padding-bottom",
            htmlAttr: "style",
            section: styleSection,
            col: 4,
            unit: 'px',
            inputType: NumberInput,
            data: {id: 20},
        }
    ],
    inheritProp: ['text', 'alignment', 'margin']
});

 

Description
Element
Type Identify for element
Category Group elements in order
Name Name displayed in element list
Icon Icon
html html of components after dragging to view area
Properties Declare attributes of components
Onchange Processing functions when an attribute changes
Properties
Key Attribute (href, padding, border,… or other spontanous values)
Name Display name of attributes or group of attributes
htmlAttr Classify attributes: inner HTML, style, child Style, other(href, data-*,…).
When attribute values change, the result is:
– inner HTML: Value will display in view side.
– style: set style for div cover outside of component.
– childStyle: set style for component inside as the selector declared (target)
– other: set attribute for component as selector.
Target Class or id of child component needs to edit
Section Declare group which property belongs to (content Section or style Section)
Col The display width of property control (4, 8, 16)
Input Type Input control types can be rendered: Section Input, Number Input, Text Input, Img Input, Color Input, Select2Input, Select Input, Checkbox Input, Text Editor
Data Pass data to control (Mainly pass options to select input type)
Unit Some properties need unit like padding, margin,…
OnChange Hook when occurring events with input

 

 

C – Render

1 – Replace shortcodes:

– Use filter hook:  ‘viwec_register_replace_shortcode’

 

function register_replace_shortcode( $sc ) {
   $sc['abandoned_cart'] = array(
      '{wacv_customer_name}' => 'John Doe', //John doe là tên khách hàng thực khi gửi email đi
   );

   return $sc;
}
add_filter( 'viwec_register_replace_shortcode', 'register_replace_shortcode' );

 

2 – Render element

Use action hook:  ‘viwec_render_content’

 

add_action( 'viwec_render_content', array( $this, 'render_content' ), 10, 3 );

 

The first parameter: remove needed render elements

The second parameter: Options in editing processing

The third parameter: class Email_Render

 

3 – Render all email by ID

 

$args  = [ 'template_id' => $temp_id ];
$email = new VIWEC_Render_Email_Template( $args );

$email->get_content();

$subject = $email->get_subject();

 

4 – Get email list by email type

Use function: viwec_get_emails_list($type)

 

D – Templates

Template Usage
/order-items/pre-style-1.php Order item detail preview when has no order
/order-items/pre-style-2.php Order item detail preview when has no order
/order-items/pre-style-3.php Order item detail preview when has no order
/order-items/style-1.php Order items detail
/order-items/style-2.php Order items detail
/order-items/style-3.php Order items detail
/email-header.php Email header

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.