WebToffee Logo
  • Home
  • Plugins
  • Blog
  • Documentation
  • Support
Login
0

  • Overview of the Plugin
  • Installation of the Plugin
  • Getting Started with the Plugin
  • Customization of WooCommerce Emails

Decorator – WooCommerce Email Customizer Plugin (User Guide)

Last updated on January 20, 2021

This is a complete documentation of the Decorator – WooCommerce email customizer plugin which helps you customize WooCommerce order emails to fit your business requirements.

Overview of the Plugin

The plugin allows you to customize WooCommerce transactional emails in a number of different ways.

  • Customize the email container/header/footer/content of the WooCommerce emails.
  • Heading specific customizations.
  • Option to add custom styles to emails using CSS.
  • Real-time preview of changes.
  • Option to schedule changes to go live.
  • Option to share preview link to view changes.

Installation of the Plugin

You can install the plugin either from the WordPress plugin directory or as a zip downloaded from the WordPress.org website. You can learn more about the installation procedure by reading the article How to Install a Free Plugin from WordPress.

Getting Started with the Plugin

To get started with the plugin, go to WooCommerce > Settings > Emails from your WordPress dashboard.

Towards the end of the page, you will see a button ‘Open Decorator’ under the subtitle ‘Decorator’.

Click the button Open Decorator to open the plugin settings.

Customization of WooCommerce Emails

This plugin allows you to customize each element of your WooCommerce mail. You can customize the header, content, and footer sections of your emails as per your requirements.

Decorator plugin settings page

The left side of the page contains each section of emails that you could customize. The right side of the window displays a live-preview of the email template as you make changes on the left.

Container Customization

Email container customization

Background color – Here you can choose a background color for your outer email body.

Padding – Set padding to display the email.

Container width – Set width of the email container.

Border radius – Fix border radius for the container.

Shadow – Give a shadow effect to the email container.

Header Customization

The header section has been further divided into three sub-sections.

header customization

Header Style

Header style customization

Background color – Select a background color.

Text align – Choose the alignment (right, left, center, justify) for header text from the drop-down.

Padding top/bottom – Adjust the top/bottom padding for header text.

Padding left/right – Adjust the right/left padding for header text.

Header Image

Header image customization

Header image – Upload an image to be displayed on the header.

Heading

Heading customization

Font size – Adjust the font size of the header text.

Font family – Choose a font family to display header.

Font weight – Adjust the font weight of the header.

Text color – Choose a text color for the header.

Footer Customization

From this section, you can customize both the footer style and footer content for WooCommerce emails.

Footer customization

Footer Style

Footer style customization

Padding – Adjust padding for footer text.

Text align – Choose a suitable alignment for footer text from the given options.

Font size – Select a suitable font size.

Font family – Choose a font type of your choice.

Font weight – Adjust the boldness of the footer text.

Text color – Choose a suitable color for the footer text.

Footer Content

Footer content customization

Here you can add the desired footer content for WooCommerce emails.

Content Customization

In this section, you get to customize the content inside the email body.

Email content customization

Content Container

Customization of email content container

Background color – Select a background color for the email body.

Padding – Adjust it’s padding.

Text Style

Customization of email content text style

Font size – Here you can adjust the font size for the email body content.

Font family – Select a font type for the body text.

Text color – Choose your preferred color for the text.

Link color – Select a link color of your choice.

Order Items

Customization of order items table

This section allows you to customize the table for order items.

Background – Here you can add a background color of your choice.

Padding – Adjust padding for the order table.

Border width – Adjust the border width for the table.

Border color – Select a border color of your choice.

Totals seperator width – Adjust the width of the total seperator line.

Totals seperator color – Select a specific color for the total seperator line.

Other Customizations

Other customizations

In this section, you can individually customize heading 1 to 6 and also add custom styles using CSS.

Custom Styles

You can add the CSS to the box for adding custom styling to email. To learn more about custom styling using CSS, refer to this article.

Adding custom styles using CSS

Advanced Settings

Advanced settings for email customization

When you click on the Settings Icon (highlighted on the above screenshot) next to the ‘Publish’ button, a side window opens up with some advanced settings for you to configure.

Other than publishing the changes right away, you have the option to either save them as a draft or schedule a date for the configured changes to go live on WooCommerce emails.

