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 the following reason

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 ?

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?