From the course: WordPress: Customizing WooCommerce Themes

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Match email and theme colors with CSS

Match email and theme colors with CSS - WordPress Tutorial

From the course: WordPress: Customizing WooCommerce Themes

Start my 1-month free trial

Match email and theme colors with CSS

“

- [Instructor] There's a few plugins out there that help you customize your emails, but no of them allow you to customize every single detail. If you want to be able to do that, you have to do it with CSS. Many email clients don't render CSS correctly. So if you write a block of CSS at the top of an email, it won't get properly rendered and your email will look awful. Email clients do render inline styles correctly. To make this process easier, WooCommerce automatically takes your normal CSS and applies it manually to each HTML element. This is called inlining and it helps email clients. The downside is that you can't just add email styles to a style.css template. You have to use a hook to add the extra CSS. I've opened up my themes functions.php file, and we need to modify the styles that are already being sent to WooCommerce. To do that, we're going to use a filter. The specific filter we're going to use is woocommerce_email_styles and then we need to have a function that does…

Contents