How to Customize WooCommerce Emails

January 5, 2021

Introduction

Automated WooCommerce emails provide customers with essential information about their orders. A well-designed custom WooCommerce email helps establish your store’s identity, raises brand awareness, and provides an engaging customer experience.

Use custom WooCommerce emails to:

  • Advertise related products or special offers.
  • Include direct payment links to upsell and cross-sell products.
  • Send coupons to promote customer loyalty or offer reduced prices to retain unsatisfied customers.
  • Make it easier for customers to contact support if they need assistance.

Find out how to customize WooCommerce emails and turn them into a valuable promotional tool.

Merchant offering custom designed clothes.

How to Edit Default WooCommerce Emails

Default WooCommerce emails have a simplistic design that clearly conveys basic transaction details. This impersonal email serves as a record that informs customers of important events regarding their purchase or subscription.

A deafault transactional WooCommerce email.

To manage and edit transactional emails in WooCommerce:

1. Select Settings in the WooCommerce menu.

2. Access the Emails tab.

Access Email Templates in WooCommerce.

3. Use the Email template section to edit visual elements of all emails, such as headers, footers, text color, background color, etc.

4. Click individual email types, for example, New Account, to manage elements for that email type.

Manage email types WooCommerce.

5. You can enable/disable the email, edit the email’s Subject, heading, and add textual content.

6. The HTML template section provides vital information for developers looking to code custom email templates.

Options that allow users to customize individual emails in WooCommerce.

Non-technical users can use email customization plugins to redesign default WooCommerce emails entirely.

Edit Emails with Decorator - WooCommerce Email Customizer

The Decorator - WooCommerce Email Customizer is a free, open-source, email customization plugin. It does not have drag and drop capabilities, but you can use this plugin to edit basic visual elements of WooCommerce emails.

To do so:

1. Install and Activate the Decorator - WooCommerce Email Customizer plugin.

Activate the Decorator - WooCommerce Email Customizer.

2. Select the Settings option within the WooCommerce menu.

3. Open the Emails tab.

4. Click the Open Decorator option at the bottom of the page.

Customize and preview emails with Decorator WooCommerce Email Customizer.

5. Use the Decorator panel to change header and footer styling, add custom images, apply different heading styles, text color, and font.

6. Click Publish to apply the changes.

Customize and preview emails with Decorator WooCommerce Email Customizer.

The Reset button allows users to revert to the default email version and start over if necessary.

Drag and Drop Email Customizer by Flycart

The option to drag-and-drop elements makes email template building more efficient.

Most plugins focus on editing headers, footers, and making minor cosmetic changes. The Drag and Drop Email Customizer by Flycart enables you to make sweeping changes to default WooCommerce emails.

At the time of writing this article, the annual license for Drag and Drop Email Customizer cost $49.

Once you install and activate the Drag and Drop Email Customizer plugin:

1. Select WooCommerce Email Customizer to access the email template builder.

2. Choose an email type to edit from the dropdown menu.

Select an email type to edit from the dropdown menu

3. Select an existing email to serve as a preview example.

Select a sample email to serve as a customizable preview.

4. Use the icons on the left panel to drag elements onto the template. Add a logo, images, editable text boxes, social icons, clickable URL buttons, and other components.

5. By selecting an element within the template, a panel appears on the right side and lets you fully edit content within each element.

6. The Shortcodes tab contains a list of all WooCommerce placeholders and their descriptions. Inserting placeholders into templates helps you automate store processes.

Customize email template with Drag and Drop Flycart plugin.

7. Insert coupons into emails to improve customer retention and promote loyalty programs. For optimal results, combine this functionality with other plugins that streamline cart conversions and analyze customer behavior.

8. Once you are satisfied with the email’s design, click the save icon to save the template.

Add cuopons and save email template with drag and drop WooCommerce Email Customizer.

Use the Send Test Email option to confirm that all the elements and placeholders within the template work properly.

Customizing via WooCommerce Email Customizer

The WooCommerce Email Customizer developed by WooCommerce is a native plugin that guarantees reliability and compatibility. At the time of writing the article, the plugin cost $79 annually, including product support.

The plugin has a built-in drag-and-drop visual editing system and does not require coding knowledge. The changes are visible in real time, which simplifies the editing process considerably.

