One of the top requests for our Kadence WooCommerce email designer is to add a way to make WooCommerce emails responsive/fluid for better mobile support. If you’ve not had to create email templates before this may sound easy. Unfortunately, it’s not as simple as it might seem. But I’m excited to announce that with our update to version 1.3.0 this is now an option along with several other great features!
Mobile Responsive Transactional Emails
Woo Standard – iPhone
Responsive – iPhone
Email Clients Rendering Inconsistencies
Emails are not read and processed by a traditional browser. Instead, it’s the email inbox that defines how emails are rendered and appear to you. These inboxes (Gmail, Outlook, Apple Mail) all use different systems to render emails and they are nothing like how a browser works. For example, Outlook uses the Microsoft Word engine to render emails. This means many of the normal CSS options that define styling for HTML don’t work for an email. To give an example, Outlook 2019 HTML rendering ignores the border-radius property entirely.
This means each styling decision and method to create a fluid/responsive layout required a lot of examination followed by a lot of testing. To implement this update, I used the services of Email on Acid, which allowed me to get previews of how these emails appear in a huge range of email clients. You can see the results of this testing below.
Emails with Order Tables for Mobile
The next hurdle was to determine how to make the data tables gracefully shrink without content becoming a jumbled mess.
In the end, I decided to make all the tables two columns and move the extra columns into one of the two remaining columns. For the order table, this meant moving the quantity amount below the product title.
With the WooCommerce digital product downloads table, the expiration is now inside and below the download link.
For WooCommerce Subscriptions email table, this meant moving from a four-column row into two-column rows.
Minor Structural Changes for WooCommerce Emails
To accommodate billing and shipping addresses I moved those into two rows instead of a column section.
One final structural change required that I move the order notes out of the table and into a section below the order table. To me, this seems like something core should already be doing anyway since it doesn’t look good as part of the order table. So I also added this as an option for standard emails as well.
New WooCommerce Email Features
To support WooCommerce 3.7, we’ve included an additional content section into the emails which allows you to add custom HTML to the bottom of each WooCommerce email.
You can know “zebra” style your email data tables by applying a different background to every other line.
We’ve added a new button styling section which allows you to better style links that are part of the WooCommerce email templates.
Free Responsive Template
Download a FREE importable email design using the template design featured in the images of this post.