如何使用 Yaymail 自定义 Order Delivery Date Pro 电子邮件模板

已发表: 2021-07-30

在你的外表上付出更多的努力可以有很长的路要走。 现在想象一下,将您的产品推销给穿着睡衣的顾客。 虽然这听起来很有趣,但我认为我们都同意该客户购买您产品的机会可能非常少。 将您的电子邮件设计模板视为服装 - 您的品牌在全世界的外观。 稍微提点一下不仅会使您的品牌脱颖而出,而且还会引起读者的注意。 您可能已经知道我们的插件 Order Delivery Pro for Woocommerce 如何提供一种发送交货提醒电子邮件的方式。 在WooCommerce 电子邮件模板自定义和预览插件 Yaymail的帮助下,您将能够为 WooCommerce 电子邮件模板自定义 Order Delivery Date Pro。

介绍 Yaymail - WooCommerce 自定义和预览插件

大多数情况下,WooCommerce 用户都被每个 WooCommerce 商店使用的无聊的默认电子邮件模板所困扰。 进入 Yaymail,这是一个 WooCommerce 电子邮件模板自定义和电子邮件预览插件,可帮助您解决此问题。 如果您愿意多花一点钱让您的品牌脱颖而出并确保您的客户注意到它,您可以使用此插件“美化您的电子邮件,预览您在电子邮件模板中所做的更改,并让客户光临回来更多。”

Yaymail 的一些功能包括:

  • 轻松添加列和元素块
  • 在单个窗口中编辑内容和媒体
  • 自定义电子邮件模板中的字体、颜色、背景、填充等
  • 电子邮件模板的实时预览
  • 保存和发送测试电子邮件
  • 20+ 元素

使用 WooCommerce 电子邮件模板自定义 Yaymail 插件,您可以轻松地将元素拖放到您的电子邮件模板中。 即使是新手也可以很容易地弄清楚如何使用这个插件。

订单交付日期 Pro & WooCommerce 电子邮件模板自定义和预览插件 – Yaymail

为了重新设计您的 Order Delivery Dat Pro 的电子邮件模板,您需要:

  • WooCommerce 插件的订单交付日期专业版(99 美元)
  • Yaymail 插件(免费)
  • Yaymail Premium Addon for Order Delivery Date Pro ($39)

将这些添加到您的 WooCommerce 商店后,您可以从WooCommerce > 设置 > 电子邮件访问您的订单交付日期 Pro for WooCommerce 插件的电子邮件模板,如下所示:

How to customize Order Delivery Date Pro email templates with Yaymail

到达此处后,您可以向下滚动以查找 Order Delivery Date Pro 模板,如下所示:

How to customize Order Delivery Date Pro email templates with Yaymail - Tyche Softwares

单击您选择重新设计的电子邮件模板的“使用 YayMail 自定义”选项。

电子邮件模板 1:更新的交付日期和时间

假设您希望自定义交付日期和时间更新电子邮件模板。 有一次,您点击了“使用 YayMail 自定义”,这是模板的显示方式:

How to customize Order Delivery Date Pro email templates with Yaymail

在模板的最顶部,您将找到以下详细信息:

How to customize Order Delivery Date Pro email templates with Yaymail - Tyche Softwares

WooCommerce 电子邮件定制器将帮助您挑选不同的元素或块,以及您可以添加到模板中的各种设计。

借助定制器旁边的设置,您可以从下拉选项中选择电子邮件模板,例如“更新的交付日期和时间”模板。 在它旁边,您会找到用于选择特定订单电子邮件模板的下拉菜单。 例如,325-TanishaMehta。 然后您有各种其他选项,例如简码、发送测试电子邮件、空白模板、复制模板、重置模板选项。

接下来,如果您希望在创建模板后打开模板,您可以通过启用模板来实现。 您甚至可以通过单击“预览”选项来预览模板在桌面设备或移动设备上的显示方式。 最后,完成更改后,您可以“保存”设计的电子邮件模板。 让我们从自定义交付日期和时间更新电子邮件模板开始。

首先,我们将更改此电子邮件模板的徽标。 在电子邮件模板中找到 WooCommerce 徽标并单击它。 在左侧,您将找到编辑徽标的选项,您可以在其中更改图像、对齐方式、填充等。 以下是它的显示方式:

How to customize Order Delivery Date Pro email templates with Yaymail

接下来,我们将在单击“更改图像”选项后上传我们自己的徽标。 除此之外,我们将为徽标添加一个 URL,将其背景颜色更改为蓝色,将其宽度更改为150 像素。 更改将直接显示在模板中,如下所示:

How to customize Order Delivery Date Pro email templates with Yaymail

在此之后,我们现在将通过单击更改电子邮件标题。 我们将背景颜色从紫色更改为白色,将文本字体颜色更改为我们之前的蓝色阴影。 我们还将更改字体本身。 在这里,我们决定使用“Arial Black”、Gadget、无衬线字体:

How to customize Order Delivery Date Pro email templates with Yaymail

现在我们将编辑显示“客户已更新交货日期和时间”的文本元素。 订单详情和更新的交货详情如下” 。 按照我们之前的字体系列,我们也将在这里应用相同的字体。 我们还对文本的 Padding 进行了一些更改,如下所示:

How to customize Order Delivery Date Pro email templates with Yaymail

同样,我们也对电子邮件模板的表格在颜色、填充字体等方面进行了更改。

How to customize Order Delivery Date Pro email templates with Yaymail

现在,我们希望将我们的社交媒体图标添加到电子邮件模板中。 为此,我们将转到WooCommerce 电子邮件定制器 > 元素 > 社交图标,然后将该元素拖到电子邮件模板中。

How to customize Order Delivery Date Pro email templates with Yaymail

拖动后,我们将删除不需要的社交图标并添加我们需要的社交图标。 例如,我们将保留 Facebook 图标,我们还将添加 Twitter 图标。 我们将添加用户点击社交媒体图标后打开的 URL 链接。

How to customize Order Delivery Date Pro email templates with Yaymail

在这里,我们可以更改图标的大小、间距、背景颜色等等。 以下是进行这些更改后的显示方式:

How to customize Order Delivery Date Pro email templates with Yaymail

最后,我们还对页脚进行了以下更改:

How to customize Order Delivery Date Pro email templates with Yaymail

完成所有这些更改后,您可以单击页面右上角的“保存”按钮。 当我们点击“预览”选项时,我们新设计的模板将如下所示:

How to customize Order Delivery Date Pro email templates with Yaymail

让我们看看模板将如何出现在收件箱中:

How to customize Order Delivery Date Pro email templates with YaymailHow to customize Order Delivery Date Pro email templates with Yaymail - Tyche Softwares

电子邮件模板 2:送达提醒

让我们自定义“送货提醒”电子邮件模板。 为此,我们采用了 143 号订单。这是默认电子邮件模板的外观:

customizing the 'Delivery Reminder' email template

我们将首先替换徽标,就像我们之前对交付日期和时间更新电子邮件模板所做的那样。

customizing the 'Delivery Reminder' email template

这一次,我们将为我们的背景颜色和电子邮件模板选择更深的灰色阴影。 进一步,我们将对电子邮件标题进行更改。 我们将通过添加“嘿那里!”来个性化文本。 在“这是您的送货提醒”之前。

然后我们将它移到中心,甚至将背景颜色更改为更暗的颜色。 我们将字体颜色保持为白色,并将文本字体更改为Tahoma, Geneva, sans-serif ,如下所示:

customizing the 'Delivery Reminder' email template

接下来,我们将通过以下编辑更改针对我们客户的文本:

Woocommerce order email customization: changing the text that addresses customer

然后,我们将继续显示订单详细信息的文本。 为此,我们想将其加粗,以便客户可以了解他们可以从哪里开始阅读以了解他们的订单详细信息。

Woocommerce order email customization: changing the text that addresses customer

然后,我们继续使用我们之前选择的背景颜色、标题颜色、边框颜色和文本颜色来编辑订单项目设计,如下所示:

Woocommerce order email customization: changing the text that addresses customer

我们还可以通过将View Order文本移动到中心并将其背景颜色更改为深蓝色来吸引客户来更改它。

How to customize woocommerce order delivery pro email with Yaymail: Changing the View Order text

现在我们希望分离电子邮件的订单详细信息部分,因此我们将转到元素 > 常规 > 分隔线并将该元素拖到模板中。

How to customize woocommerce order delivery pro email with Yaymail

我们已经对分隔线进行了必要的更改,例如行高、宽度、颜色等,在这样做之后,它们将如下所示:

How to customize woocommerce order delivery pro email with Yaymail

就像我们的第一个电子邮件模板一样,让我们​​添加我们的社交媒体图标,以便我们的客户可以关注我们并使用我们的最新产品进行更新。 我们将转到Elements > Social Icons

How to customize woocommerce order delivery pro email with Yaymail: Adding social icons

一旦我们拖动它,它的显示方式如下:

How to customize woocommerce order delivery pro email with Yaymail

我们将首先通过单击垃圾桶图标丢弃 Youtube 和 Linkedin 图标。

How to customize woocommerce order delivery pro email with Yaymail

然后,我们将添加 Twitter 图标并更改图标间距、宽度,甚至其样式主题

How to customize woocommerce order delivery pro email with Yaymail

现在,我们不希望显示说明我们的网站是使用 WooCommerce 构建的文本。 因此,我们将通过单击三个点然后单击“删除”选项将其删除。

How to customize woocommerce order delivery pro email with Yaymail

相反,让我们为客户添加一些我们产品的图片。 转到元素并选择“图像列表”元素并将其拖到“查看顺序”下方的模板中。

Adding images to your Woocommerce order email template

在这里,我们将附上三张图片,因此我们将选择 3 列。 在为每一列添加图像后,我们将对对齐方式、背景颜色等进行更改。

Adding images to your Woocommerce order email template

不要忘记将产品的 URL 链接添加到图像中,这样当客户单击图像时,他们将被定向到该项目的产品页面。

How to customize Order Delivery Date Pro email templates with Yaymail - Tyche Softwares

在它上面,让我们添加一个文字,上面写着“您可能喜欢的其他一些产品” ,就像这样:

Adding text to your WooCommerce email template

最后,让我们通过从 WooCommerce 电子邮件定制器中选择“徽标”元素,在模板末尾添加我们品牌的徽标。

adding logo by choosing the 'Logo' element from WooCommerce Email Customizer

添加我们的徽标、URL 和其他细节后,我们的送货提醒电子邮件模板就准备好了。 我们将“保存”它,它的外观如下:

adding logo by choosing the 'Logo' element from WooCommerce Email Customizer

现在,让我们发送一封测试电子邮件。 以下是测试电子邮件在客户收件箱中的外观:

Woocommerce email customization for order delivery date pro: testing admin email notifications How to customize Order Delivery Date Pro email templates with Yaymail - Tyche Softwares

电子邮件模板 3:管理员发送提醒

最后,让我们重新设计“Admin Delivery Reminder”电子邮件模板。 以下是默认电子邮件模板的外观:

Admin Delivery Reminder for order email template customization

让我们首先插入我们的徽标并使其比以前更小。

image showing how to insert logo to your order email template in Woocommerce

接下来,我们将更改电子邮件标题以适合我们的蓝色美学配色方案。

Adding colors to your WooCommerce order email template

接下来,我们会将默认文本更改为“这里是您明天交货的提醒” 。 我们将使其加粗并增加其字体大小:

Woocommerce email template customization: changing the default text to 'Here is the reminder for your delivery tomorrow for order delivery pro

接下来,我们希望向管理员显示运输和账单地址。 因此,我们将添加“帐单发货地址”元素,将其拖动到“这里是您明天交货的提醒”文本元素的下方。

Adding shipping and billing information to the order delivery email template

我们还将其颜色更改为如下所示:

Styling the admin email template in woocoomerce with Yaymail

接下来,我们还希望向管理员显示 Order Item 列表,因此我们将选择“Order Item”元素。

Customizing the admin email template in woocoomerce with Yaymail

将元素拖到电子邮件模板后,我们的订单详细信息将直接出现在其上。 我们可以对其背景和颜色进行更改,如下所示:

Customizing the admin email template in woocoomerce with Yaymail

我们不希望使用 WooCommerce 制作的默认文本元素,因此我们将像这样“删除”它:

Customizing the admin email template in woocoomerce with Yaymail

最后,为了使模板看起来统一且符合品牌,我们将按以下方式在末尾添加我们品牌的徽标:

Customizing the admin email template in woocoomerce with Yaymail

以下是我们的管理员交付提醒电子邮件模板在进行这些更改后的显示方式:

Image showing the admin delivery reminder email template

我们也可以将此模板作为测试电子邮件发送。 以下是管理员收件箱中管理员递送提醒的显示方式:

Admin delivery reminder email with order details

How to customize Order Delivery Date Pro email templates with Yaymail - Tyche Softwares

结论

在这篇文章中,我们介绍了如何使用 WooCommerce 电子邮件模板自定义插件 Yaymail 重新设计我们的 Order Delivery Date Pro 插件的三个不同的电子邮件模板。 尽管我们只介绍了 Yaymail 的一些功能,但我们确信设计专家可以使用其他元素,例如将视频甚至按钮添加到他们的电子邮件模板中。

继续探索并在下面的评论中让我们知道您如何使用 Yaymail 自定义您的订单交付日期 Pro 电子邮件!