Once you install and activate the WooCommerce Email Customizer:

1. Access the WooCommerce menu and click Settings.

2. Select the Emails tab.

3. Scroll down to the Email Customizer section and click Customize.

Access the WooCommerce Email Customizer builder.

4. Use the email builder to customize the email design.

5. Click Save & Publish to apply the changes.

WooCommerce Email Customizer preview page.

The WooCommerce Email Customizer only deals with the visual aspects of email design and does not support customizing the email’s textual content. This limitation can prevent you from realizing the full potential customized emails can bring to your business.

If you plan to make only visual edits and create emails using a minimalist style, the WooCommerce Email Customizer is a sensible choice.

Custom Email Template

Users with advanced coding skills can override default WooCommerce templates, edit, and upload one-of-a-kind template designs to WooCommerce directories.

Finding and Editing Email Templates

WooCommerce email template files are located in the wp-content/plugins/woocommerce/templates/emails/ directory.

To locate template files for individual email types:

1. Click Settings in the WooCommerce menu.

2. Access the Emails tab.

3. Select the email notification type you want to edit.

Find path to customize emails in WooCommerce.

4. The Email template section shows the path to the email template file.

Path to email templates in WooCommerce directory.

5. Use a preferred FTP client to access the website server.

6. Copy the existing template to the wp-content/themes/your-theme-name/woocommerce/emails/template-file-name.php. Create a new directory if one does not already exist.

Copying the file to the theme folder overrides the default template and allows you to edit its contents. WooCommerce updates can interfere with custom email settings, forcing you to repeat this process for each template. Overriding and customizing the email-styles.php file is more efficient.

Custom CSS

The default CSS for WooCommerce emails is located within the email-styles.php file. To edit the email-styles.php file:

1. Copy the the wp-content/plugins/woocommerce/templates/emails/email-styles.php file to the wp-content/themes/your-theme-name/woocommerce/emails/ directory.

2. Edit the copy by appending custom CSS blocks before the final <?php tag.

Edit the email-styles.php file in WooCommerce.

Attempting to add content between the opening <?php and closing ?> tags is recommended only for users with PHP experience. If a WooCommerce update affects the customized file, you can repeat the same process.

Conditional Customization with Action Hooks and Filters

Action and Filter hooks allow you to insert custom PHP code within existing template files. By appending code snippets to the functions.php file in the theme folder wp-content/themes/your-theme-name/ directory, you can preserve the customizations even if WooCommerce updates its CSS.

For example, use the woocommerce_email_footer($email) actionhook to add custom content above the email’s footer:

<?php 
add_action ( 'woocommerce_email_footer', 'mm_email_footer', 10, 2 );
function mm_email_footer( $email ) { ?>
<p><?php printf( __( 'Thanks for your purchase! Let us know what you think of the product using this link: %2^s', 'yoursite' ), get_bloginfo( 'name', 'display' ), '<a href="' . get_permalink( wc_get_page_id( 'shop' ) ) . '">' . __( 'Shop', 'yoursite' ) . '</a>' ); ?></p>
<?php
}

Filter hooks override the labels and placeholders of existing fields. Using a filter to append or edit content to the existing woocommerce_email_styles CSS, for example, prevents WooCommerce updates from affecting your customizations.

add_filter( 'woocommerce_email_styles', 'mm_add_custom_woocommerce_email_styles', 10, 1 );
function mm_add_custom_woocommerce_email_styles( $css, $email ) {
	return $css . '
.address {
	background-color: blue;
	font-weight: italic;
}
';
}

The $email parameter with the email value ID (new_order, cancel_order, etc.) lets you attach modifications for individual email types.

Conclusion

Now you know how to customize WooCommerce emails and create focused and unique customer-oriented messages.

Custom emails help you establish personalized communication and maintain a consistent visual identity throughout the purchasing process. Your customers will perceive these emails as a natural extension of your products and services.

About the author
Vladimir Kaplarevic
Vladimir is a resident Tech Writer at CCBill. He has more than 8 years of experience in implementing e-commerce and online payment solutions with various global IT services providers. His engaging writing style provides practical advice and aims to spark curiosity for innovative technologies.
Talk to a Merchant Support Specialist
cross