Skip to content

Customizing the Design of Your WooCommerce Emails

woocommerce-customer-emails

There are two elements of the emails that WooCommerce sends out. The design and the text. If you would like a bit more control over the design elements, here is one way of doing it without knowing code that makes it just a little easier and extendable.

If you have used WooCommerce for any length of time, and don’t like messing around with code or creating templates, you know that the customizations for your emails that go out are pretty limited.

You have these options on the WooCommerce > Settings > Emails for the email template.

Or if you are adventurous, you can dive into the HTML template of each kind of email sent out.

The WooCommerce Email Customizer

Now if you want to have a bit more control, I would recommend that you check out the WooCommerce Email Customizer extension.

After you install and activate it, you will now find that area replaced with a customizer button.

When you click on this it takes you into the customizer where you can see the edits as you make change.

Email Header

The difference here is that you can customize the header itself, rather than it pulling from just a base color. You are also able to upload the image vs. adding a link to the image and controlling the font site. Here is what it looks like when I have tweaked it a bit and added our logo.

Email Body

The actual body of the email comes with even more customizations. You can now change the background of both the body or content. And in addition to font color, you have control of the link color to make it stand out more. As with the header, you can change font size, but you can also change the font family between Serif and Sans Serif.

There is the option of a default email width, as well as a narrow and wide width. And you can add rounded corners and adjust the shadow behind the email. Again, I have made some changes here from the original I showed you before using the narrow width option.

Email Footer

By default your store name is in the footer and that’s it. If you want to add any other copy or change the size and color of the font, you can do that here.

You can send yourself a test email to get a better idea of what it looks like. Here is my final customized email. Obviously I am going to want to make my header font and my body font smaller, or choose to not go with the narrow width. That is what’s great about being able to send yourself a test email.

If you have been looking for a bit more control over the design of those emails that go out, you may just find the WooCommerce Email Customizer extension right for you.

Adding a Special Message on Your WooCommerce Emails

If you are looking to add special messages about upcoming sales, or even a simple thank-you, it can be done for single products, groups of products or by category. The Redirect Plugin has a feature that will let you do that. Check out our post here.

Your thoughts...