Schedule Date and Time for Email Customizations to go Live

By clicking the radio button next to ‘Schedule‘ you will be able to schedule a date and time for the customizations to go live on your WooCommerce emails.

Schedule publishing date for email customizations

You can choose a date and time of your choice.

Share Preview Link

Share preview link for changes.

You can use this feature to see how the changes would look live on your website before publishing them. Plus you can share the preview with people who can’t access the customizer and get their feedback on it.

Note: Customization changes should be saved prior to activating the preview link.

  • Was this article helpful?
  • YesNo

Tagged WooCommerce email customizer, WooCommerce emails, WooCommerce order emails

Written by

Haritha

Haritha writes for WebToffee on everything related to WordPress/WooCommerce plugins in simple tutorials, blogs, and documentation to help run your WooCommerce store.

Leave a Reply

Cancel reply

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

We develop awesome WordPress plugins & WooCommerce extensions to help build successful online businesses.

Get Started

  • Plugins
  • Testimonials
  • Affiliates

Help & Support

  • Documentation
  • Documentation (Basic)
  • FAQ
  • Support

Company

  • Terms & Conditions
  • Privacy Policy
  • Refund policy
  • License Activation

© 2021 WebToffee. All rights reserved.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. However you may visit Cookie Settings to provide a controlled consent.
Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of the basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website, to store user preferences and provide you with content and advertisements that are relevant. Such cookies will be stored on your browser but only upon procuring consent.

You will also have the option to opt-out of these cookies should you want to. But opting out of some of these cookies may have an effect on your browsing experience as per the descriptions elucidated against the respective categories below.

Necessary
Always Enabled

The cookies defines under this category are absolutely essential for the website to function. Hence they are loaded by default irrespective if user consent.

CookieDescription
PHPSESSIDThis cookie is native to PHP applications. The cookie is used to store and identify a users' unique session ID for the purpose of managing user session on the website. The cookie is a session cookies and is deleted when all the browser windows are closed.
viewed_cookie_policyThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Analytics

Analytics cookies help us understand how our visitors interact with the website. It helps us understand the number of visitors, where the visitors are coming from, and the pages they navigate. The cookies collect this data and are reported anonymously.

CookieDescription
_gaThis cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, camapign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assigns a randoly generated number to identify unique visitors.
_gat_gtagIdentification code of website for tracking visits.
_gidThis cookie is installed by Google Analytics. The cookie is used to store information of how visitors use a website and helps in creating an analytics report of how the wbsite is doing. The data collected including the number visitors, the source where they have come from, and the pages viisted in an anonymous form.
_hjidHotjar cookie. This cookie is set when the customer first lands on a page with the Hotjar script. It is used to persist the random user ID, unique to that site on the browser. This ensures that behavior in subsequent visits to the same site will be attributed to the same user ID.
_hjIncludedInSampleThis cookie is set to let Hotjar know whether that visitor is included in the sample which is used to generate Heatmaps, Funnels, Recordings, etc.
has_recent_activityThis cookie is used to signal to the code repository website if the user has browsed other website resources during the current session.
tk_aiGathers information for our own, first party analytics tool about how our services are used. A collection of internal metrics for user activity, used to improve user experience.
tk_lrThis cookie is set by JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack
tk_orThis cookie is set by JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack
tk_qsGathers information for our own, first party analytics tool about how our services are used. A collection of internal metrics for user activity, used to improve user experience.
tk_r3dThe cookie is installed by JetPack. Used for the internal metrics fo user activities to improve user experience
Advertisement

Advertisement cookies help us provide our visitors with relevant ads and marketing campaigns.

CookieDescription
_fbpThis cookie is set by Facebook to deliver advertisement when they are on Facebook or a digital platform powered by Facebook advertising after visiting this website.
frThe cookie is set by Facebook to show relevant advertisments to the users and measure and improve the advertisements. The cookie also tracks the behavior of the user across the web on sites that have Facebook pixel or Facebook social plugin.
Preferences

Preference cookies are used to store user preferences to provide them with content that is customized accordingly. This includes the language of the website or the location of the visitor.

CookieDescription
_gh_sessThis cookie is used to preserve users states across page requests.
Save & Accept