如何给WordPress外贸网站的产品页添加询盘按钮？

WordPress本身一个开源的博客系统，不能上传产品。
如果想要用WordPress来搭外贸网站，需要先安装WooCommerce插件，才能上传产品信息，但是WooCommerce是针对电商的，产品页面默认的是”Add To Cart“（加入购物车）按钮，而不是”Ask for Enquiry“（询盘）按钮。
这就需要我们对WordPress做一些改造，才能在产品页面上展示询盘按钮，方便客户在产品页面发起询盘。具体操作流程如下：

第一步：安装 “Contact Form 7” 插件

这步很简单，直接到插件里搜索”Contact Form 7“，找到后，安装并且启用即可
然后我们可以在wordpress左侧的菜单里，看到一个”Contact“菜单项，点进去可以看到默认生成了一个Form，这个Form就可以用来收集询盘。点击Form的标题可以设置Form的样式和字段，比如设置客户发询盘时要填哪些信息等等，如下图。如果你想在不同的页面,放不同的Form，再新建Form就行了
设置好Form信息后，复制一下这个Form的短码Shorcode，后面会用到。

第二步：产品页面添加询盘按钮

在左侧菜单找到Product菜单，进去找一个产品，编辑产品。我是自己购买的Avada模板，所以是用Avada编辑器编辑产品页面内容。这里我们主要用到2个元素，来实现产品页面询盘按钮+弹出询盘表单的效果。

1.Modal，又叫模态窗，就是我们常见的弹窗。我们先在”产品描述编辑区“里面插入Modal，并设置好如下参数：

Name of Modal，随便起一个名字比如填enquiryform
Modal Heading，就是弹窗页面的标题，比如填Enquiry Now
Size of Modal，选择Large，就是大弹窗
Contents of Modal，把上一步里面复制的Form的短码，粘贴到这里面，注意不要删除短码里的[ ]

2.Button，也即是按钮，我们在”产品短描述区“里面插入Button，并设置好如下参数：

Button Text，就是按钮文字，可以写”ASK FOR ENQUIRY“或者别的
Modal Window Anchor，就是按钮要调用的Modal，将我们上一步插入的Modal名字”enquiryform“复制过来就行，注意复制的文本要一模一样，否则无法调用
Button的其他参数可以根据需要设置，主要是按钮的颜色形状等等，直接用默认就好

3.保存以上设置，发布产品即可。打开这个产品页，我们可以看到产品页面上有了一个ASK FOR ENQUIRY的询盘按钮，点击后，会弹出一个询盘表单，客户填写姓名、邮箱、询盘内容等必要信息后，就可以给我们发送询盘了。

第三步，设置询盘通知邮件发送功能

第一步和第二步的询盘按钮设置完成后，有人会发现，询盘提交不成功，总是报错，这是因为询盘通知邮件发送功能没有设置。
客户在网站上给你提交询盘，是需要给你的邮箱发送一封询盘通知邮件的，但是WordPress本身不带邮件发送功能，所以需要绑定你的邮箱来承担这个发送邮件的功能。

1.安装WP Mail SMTP插件
也是现在插件市场里搜到个插件，安装并启用后，可以看到左侧菜单里多了一个WP Mail SMTP的菜单项，点进去，设置如下参数来绑定你的邮箱，作为询盘通知的发件箱

发件人：选择你的邮箱A，可以是你的企业邮箱、QQ邮箱、Gmail邮箱等等
邮件程序：根据你的邮箱A的类型，选择对应的邮箱程序，我用QQ邮箱，就选择“其他SMTP”
SMTP主机：在每个邮箱的后台设置里能查到；QQ邮箱的SMTP主机是smtp.qq.com，也就是询盘通知邮件会从这个QQ邮箱服务器发出来（注意，如果你是腾讯企业邮箱，SMTP主机不是这个）
SMTP端口：也是在每个邮箱的后台设置里查看；QQ邮箱的SMTP端口是465
加密：选择SSL，这样邮件是加密发送的，比较安全
SMTP密码：有些邮箱就是邮箱的登陆密码，QQ邮箱则是需要通过发送短信去获取，也是在QQ邮箱后台按照指引去操作。具体路径是：QQ邮箱——>设置——>账户——>POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务——>开启POP3/SMTP服务
以上设置见下图1-3

2.设置询盘收件箱
以上设置完成后，只是完成了”发询盘通知“的设置，还要完成”收询盘通知“的设置。这时候要回到”Contact“菜单项里，点击联系表单，在”邮箱“选项卡里，设置收件人，填写你的邮箱B，用来接收询盘通知。
以上设置见下图4