Why Your Custom WooCommerce Emails Look Broken in Gmail

I got a call from a client with a slick WooCommerce shop. Everything was dialed in, but their transactional emails—order confirmations, shipping notices—looked like they were straight out of 1999. A real brand killer. They wanted them to match their site’s design. “Should be easy,” I thought. And that was my first mistake.

The core of the problem is that crafting reliable HTML email styling is a completely different universe from web development. You can’t just link a stylesheet and call it a day.

The Gmail Style Gauntlet

I built out a beautiful template on my local machine. Used modern CSS, everything looked pixel-perfect. Sent a test to my own Apple Mail client, and it was flawless. I shipped it over to the client for a quick review. The reply came back fast, with a screenshot attached. “It’s all broken on my end.” It was from Gmail. Total mess. All my styling was gone. Just plain, unstyled text.

My first thought was, of course, that Gmail was doing something weird. I figured I could force it. I started throwing `!important` tags on everything, trying to bully the styles into place. Wasted a good hour going down that rabbit hole. Trust me on this, it doesn’t work. The real issue is far more fundamental.

Email clients, and Gmail is the king of this, are notorious for stripping CSS out of the `` of your document. They just ignore it. To them, it’s a potential security risk or a performance drag. So your beautifully crafted stylesheet might as well not exist.

The Only Real Fix: Inline Everything

After the initial frustration, I remembered the cardinal rule of email design: you have to inline your CSS. Every. Single. Style. It’s a tedious process that feels like a huge step backward, but it’s the only way to get consistency. You can’t put styles in the head; you have to attach them directly to the HTML elements.

<!-- This gets stripped by Gmail -->
<style>
  .button {
    background-color: #0073aa;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
  }
</style>
<a href="#" class="button">Click Me</a>

<!-- This actually works -->
<a href="#" style="background-color: #0073aa; color: #ffffff; padding: 10px 20px; text-decoration: none;">Click Me</a>

Manually inlining styles is a total nightmare. Luckily, there are tools for this. Years ago, I ran into a similar problem and a post, much like the one I read on carlalexander.ca, pointed me toward automated inliners. Mailchimp has a great free tool that will take your HTML and your CSS and spit out a version with everything inlined. It saves hours of painful, error-prone work.

So, What’s the Point?

The lesson here isn’t just about CSS inlining. It’s about understanding the environment you’re building for. Email is not the web. You have to forget about modern conveniences and code defensively.

• Assume Nothing Works: Go in with the mindset that email clients are hostile environments for your code.
• Inline Your Styles: It’s the only way to be sure they’ll render.
• Use Tables for Layout: Yes, tables. Like it’s 2002. It’s painful, but it’s the most reliable way to structure a complex email layout.

Look, this stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before.

Have you ever lost a day to a “simple” email template? I want to hear about it.