1. Are you receiving unstyled email ?

WooCommerce uses the Emogrifier class to add inline styles to the email. It is a small utility to convert css to in-line styles.

However, while parsing your template, this breaks some of styles you have made.

That is the reason why a few of the styles got broke.

Solution is to change the styles for that block (You can re-design that block alone)

If it keeps breaking, then here is a quick workaround

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

Around line 462, you will find

$content    = $emogrifier->emogrify();

Change this to

//$content    = $emogrifier->emogrify();

Save

This would mean that the content does not pass through emogrifier utility.

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?