1. Are you receiving unstyled email ?

1. WordWrap

This is another utility WooCommerce uses before sending the email. The purpose of the utility is to break the email content into multiple lines by inserting a new line character (\n ). The default column limit is 70.

This is good. But this sometimes would break your CSS style. Let us see an example.
Check the following HTML snippet.
 
<table width="640" id="id1521479474521RAND82048" cellspacing="0" cellpadding="0" border="0" align="center" data-type="title" class="em-main" style="display: table; background-color: rgb(249, 192,23)">

Looks good. Right ?

<table width="640" id="id1521479474521RAND82048" cellspacing="0" cellpadding="0" border="0" align="center" data-type="title" class="em-main" style="display: table; background-color: rgb(249, 192,\n23)">

Sometimes, when this is parsed through wordwrap, this might end up as:

Notice the newline character that got inside the color code:  
rgb(249, 192,23)

After the wordwrap, a newline character got inside the rgb attribute.rgb(249, 192,\n23)

This would break the style.

Solution

Edit /wp-content/plugins/woocommerce/includes/emails/class-wc-email.php 

Around line number 479, you would see :

return wordwrap( $email_content, 70 );

Change this to:
 
return $email_content;

 Save.

NOTE: Unfortunately, WooCommerce does not have any hooks running before / during / after the wordwrap method. So the fix has to be made to the WooCommerce email helper to correct this behavior.

Hope the article helps you.  

If you have a feedback, please feel free to click the chat icon at the right corner and send us a word :-)
 

2. How to create a template override for order items table ?

If you would like to customize the order items table appears in your email, you will have to create a template override for following files

/wp-content/plugins/woocommerce_email_cuztomizer_with_drag_and_drop_builder/templates/woo_mail/order_items-3.php/wp-content/plugins/woocommerce_email_cuztomizer_with_drag_and_drop_builder/templates/woo_mail/email-order-items-3.php/wp-content/plugins/woocommerce_email_cuztomizer_with_drag_and_drop_builder/templates/woo_mail/order_totals-3.php

Copy the above files and paste it under the directory path

/wp-content/themes/YOUR-THEME/woocommerce_email_cuztomizer_with_drag_and_drop_builder/woo_mail/

Then, edit the overridden file and make your changes. Save.

3. Are you receiving default email instead of the email template created inside our plugin ?

It is because, you might be having multiple languages in your site but have not created the email template for all the languages. For example: You are having following such languages in your site (English, German, French) and created the email templates only for the language English. If customer places an order using the language French, then he will receive the default email because there is no email template for the language French.

So always you should make sure that you have created email template for all your site's languages.

4. Don't get the email template to edit after selecting language, email and order and it keeps showing loading..?

The issue was due to the following definition added in the wp-config.php file.

Edit wp-config.php and find the below line

define( 'DISALLOW_UNFILTERED_HTML', true );

And comment the above line. So now it looks like:

//define( 'DISALLOW_UNFILTERED_HTML', true );

You can now be able to edit the email templates and save.

Once you have completed the editing, please uncomment the definition. (Just remove the two forward slashes)

5. Wish to customize the layout of the email?

 
Many a times, you might want to stylize the layout of the email or make few modifications. For instance, you may want to change the color of the Title text or the font of the order items table. This can be achieved by adding custom  CSS code to the app's settings.


Path to insert custom code:

Navigate to /WooCommerce/WooCommerce  Email Customizer/ Settings/Custom CSS.

There you will find a text area where you can enter the custom CSS code.

Here is a screenshot that would be of help:

 Once the settings button is clicked, a page will be displayed which will look like this:

Let us consider a scenario where our aim is to change the color of the title text to red and change the font-family and font-weight of the order items table.
Here is how we can achieve it:

Now that we have added the code, this is how it has taken effect on the layout.

Similarly, other layout changes can also be made by adding custom CSS to the plugin settings. 

6. How to copy a template to another?

To copy the content of another email template:

Navigate to WooCommerce->WooEmail Customizer->Choose the language, order status, sample order.
Now there will be an option that says "Copy from" at the right side of the page.
Click on Copy from at the right side of the top bar. Clicking on this icon will show you the popup to choose from which language and template you wants to copy the content.

7. How to revert back to the default email template?

 Post creating email templates using the WooCommerce Email Customizer plugin, if you wish to revert back to the default email template, then here are the steps to be done:
Navigate to WooCommerce->WooCommerce Email Builder->Settings->Reset all template to default.
Once you click on the revert icon, you will be prompted with a confirmation message.
The option to be selected is "YES, I'M SURE".
After clicking the option, a success message will appear that confirms the reversion.

Screenshots:
 

And that is it. You have now reverted back to the default email templates. 

8. Are you struggling with customizing email templates ?

If you are working on "Safari" browser, please try using Email customizer on either chrome or firefox browser.

Did this answer your question?