How to Add CSS to Order emails

You have set up a wordpress site and designed it in the way you want to highlight your brand and your business. Now, you want to customize your order emails to match with your store. WordPress is a great platform for almost all your online businesses, but there are some solutions that require further enhancements. A standard order email is one of them.

To style the email, you can add CSS to your child theme style.css file. But adding your own CSS file into the WordPress theme is just a dreadful job. You have to be very careful when editing such files.

Luckily, WordPress supports extension plugins and you don’t have to worry about adding CSS to Order emails. One of the most reliable plugin to create custom order emails is Decorator – WooCommerce Email Customizer by WebToffee

Why Decorator – WooCommerce Email Customizer?

Decorator – WooCommerce Email Customizer is especially useful for everyone running an eсommerce business. It sets up a separate instance of the Customizer tool and allows you to make changes to WooCommerce emails with live preview. Moreover Decorator – WooCommerce Email Customizer is an open source software.

How to add CSS to order emails

Let’s start with the installation process

  • Download the latest version of Decorator – WooCommerce Email Customizer as a zip file.
  • Log into your admin account and from the sidebar menu, navigate to Plugins > Add New > Upload Plugin
  • Select the downloaded plugin ZIP file and click the button Install Now button
  • Activate the plugin

After you have successfully installed the plugin navigate to  WooCommerce > Settings > Emails from the dashboard. Scroll down in the Email notifications panel. There, you’ll find the Open Decorator button. Click on the Open Decorator button and you will be taken to the customisation page.

Next, we’ll explain how to style order emails by adding CSS with two examples

  1. Center align order table contents in the email using CSS
  2. Bold the price amount in the total section of order table using CSS

Example 1: Center align order table contents in the email using CSS

  1. Click on the sidebar menu Other
  2. Navigate to Custom Styles sub-menu
  3. Now, enter the following CSS in the Custom CSS field:  #body_content_inner table.td tbody tr td { text-align: center !important; }
  4. Then, click on the Publish button at the top right-hand corner of the top of the customized email editor

Here is the center aligned demo of order table:

Example 2: Bold the price amount in the total section of order table using CSS

  1. Go to sidebar menu Other > Custom Styles
  2. You can enter the following CSS in the Custom CSS field and Publish the changes

tfoot span.woocommerce-Price-amount.amount { font-weight: bold; }

The styled order email will be like this:

Conclusion

With the help of Decorator – WooCommerce Email Customizer plugin you can easily style order emails by adding your own CSS without altering the WordPress child theme.

  • Was this article helpful ?
  • YesNo

Leave a Reply

Your email address will not be published. Required fields are marked *