EP20. “产品区域与 WooCommerce 产品创建”
🔒 登录后可标记已读- 首页产品区域故意不放「Add to Cart」按钮——反直觉，但没看完产品信息就加购物车，退单率反而更高
- 两件事要做：在 WooCommerce 里创建三个产品（不同颜色的水瓶），再在首页加上产品展示区域
- 首页只展示产品图、名称、价格和「Buy Now」按钮，去掉干扰元素，让访客专注于点进产品页
所需工具
WordPress + WooCommerce + Elementor
重点内容
在 WooCommerce 里创建产品
三款产品都是同款水瓶的不同颜色：
| 产品名称 | SKU（产品编号） |
|---|---|
| Canyon Sand | 001 |
| Graphite Black | 002 |
| Slate Green | 003 |
路径：WooCommerce → Products → Add New
创建步骤（以 Canyon Sand 为例）：
- 标题填入产品名称：Canyon Sand
- 目前先保存为草稿（详细信息在 EP24 产品页里填写）。
- 点击 Save Draft。
- 重复以上步骤，创建 Graphite Black 和 Slate Green。
[截图：WooCommerce Products 列表页，显示三款产品的草稿状态]
在首页添加产品展示区域
在首页 Elementor 编辑器里操作：
- 找到 WooCommerce 相关的产品展示 Widget（例：Products Widget）。
- 拖入首页。
- 配置 Widget 显示刚才创建的三款产品。
每款产品只显示：
- ✅ 产品图片
- ✅ 产品名称
- ✅ 价格
- ✅ Buy Now 按钮
需要移除的元素：
- ❌ Quick View 按钮 → 弹出框会干扰购物体验，增加摩擦
- ❌ Add to Cart 按钮 → 我们希望访客进入产品页，而不是直接加入购物车（产品页有更多信息帮助他们做决定）
- 点击 Update 保存。
[截图：首页产品展示区域最终效果，只显示产品图 / 名称 / 价格 / Buy Now 按钮]
首页产品区域的设计逻辑
| 元素 | 保留还是移除 | 原因 |
|---|---|---|
| Buy Now | 保留 | 直接引导进入产品页 |
| Quick View | 移除 | 弹出框体验差，还分散注意力 |
| Add to Cart | 移除 | 没看完产品信息就加车，退单率高 |
行动步骤
- 进入 WooCommerce → Products，创建三款产品（Canyon Sand / Graphite Black / Slate Green），先保存为草稿。
- 在首页 Elementor 里添加产品展示 Widget，配置显示三款产品。
- 移除 Quick View 和 Add to Cart，只保留 Buy Now 按钮。
- Update 保存，访问网站检查产品区域显示效果。
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 3, Lecture 20 Products Section