How to Change WooCommerce Email Colors

Table of Contents

Do you want to customize the color of the emails you sent out to customers? WooCommerce is a powerful solution that provides you with everything you need to run an online store.

By default, WooCommerce provides an email template and many WooCommerce users do not know how to customize it.

It takes a long time to set up a store because you need to select a good theme, add all the products, create an engaging user experience, and ensure that each detail is perfect.

You should also customize the emails sent out to customers.

The email template included is generic and needs a little improvement to match your brand. It will also improve the user experience on your site.

Many clients have asked us to customize their order emails.

This is why we decided to create a tutorial about WooCommerce email templates.

Change WooCommerce Email Colors

In this post, we’ll share how you can change the look and feel of your email template.

We will look at the built-in settings to customize the email template colors. After that, you’ll learn how to change the email template and create custom email templates.

Let us look at how you can achieve this.

Steps to Change WooCommerce Email Colors

This is how the default order email template is displayed:

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on WooCommerce > Settings
Click on the Email tab and scroll down to the Email Sender options.
This page includes options to customize the email template. These options include a header image, footer text, and colors. Your email template should match your brand colors.

If you are comfortable with a little coding, you can go beyond just changing the styling of the email. You can also change the contents as well.

WooCommerce provides us with several options to change email templates.

Let us look at how you can do this without having to change anything in the core plugin.

Changing the Email Template

WooCommerce sends out emails to customers on order creation, completion, payment invoice, and any changes made to order.

To override this template, copy the file path: {theme/file-path}. This is an advanced option to customize WooCommerce order emails.

Each email sent out to your customers is a combination of templates. This gives you modular control over the customization.

You only need to copy the required template file to your theme folder and then edit it. For example, if you want to change anything in the footer, go to email-footer.php. If you wanted to change anything in the header, you will have to edit the email-header.php file.

For illustration purposes, we will change the footer text color. The footer text color is set to a lighter shade of the base email color you select.

To change it to any color, we will have to edit the email-footer.php.

The file is located under wp-content/plugins/woocommerce/templates/emails/email-footer.php.

Copy it to wp-content/themes/your-theme/woocommerce/emails/.

Open and edit the email-footer.php, and edit the contents:

$credit = "

    border: 0;

    color: black;

    font-family: Calibri;

    font-size: 12px;

    line-height:125%;

    text-align: center;

";

Conclusion

In this post, you’ve learned how to customize the email template. WooCommerce provides you with built-in options to customize this template.

We’ve also shared a solution to customize and change an email template.

If you need help, please consult a qualified WordPress developer.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Change WooCommerce Email Colors

Change WooCommerce Email Colors

Steps to Change WooCommerce Email Colors

Changing the Email Template

Conclusion

Similar Articles

Related