While we make sure that your email styles are preserved as you see in the Email Builder, sometimes you would get unstyled emails. 

This was primarily due to two reasons.

1. Emogrifier

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 sometime would break some of styles you have made.

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

Solution 1:

You can considering re-designing the block (usually a specific block style alone gets affected. So changing the style for that block in the builder might help.  )

Solution 2:

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

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

<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)">


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 :-)
 

Did this answer your question?