View Product Page

Layout

When you set up a new email, you will have to assign a template to it. Either choose one of the included ones or create your own.

To create a new template, click on the menu entry Email Templates > Add new email template.

Add new email template

Now, you can configure the template as explained below.

Template style

You can choose the layout you want to assign to the template you are configuring. You can choose from “default”, “elegant”, “informal”, and “casual”.

Default

Default template

Informal

Informal template

Elegant

Elegant template

Casual

Casual template

Header

You can set up the logo you want to show in the header of your email. Upload your customized logo or click on “My default logo” to use the logo configured in YITH -> Email Templates -> Settings. With the position option, you can set the place where you want your logo to appear. You can also set its height in the specific option field.

Finally, you can enter the values for the header padding.

Email template header

Appearance

In the Appearance section, you can find the complete list of the options that let you change the colors of the WooCommerce-generated emails.

Appearance

  • Page Width: the width (in px) of the email box.
  • Page Border Radius: border radius (in px).
  • Base Color: default color of the layout.
  • Body Color: background color of the email body.
  • Background Color: background color of the main box of the email.
  • Text Color: text color of the email body.
  • Link Color: the color of links in the emails.
  • Header Color: text color of the email header.
  • Footer Text Color: text color of the email footer.

Typography

In the Typography section, you can set the font size of the email heading and the general font of the email body. You can also define the body line height.

Typography settings

Custom Links

To add a new entry, click on “Add Custom Link” and add the name of the link and the related URL. The created entry will show ahead of the email body.

Custom links

Order detail table

Order details table

The options included in this section refer to the product table that is added in some of the WooCommerce emails.
These are the available options.

  • Border Width: width of the border of the table (in pixels).
  • Border Color: color of the border of the table.
  • Background Color: background color of the table.
  • Price Title Background Color: background color of the price title.
  • Show product thumbnails: show/hide the products of the order related to the sent email.

Order details table - example

Social network sites

The social network sites you can add to the WooCommerce-generated emails have to be configured from the options panel of the plugin, as shown on this page.
On the contrary, in this section of the configuration panel of the template, you can change the following options:

Social Network
  • Social network buttons in the header: show/hide the social network buttons in the header of the email.
  • Social network buttons in the footer: show/hide the social network buttons in the footer of the email.
  • Social network buttons color: style to assign to the social network buttons (black/white).
Social network - example

Footer

Footer

You can set the logo and the text for the footer of your email.
With regards to the logo, you can decide to upload a custom image, use the default logo, or repeat the logo you have used in the “Header” section.

Footer example

Preview template

To see what the template you are creating looks like, just click on the “preview” button.

Preview email template

Moreover, it is also possible to preview the template in desktop, tablet or mobile mode.

Preview modes

Additionally, you can also send a test e-mail after publishing/editing the template.

Test email