How to Add CSS to WooCommerce Emails in WordPress?

How to Add CSS to WooCommerce Emails in WordPress?

Today in this blog, we are going to tell you How to Add CSS (Cascading Style Sheets) to WooCommerce Emails in WordPress? Unlike your WordPress theme, you cannot just add CSS to your style.css in order to customize the look of the WooCommerce Emails.

This easy PHP snippet is accordingly the only usable solution. By using the WooCommerce Email Hook Guide Guide, I identified an action called WooCommerce email header, which is the first thing that gets called by WooCommerce while “assembling” an email.

Through this hook, we can then search some CSS that will be applied to every email. Note: WooCommerce email header is a hook that all emails have in common.

In case of any help related to WooCommerce Setup talk to our WordPress Experts, dial + 1 844 897 0441(Toll-Free).

woocommerce customize email css

PHP Snippet 1: Add and Edit CSS on the WooCommerce Emails

/**
* @snippet       Add CSS to WooCommerce Emails
* @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
* @sourcecode    https://businessbloomer.com/?p=20648
* @author        Rodolfo Melogli
* @testedwith    WooCommerce 2.6.2
*/
add_action('woocommerce_email_header', 'bbloomer_add_css_to_emails');
function bbloomer_add_css_to_emails() {
?>
<style type="text/css">
h2 {
color: red;
}
h3 {
font-family: Courier;
}
table thead th {
background: yellow;
}
</style>
<?php
} 

PHP Snippet 2: Add and Edit CSS on a Specific WooCommerce Email

/**
* @snippet       Add CSS to a Specific WooCommerce Email
* @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
* @sourcecode    https://businessbloomer.com/?p=20648
* @author        Rodolfo Melogli
* @testedwith    WooCommerce 2.6.2
*/
add_action('woocommerce_email_header', 'add_css_to_email', 20, 2);
function add_css_to_email($email_heading, $email) {
// Adds CSS to "new order" email only
if ( $email->id == 'new_order' ) {
?>
<style type="text/css">
h2 {
color: red;
}
h3 {
font-family: Courier;
}
table thead th {
background: yellow;
}
</style>
<?php
}
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file before “?>” (CSS goes in your child theme style.css file).

Make sure to edit this files with an FTP software and not by the WP Editor. If you need more guidance, please have a look at our wpglobalsupport.com. That’s all on our behalf and we hope that this article helped you to solve your problem.

Get help from our WordPress Technical Support team in case of any issue related to WordPress. We are having a team of well-qualified professional who will resolve your problem instantly. So dial our number + 1 844 897 0441(Toll-Free).

Read More:



Leave a Reply