EP28. “结账流程测试”
🔒 登录后可标记已读- EP27 埋的雷在这里爆了：Defer JS 一开，结账按钮直接失灵，得先揪出来修掉
- 上线前要完整测试一次结账流程：邮件模板、税务自动计算、用 Stripe 测试卡模拟下单
- 网站建了 27 讲，这是上线前最后一次全面检查——出错也该是现在，不是等客户下单时才发现
所需工具
WordPress + WooCommerce + WooPayments（Stripe）
重点内容
测试前准备
1. 开启测试模式
路径：WooCommerce → Payments → WooPayments → Settings
- 启用 Test Mode（测试模式）
- 开启后可以用 Stripe 测试卡模拟付款，不会收取真实费用
2. 自定义邮件模板颜色
路径：WooCommerce → Settings → Emails
- 点击每种邮件类型（New Order、Order Complete、Customer Invoice 等）
- 将邮件 Header 颜色改为 黑色（#000000）
- 保持与品牌风格一致
常见问题排查：Defer JS 导致按钮失效
症状：产品页按钮无响应，或结账页面显示异常。
原因：Jetpack Boost 的 Defer JavaScript 功能会延迟部分 JS 加载，而结账流程需要即时加载这些 JS。
解决方法：
- 进入 Jetpack → Boost。
- 关闭 Defer JavaScript。
- Critical CSS 和 Image CDN 保持开启。
- 刷新产品页，重新测试。
验证自动税务
路径：WooCommerce → Settings → Tax
确认已勾选 Enable Automated Taxes。
如果税务没有显示，在这里开启后再做测试。
使用 Stripe 测试卡完成测试结账
Stripe 测试卡信息：
| 字段 | 值 |
|---|---|
| 卡号 | 4242 4242 4242 4242 |
| 有效期 | 任何未来日期（例：12/30） |
| CVC | 任意 3 位数字 |
测试步骤：
- 进入产品页，点击 Buy Now。
- 填写结账表单（可以用真实信息或测试信息，邮箱填自己的真实邮箱以便接收测试邮件）。
- 在支付字段填入 Stripe 测试卡信息。
- 点击提交，完成测试订单。
[截图：结账页面填入 Stripe 测试卡信息后的界面]
测试完成后验证以下项目：
| 检查项目 | 验证方法 |
|---|---|
| 订单确认邮件 | 检查填写的邮箱是否收到邮件 |
| WooCommerce 订单记录 | WooCommerce → Orders 里是否有该订单 |
| 税务计算是否正确 | 在订单详情里查看税额 |
| 配送费用是否正确 | 核对配送区域和金额 |
| 分析数据是否更新 | WooCommerce → Analytics 里查看 |
[截图：WooCommerce Orders 列表，显示刚才生成的测试订单]
测试完成：关闭测试模式
路径：WooCommerce → Payments → WooPayments → Settings
- 关闭 Test Mode
- 网站现在可以接受真实付款
常见误区
- 不要在开启测试模式的情况下上线网站，客户会看到「Test Mode」的提示，影响信任度。
- 测试时用自己真实邮箱，这样才能确认邮件真的发出来了。
- 如果测试邮件进了垃圾邮件，正式上线时也可能进客户的垃圾邮件——这是一个信号，可能需要配置 SMTP 邮件发送（后续课程会涉及）。
行动步骤
- WooPayments 设置里开启 Test Mode。
- WooCommerce → Emails 里把所有邮件 Header 颜色改为黑色。
- 如果结账按钮失效，进入 Jetpack Boost 关闭 Defer JavaScript。
- 确认 Tax 设置里已开启 Automated Taxes。
- 用 Stripe 测试卡（4242 4242 4242 4242）完成一笔测试订单。
- 检查：邮件收到 ✅ / 订单出现在 WooCommerce ✅ / 税务和运费正确 ✅。
- 确认一切正常后，关闭 Test Mode。
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 3, Lecture 28 Check Out Test