Working with WooCommerce email header images

The WooCommerce email header image field allows you to provide an image URL that will appear at the top of most of store emails.

---

What size should the header image be?

Short answer

If you’re using the templates provided by WooCommerce (no theme or plugin overriding them), I would suggest using an image that’s 600 pixels wide. The height doesn’t matter.

The details

The default WooCommerce email templates just chuck the provided URL in an image tag without a width or height specified, so the mail clients should match the size of the image you provide.

Because of that, any height will work: the image will just push the remaining content down. And because the image is set to center, any width will look (somewhat) appropriate. However, images wider than 600 pixels will further stretch the viewport on mobile devices, making the emails look more cramped than they already do.

Sizes for emails provided by themes or plugins

All of the email-customizing themes and plugins I’ve looked at allow for any size of header image. If you’re not sure if yours does, I like the WooCommerce Email Test plugin which lets you preview how the emails will actually look with different header sizes.

Kadence’s WooCommerce Email Designer goes one step further and gives you a free responsive template if you sign up for their newsletter. That means it scales intelligently to smaller devices, something that’s clunky with with the default Woo templates.

Uploading a header image

If you don’t already have an image URL and need to upload a file:

1. From the WordPress admin area, click Media, Add New, and upload the file.
2. Click its thumbnail in the media library to open the item, and copy the URL from the Copy Link field.
3. Paste the URL into the header image field under WooCommerce, Settings, Emails, Email Template.

Troubleshooting broken or missing email header images

If it doesn’t even look like the email has a place for the image to show up, it’s most commonly because:

1. The email is set to plain-text. See my email formats article for more information about when and how to change that.
2. A plugin (most commonly email-designer plugins) is altering the appearance of the email. Check the plugin settings or documentation to see if it has a different way of specifying the header image.
3. Your WooCommerce email templates have been modified or overwritten, sometimes by a theme. You can check to see if this is happening on the WooCommerce, Status screen near the bottom in the Templates, Overrides section.
4. The email client is blocking loading of images for privacy’s sake.

If the image block appears, but the image link is broken, it’s most commonly because:

1. The URL is invalid. Double check the URL entered in the header image box. Does it load correctly when opened directly in your browser’s URL bar?
2. Access to the image is being blocked when loaded in an email client. Is your web server or a WordPress plugin blocking “hotlinked” image access? Are you using a CDN that might be blocking access to “suspicious” outside traffic?
3. Your email provider “proxies” images. Usually email providers have a way of turning off proxying/caching features if they’re causing problems with outgoing messages.

You’ve somehow made it to the end of this boring article without falling asleep…

…so here are 3 randomly-generated emojis that will surely tell a compelling story: