Two ways to send HTML emails
WunderAutomation has two built-in actions that support sending HTML emails, one standard and one that explicitly piggybacks on WooCommerce (if it’s installed). Just like the built-in plain text email action, both HTML email actions sends the resulting HTML email using the wp_mail() function.
Using the wp_mail() function means that WunderAutomation will use any existing third-party functionality that might be in place to send outbound emails.
Send HTML emails (standard action)
The standard Send HTML email action relies on overridable templates for the basic design. The standard HTML email action also allows you to skip using templates if you prefer to compose your HTML email entirely in the editor.
The heading field
The heading field is available for both the HTML email actions. Inspired by the WooCommerce standard HTML email template, WunderAutomation also uses a "heading" field:
Standard HTML email send-out via WunderAutomation as it would look in Gmail.
The style field
Available only for the standard HTML email action. The style field allows you to add additional CSS rules that will be added to the style section of the rendered email. If you are using the email templates (default), any CSS rules in the style field are added AFTER the CSS rules in the template.
Templates for standard HTML emails
The following templates are used to control the look and field of emails created using the standard HTML email action:
| Template name | Description |
|---|---|
| emails/email-styles.php | CSS rules. |
| emails/email-header.php | Renders the start of the HTML email at least up until and including the opening tag. The default template renders the heading area and the start of a table structure suitable for HTML emails. |
| emails/email-footer.php | Renders the end of the HTML email. Must close all tags opened in the header. |
The original templates are located in: wp-content/plugins/wunderautomation/templates
Overriding a template
The above templates can be overridden by creating a subfolder named: wunderautomation in your active theme and placing a copy of any (or all) of the template files there.
Example: Overriding email-header.php in the TwentyTwenty theme.
The resulting folder should be: wp-content/themes/yourtheme/wunderautomation/emails
When WunderAutomation needs to render a template, it will first look for the file in the wunderautomation subfolder of your theme and if it can’t be found there, it will fall back to using the template provided with WunderAutomation.
Modifying template colors
If you’re using the built-in email templates, it’s also possible to modify the built-in templates color scheme via WordPress filters. The following filters are used:
| Filter | Default | Description |
|---|---|---|
| wunderautomation_email_background_color | #f1f1f1 | Background outside email body. |
| wunderautomation_email_body_background_color | #ffffff | Main body background. |
| wunderautomation_email_base_color | #0073aa | Base color for heading background. |
| wunderautomation_email_base_text | #ffffff | Text color for heading. |
| wunderautomation_email_text | #040404 | Default text color. |
| wunderautomation_email_link_color | #0073aa | Default link color. |
| wunderautomation_email_bg_darker_10 | #f0f0f0 | Darker version for background, used for border color. |
| wunderautomation_email_body_darker_10 | #aaaaaa | Darker version for body background, used for border color. |
| wunderautomation_email_base_lighter_20 | #2277a0 | Used for text shadow for H1 tags. |
| wunderautomation_email_base_lighter_40 | #4c93b5 | Not used. |
| wunderautomation_email_text_lighter_20 | #525252 | Lighter text, used in table details. |
| wunderautomation_email_text_lighter_40 | #949494 | Lighter text, used in footer. |
Skipping the template
It’s possible to send HTML emails without using the built-in templates. Check the "Skip templates" checkbox to make WunderAutomation render the emails without templates.
When sending emails without a template, the action content field needs to contain all the needed HTML. In order for the emails to render properly in some email clients you might need to include a full structure with the style tag inserted in the head tag. To make this easier, WunderAutomation offers a special placeholder [WASTYLE]:
Send WooCommerce email
The WooCommerce email action takes all styling configurations from WooCommerce. This includes template files, header image, color configuration, etc. found in the WooCommerce email settings:
Read more about how to customize WooCommerce email settings here.