You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"
Does this snippet (still) work?
Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.3.
Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!
Business Bloomer Founder
Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.
47 thoughts on “WooCommerce: Add CSS to Order Emails”
Is there a way to add just bold (font-weight) to one item if the value / price is 0 ?
Hey Fredrik, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hey, how do we add css changes to the customer notification order or processing order? I can’t find the snippet for that. Thanks!
Hi Dave, I’ve updated the tutorial with a link to the list of email IDs. Let me know
How can I add css for text in Note/Comment section? Please see screenshot: https://prnt.sc/u7muug
We wanted to change the color to Red.
Hello Mariah, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I’m searching solution, maybe you can help me. It is possible to add class to order table in email? To be more specific I need to add class to element which contains product named “Boks”. So if product is named “boks” his should be with special class “featured”. Is this possible ?
Nope, unless you override the email template completely
Thanks so much! Works great and saved a lot of headache since editing the templates in the plugin editor was a pain. I get Woo wants to sell plugins but not adding a CSS field to email settings seems like a pretty big missing feature to me.
Thanks, this is great! I managed to get rid of a plugin which did this for me and now could style my order emails exactly as I wanted without plugin! 🙂
One question though – since it seems anything is possible by coding and without plugins… I’m not an expert at coding. I have a plugin which tracks affiliates for me. I can use a shortcode from that plugin to display the affiliate ID (I tested this by adding shortcode to a random page in my website and it correctly showed up). How can I add a shortcode directly through the code? Do you have a tutorial for this? Thank you so much for helping!
Thank you! This should help: https://developer.wordpress.org/reference/functions/do_shortcode/
Great snippet again!
Only 1 little problem. I am trying to change the font of the complete email.
With below snippet we get a lot done.
But for some reason, the standard text (productname etc) is not changing.
All the h1, h2, etc are changing correctly.
We are using this snippet:
For some reason, the words ‘Shipping method and Payment method are not changing.
The values in these fields ‘Ex: free shipping’ is changing correctly.
What do we do wrong?
Please remove those add_action
Worked beautifully for customising our New Order email to reduce spacing and hide unnecessary elements so that it would print on one page. Thanks for sharing 🙂
Thanks for the snippet. I try to hide a specific table cell with a pseudo class
, but without success. Any way to achieve this? Thank you
Are you testing on Gmail? I think it doesn’t accept CSS pseudo classes
What if I want to edit the actual HTML of the footer of the WooCommerce email?
Hey Kosta, if you’re referring to the content, you can change that in the WooCommerce > Settings > Emails page
Hi Rodolfo, thanks for all your awesome woocommerce tutorials.
I have updated the CCS for the woocommerce emails, and everything is being updated with the exception of the actual order item text. ie , the text inside Product, Quantity and price, although the table headers, Subtotal, Shipping , Paymenet method and total are all correct. of course i’ve updated the .td style.
Its really interesting I’ve added the following
add_action( ‘woocommerce_email_header’, ‘add_css_to_emails’ );
add_action( ‘woocommerce_admin_new_order’, ‘add_css_to_emails’ );
add_action( ‘woocommerce_email_order_details’, ‘add_css_to_emails’ );
add_action( ‘woocommerce_email_order_items’, ‘add_css_to_emails’ ); // thought this might override the order item
add_action( ‘woocommerce_email_adresses’, ‘add_css_to_emails’ );
add_action( ‘woocommerce_email_footer’, ‘add_css_to_emails’ );
Hope you find this interesting, I am sure you’ve come across this one before 🙂
Thanks so much for your comment Keith!
Thank you for this snippet it works good in ipad and medium screen but the email in the mobile screen look like disappear half of the email?
what i will do in this case?
Ohoud, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Thanks for this snippet, it works wonders for simple tweaks!
Could anyone help me to remove the total sum from new order’s email for customer as well as for admin in Woocommerce 3.2.6? Subtotal, Payment method and all other info must stay. I want remove total sum ONLY.
If it’s impossible, maybe the ease and simple way will be just to set white color for total label and price, so it will not visible? ))) I understand, it’s little bit funny, but it may work.
Hey David, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
I am trying to insert a table into the woocommerce_email_after_order_table location of the customer completed email. I am getting the table into the section but I want to change the styling. The table is a tablepress shortcode which I am inserting using the do_shortcode function. When I look at the email I see the following:
I would like to change the text alignment along with the padding. Is there some way that I can do this?
Sorry, it doesn’t look like the coding came through properly.
No problem David!Maybe you can add CSS to WooCommerce emails with this: https://businessbloomer.com/woocommerce-add-css-woocommerce-emails/
Awesome code find, thank you! I’m wondering why I’m getting a warning though when I add this to my functions? Thank you!
Warning: Missing argument 2 for add_css_to_email() in /home/xxx/public_html/wp-content/themes/xxx/functions.php on line 421
Hey Sara, thanks for your comment! I tried this again on Woo 3.2.3 and I get no warning. Also on PHP7. Not sure really 🙂
Is there something that need to be changed in snippet 2 in WooCommerce 3.0?
I cant get it to work :/
Hey Simon, thanks for your comment! Are you using the exact same snippet?
Thanks for the great tutorials! They are very helpful. I have a question for you please.
Why are php start / end tags written in an unusual order?
Good question James! So, we’re already in a PHP file and writing a PHP function. The opening PHP tag is already in such file (functions.php), so to echo HTML or CSS we need to close it and then reopen it when we’re finished with the HTML/CSS bit. Does this help?
I’m not a coder…
I would like to print products on the emails in different formats, depending on product category. So like
All products from category 1 = font=blue
All products from category 2 = font=red
and so on.
How and where do I do this?
Hello Patrick, thanks so much for your comment! You could try to combine this snippet with this other tutorial (https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/) in order to apply PHP conditionally. Unfortunately this is custom work and I cannot provide a complementary solution here on the blog. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R
Thanks a lot for your reply!!! Great link. I think with this I can work…
Awesome to hear that Patrick 🙂
First of all, thanks for this! It seems to exist on one place on the internet, and that is here!
I am having difficulties with the if statement.
I believe it might be because of the email IDs having changed. Can that be the case?
Do you know of a list of these email IDs that can be used.
Most importantly, what should I but if I only want to make a change in customer order complete email.
I think I managed to solve it finally by doing so:
Great, Marcus, thanks for following up! Much appreciated 🙂
Dude, thank you, thank you, thank you. You just solved my week-long search for how to do this. So glad I found your comment.
I had the same question as Marcus (a list of the email IDs) and found them here: