Website Building » WooCommerce » How Do I Change Email Color in WooCommerce?

How Do I Change Email Color in WooCommerce?

Last updated on January 17, 2023 @ 4:12 pm

There are a few ways that you can change the email color in WooCommerce. One way is to simply edit the CSS file that controls the email colors.

This can be done by going to your theme’s folder and finding the style.css file. Once you have found this file, you can search for the “#woocommerce_container” ID and then change the color values for this ID.

Another way to change the email color in WooCommerce is to use a plugin. There are a few plugins available that will let you customize the colors of your WooCommerce emails.

One of these plugins is called “WooCommerce Custom Email Colors.” This plugin will let you change the background color, text color, and link color for your WooCommerce emails.

If you want to change the email color in WooCommerce without using a plugin or editing any files, you can use a CSS class. To do this, you need to add a class to the body tag of your email template.

PRO TIP: Please be aware that changing the email color in WooCommerce may result in the emails not being legible. We recommend only changing the color if you are sure that it will not affect the readability of the emails.

The class should be called “woo-commerce-email” and it should have a hex code for the color that you want to use. For example, if you want to use a light blue color, you would use this code:

Once you have added this class to your email template, you need to add some CSS code to your theme’s style. The CSS code should look like this:

woo-commerce-email {
background-color: #00FFFF; /* Change this to the color you want */
color: #000000; /* Change this to the color you want */
}

You can also add this CSS code directly to the section of your email template.

The last way to change the email color in WooCommerce is to use inline CSS. To do this, you need to add a style attribute to the body tag of your email template.

The style attribute should contain the CSS code that you want to use. For example, if you want to use a light blue color, you would use this code:

<body style="background-color: #00FFFF; /* Change this to the color you want */">
Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.