Part 1: Introduction

Beautifully Customized WooCommerce Emails

Email Customizer enables full customization of your WooCommerce emails. Customize colors, header & footer format, add custom links, link to your social networks, and customize what the email says - with shortcodes - all using the familiar WordPress Customizer interface. You no longer need to be a developer to do this. And if you still want to you can add your own custom css too.

Currently customization requires going into the code and editing the php template files, which isn't really an option for a non-programmer, and can be slow even if you are. We wanted to give you an environment that is simple to use, gives you a live preview of your customizations, and can send a test email when you are done. That's what Email Customizer for WooCommerce does.

The plugin also adds functionality to your WooCommerce Orders page so you are able to open a preview of any of the email templates (New Order, Invoice, Processing Order, etc), and send/resend that email to your customer or yourself.

Email Customizer for WooCommerce has made managing the email communications sent from our store much simpler and more beautiful - making our whole operation look and sounds as solid as it is. We think it can do the same for you.

Great For:

• Customizing of the  the styling, colors, header & footer format, add custom links, link to your social networks, and now even customize what the email says.
• Tailor what your customer reads and sees, before you send it - helping your operation to look and sound as solid as it is.
• Developers who can now also easily preview changes as they develop, modify or enhance their email template files.
• Shop Managers who want to preview & send/resend emails (New Order, Invoice, etc) right from the WooCommerce Order page.

Happy Conversions!


 

Part 2: Documentation

1. Installing the plugin:

1.1 Make sure that WooCommerce is installed and working on your site. For instructions on installing the WooCommerce plugin see here.

1.2 Install the Email Customizer plugin into your WordPress installation by following the normal steps here.

2. Plugin Locations:

There are 3 places you will see our plugin:

• WooCommerce → Email Customizer
• WooCommerce → Orders: Email Customizer
• WooCommerce → Settings → Emails (tab): Email Customizer

3. WooCommerce → Email Customizer:

image00

3.1 This layout is based on the built in WordPress Theme Customiser using the full-width to enable you to see and manage the Email efficiently.

3.2 Email to Show:
Choose which email template to see in the preview window to the right.

3.3 Order to Show:
Choose which order to show in the email template preview.

3.4 Template to Show:
You can choose the built-in WooCommerce or the Deluxe template. When a template allows customizing (like Deluxe) the Customize Template button will become active.

3.5 Customize Template:
Click customize to reveal the panel that will allow you to fully Customize the style and content of your emails. (see below for more on this panel)

3.6 Template to Show:
You can choose the built-in WooCommerce or the Deluxe template. The latter will reveal the Customize Template button

3.7 Show Header Info:
This will slide down to show a panel above the preview with the Meta info that is sent along with the email - Subject, From Email,

3.8 From Name, To Email.
We also added simple Edit links that will pop out the WC email settings tab for you to modify these settings.

3.9 Send a Test: 
This field can take a comma separated list of email addresses, and will send the email that you see in the preview window to the email address(s) you specify. We pre-populate the field with Billing Email Address from the selected Order, so feel free to change this and Send a Test.

4. WooCommerce→Email Customizer→Customize Template :

image00

4.1 Text Fields (Heading, Main Text, Footer Text): The top fields are usually the text fields that pertain to the current email type that you are looking at eg New Order. Here you can edit this text and see what it will look like in the preview. You should also use the suggested [shortcodes] in the text as, in the case of the Reset Password email, these fields are used to feedback dynamic information to the client - eg a Reset Password link, or an Order Number or Order link. You'll see a list of Allowed Shortcodes below showing you all the possible Shortcodes you could use. Each field is equipped with a Reset to Default button that you can use to return the field to it's suggested default value, so don't be afraid to experiment with some fun new text.

4.2 Styling Fields (Page Color, Border Radius, etc):
Theres a lot of potential here to style the email as you'd like to more align it with your store or brand. Again seeing the preview in real-time.

4.3 Logo:
Upload your logo or any image that will appear in the email. This field defaults back the logo set in the WooCommerce→ Email Settings.

4.4 Top Buttons (x, eye):
The Eye when hovered over does a quick reveal of the email so you can see the results of your changes without having to close your edits. The X will ask you if you are sure you'd like to close the panel without yet Saving & Publishing

4.5 Save & Publish:
This is the final click that you will use when you are happy with your customizations and are ready to Save & Publish the changes. From this point on your WooCommerce store will use the newly Customized emails when sending to your Customers.

* We always advise sending a few test emails to yourself or a test customer to make sure everything is working as expected.

* Please also note that Emails that have been created by third party plugins, that have not been explicitly catered for in our template set, will just not allow the editing of the text in the email. The colors, styling, logo and footer will all be fine, it is just that you will not be able to edit the text.

5. WooCommerce → Orders: Email Customizer

image02

5.1 Emails Control Panel:
When you are viewing an Order in WooCommerce the WooCommerce backend you will now have the Email Customizer panel

5.2 Emails Select:
Allows you to choose which of your Email Templates you'd like to Send or Preview

image05

5.3 Preview Email Button:
Once you've selected your email template above you can click this button to popup it's preview.

This will take you to the preview of the email you choose, so most importantly you can see how it will look to your customer

image04

Click the ▼ to see the Header Info that will be sent with the email - Subject, From Email, From Name, To Email.
Click the image06 to close the preview to return to the Order.

image01

5.4 Send Email Button:
This initiates a send of the selected template to the Order Billing Email address.
You also have a chance to change the sending address before sending - e.g. you may wish to send yourself a test before sending to your customer

6. WooCommerce → Settings → Emails (tab): Email Customizer

image03

6.1 In the WooCommerce Settings we now give you the ability to preview each individual email, as well as being able to see an Order in the template, and send to any customer.


Part 3: Internationalization (Translation)

Internationalization of our Plugin to your language:

Go here to get general information about WordPress plugin internationalization.
To get our plugins to display in your own language creating these .po & .mo:

• email-control-en_US.mo
• email-control-en_US.po
Then you can put the files in either one of the following locations:

• /wp-content/languages/email-control/
• /wp-content/languages/

For Custom Text Areas
The way to translate custom fields: They will not appear automatically in WPML or any other translation plugin as they are created dynamically at runtime – you need to add the string manually in WPML (copy-and-paste them) and do the accompanying translation there. Then when the custom text is called, it will use your newly translated version.


 

More about this and our other plugins on CodeCanyon