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)

 

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

 

 

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' );

 

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

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

Follow this guide on how to override VillaTheme plugins’ templates via a theme.

In both the free and pro versions, our plugin supports external shortcodes. You can build your shortcode, it’ll show the value if the shortcode is built correctly.

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

 

In the pro version, the plugin provides shortcodes for metadata

• Get customer order meta

[wec_order_meta meta_customer_order="yes" key='META_KEY_NAME']

• • meta_customer_order: Use this parameter to get the user meta: meta_customer_order="yes"
  • key: Get the correct user meta key (it is not the order meta key). For example: key='first_name' or key='last_name'
    • with 'first_name' can be changed by other user meta key.

• Get order meta

  • In email content: [wec_order_meta key='']

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

However, as the meta data is saved as an array, you’ll need to specify the array key in the placeholder to ensure its value functions correctly.

• • • key: Get the correct order meta key. For example: key='_billing_first_name' or key='_billing_last_name'
      • with _billing_first_name can be changed by other order meta key
  • In email subject: [wec_order_meta_subject key=""]

Add meta key name to display custom value. For example: [wec_order_meta key='META_KEY_NAME'] this works the same as In email content.

This article is an example of creating a shipment tracking number placeholder for major WooCommerce shipping tracking plugins, then generating your own placeholder for any plugin, in particular with the WooCommerce Email Template Customizer plugin by VillaTheme without requiring any developer expertise or coding skills.

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

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.

– Class & id: Specify a class and/or ID for the component. Each component can have only one ID, but you can assign multiple classes, just separate them with spaces.

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

 

The email contents from third-party plugins can be incorporated into the email templates of the WooCommerce Email Template Customizer plugin (WETC plugin) in various ways. This depends on how the third-party plugin is designed. They can either utilize the WooCommerce Hooks in the default order emails of WooCommerce or go through the default email of the WETC plugin, or design new email types. This article will instruct you on how to display the email contents of 3rd plugins on the template of the WETC plugin in each situation.

 

 

 

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
WPML	OnTheGoSystems
Polylang	WP SYNTEX

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.