Email Formatting & Styling

All styles are in the template files. Emails uses inline styles and never external.

Thank you, I understand that. My question is what file(s) are these stylings getting called from?

Referring to the customer-processing-order.php that sends the initial order email. Here is a segment of what it looks like in email. https://d.pr/i/SP4Y The “Thank you for your order” is in a Table Cell and it’s an <h1> that is styled with:

<h1 style=”color: #202020; margin: 0; padding: 28px 24px; text-shadow: 0 1px 0 #ffffff; display: block; font-family: Arial; font-size: 30px; font-weight: bold; text-align: left; line-height: 150%;”>

Where is that styling defined? It’s not in the customer-processing-order.php file. There is a line of code just before that message that says:

<?php do_action(‘woocommerce_email_header’, $email_heading); ?>

Could that be referencing something?

At the end of the day, I need to make adjustments to the styling. Smaller fonts, less padding, etc.

Thanks.

….Again, ALL styles are in the templates…They are not being called from anywhere. It is INLINE styles like I mentioned above.

For headings, look in the template file email-header.php and you will see all styles are in the template itself inline.

Okay, thank you, I found it. All I needed was the email-header.php reference that you offered. For some unknown reason, I hadn’t looked into the other php files in that same folder: email-addresses.php, email-footer.php, etc. You’re right, some of the styles are called there.

BUT, WHAT A MESS – They’re approach to formatting the email is half-baked at best.

They define a H1, but nothing else, especially H2 and H3 tags which are used throughout the email template. I had to go back to email-header.php and define a h2 and h3 code set, then hit every email template file that called them out with their special php code. For instance, anywhere you want a styled H2, you need to use the code:

<h2 style=”<?php echo $header_content_h2; ?>”>

And back in email-header.php, you need to define h2 with code that looks like this:

$header_content_h2 = “
color: ” . esc_attr( $base_text ) . “;
margin:0;
padding: 12px 10px;
text-shadow: 0 1px 0 $base_lighter_20;
display:block;
font-family:Arial;
font-size:18px;
font-weight:bold;
text-align:left;
line-height: 115%;
“;

Which again, is copied from the H1 which is the only style they defined.

Basically, their email template was way too “big” and open (spaced out) – even the simplest order took up 2 pages to print and the client wanted to get it down to one (I know that every email client and print out is going to be different) but I had to agree generally speaking.

All in all, I had to tweak 5 files to get some simple style changes.

In the days when much of these (wordpress) sites are styled and formatted via the Admin Panels, or at least in CSS, it’s frustrating to see hard coded, inline CSS buried within random files that you must then take a parent/child approach to formatting.

Thanks again for your help.

Thanks for elaborating blakemiller. It seems to me that all style is not inline contrary to what splashingpixels.com write. As you point out h2 and h3 styles are not defined in email-header.php nor referenced in for example customer-processing-order.php within those tags. Neither is styling of those tags applied in the email template preview. Yet inline styling seems to somehow be injected into those tags in mails sent out. For example this inline style is present in the order receipt Billing address header:

<h3 style="color: #505050; display:block; font-family:Arial; font-size:26px; font-weight:bold; margin-top: 10px; margin-right:0; margin-bottom:10px; margin-left:0; text-align:left; line-height: 150%;">Billing address</h3>

If it’s inline where is it defined and how is it referenced?
If it’s not inline how does this mechanism work?

Rather than doing the work you did I think it would be better to modify the style wherever it’s defined instead of having to modify each template. Apparently it is already defined somewhere as it’s appears in the mails being sent.

I found this ‘interesting’ piece in woocommerce/classes/abstracts/abstract-wc-email.php:

foreach( $nodes_h3 as $node )
	if ( ! $node->hasAttribute( 'style' ) )
		$node->setAttribute( "style", "color: " . get_option( 'woocommerce_email_text_color' ) . "; display:block; font-family:Arial; font-size:26px; font-weight:bold; margin-top: 10px; margin-right:0; margin-bottom:10px; margin-left:0; text-align:left; line-height: 150%;" );

It seems to me that this where this extra inline styling is added, and that it may be disabled by simply adding a style attribute to the tag.

In order to customize the header styles without modifying the above WC plugin file I had to disable these hardcoded style properties by adding style="" to all headers found in the emails templates and then apply my own style properties as necessary. In effect, what blakemiller did above, only now having a better understanding of why it works the way it does.

hey there,
i switched to PLAIN Email message since i found it too hard to edit style in the HTML customer-processing-order template.

However i wonder how i could make some adjustments in the PLAIN version.
After the passage:
‘your order has been received….’
the payment details such as bank account etc. come WITHOUT any breaks
wich makes it really hard to read.

also in the ‘your details’ section… same there – no breaks.

any idea where to edit and how to insert breaks?

thanks in advance
Pedro

@serons, great that you found that piece of code, but I am not able to do style="" for all h2 and h3 headers.

For example, in the customer processing order email you can find this code:

<?php do_action( 'woocommerce_email_before_order_table', $order, $sent_to_admin, $plain_text ); ?>

This is including payment information that is also using the HTML found here. Search for: “private function bank_details”.

So what to do for that?

Kind regards,

Willem

I should be able to ‘remove’ the standard styling for h1, h2, h3, img & a tags, see https://github.com/woothemes/woocommerce/pull/3653. I tried some things with the very limited PHP knowledge of mine but did not manage to remove/change the styles, anybody?