WooCommerce emails have always been a pain point for store owners looking to create beautifully branded transactional emails without diving deep into custom PHP templates.

While WooCommerce recently improved its email customizer settings, they completely dropped the ball (in my opinion) by not modernizing with Gutenberg blocks as others in the community had hoped.

That’s why I’m excited to introduce Email Designer for WooCommerce®, an experimental plugin that brings block-based email customization to WooCommerce® for the first time.

This is the 0.1 release, and while it’s still a work in progress, it lays the foundation for something I believe the WooCommerce® community truly needs.

What is Email Designer for WooCommerce?

This plugin allows you to fully customize all of WooCommerce’s default emails by creating custom templates using the WordPress® block editor.

Instead of manually editing WooCommerce’s email template files, you can now design your emails with a familiar interface that’s built directly into WordPress®.

Key Features in Version 0.1:

• Uses the WordPress® block editor to build email templates.
• Supports all WooCommerce default email types (e.g., New Order, Customer Invoice, Completed Order, etc.).
• Custom shortcodes for order details (since WooCommerce doesn’t provide native blocks for this yet).
• A foundation for full Gutenberg support in the future.

Current Shortcomings (A Work in Progress)

As excited as I am about this initial release, there are still some major limitations that I’m actively working on solving:

1. Lack of Blocks for Order Details

From what I can find, WooCommerce® doesn’t currently provide a way to insert order details using Gutenberg blocks, even though it’s mentioned on this page.

Maybe I’m just not seeing it available on my site 🤔

This means I had to create shortcodes for now.

I know this isn’t the ideal solution, and I’d love to explore a more seamless block-based approach in the future.

2. Custom CSS Challenges

The block editor provides a lot of styling flexibility, but WooCommerce® emails don’t handle block-generated CSS well. Specifically:

• Using has-primary classes by selecting your theme’s color palette doesn’t always apply correctly in the email templates, whereas setting a custom hex color works fine.
• Spacing properties like margin and padding are also tricky to get right and require custom pixel numbers to be set like the color hex’s.

3. WooCommerce’s Lack of Gutenberg Adoption

Despite WooCommerce being a flagship project in the WordPress® ecosystem, their approach to email customization still doesn’t leverage the core block editor.

Many in the community have been advocating for WooCommerce to modernize its email system, as seen in this GitHub discussion:

🔗 WooCommerce GitHub Discussion

For all the talk about Gutenberg being the future of WordPress®, many major plugins still aren’t adopting it for key features like email design.

The WooCommerce® community deserves modern email customization tools, and I hope this project helps push things in the right direction.

Why I’m Building This

I run Devio Digital, where I sell WordPress® plugins, and I personally need a better way to design WooCommerce emails without clunky custom template overrides.

Instead of waiting for WooCommerce® to step up, I decided to build my own solution and share it with the community.

I’m actively looking for feedback and contributors to help shape the future of WooCommerce® email design.

If this is something you care about, I’d love to hear your thoughts!

Let’s Talk

If you run a WooCommerce® store, develop plugins, or are just passionate about better email customization, I’d love to connect!

Let’s work together to create a modern solution that brings WooCommerce® emails into the Gutenberg era.

Drop a comment, open an issue on GitHub, or find me on Twitter/X to discuss the future of WooCommerce® email design. 🚀