EP412-413. “商店/账户页细节设置与联系页搭建”

• 条款勾选框绝对不能预先打勾——顾客必须自己主动勾选同意，这是法律对「同意」的基本要求
• 后台设置关不掉的侧边栏，直接让 ChatGPT 生成一段 CSS 贴进 Additional CSS，不会写代码也能自定义
• 联系页换成真人合照 + 留言表单，比冷冰冰的「关于我们」文案更容易建立信任

重点内容

商店与产品相关设置（Shop & My Account Pages）

路径：Customize → WooCommerce

General（商店总览设置）：

• 唯一建议调整的是把默认排序方式从 Default sorting 改成 Sort by popularity，产品多了以后热卖商品会优先展示，有助于带动整体销量（本课程 demo 只有一个产品还看不出差别，但多产品阶段很重要）

Single Product（单个产品页设置）：

• 移除侧边栏：跟博客一样，电商产品页要保持干净聚焦，不需要侧边栏分散注意力
• 图片展示方式保留默认的 gallery thumbnail slider 即可
• 保留 Breadcrumbs（面包屑导航）：方便访客知道自己在网站的哪个位置，改善导航体验
• 隐藏 SKU 和 Categories 显示：这些是给店家自己管理用的内部信息，没有必要展示给访客看，减少页面上无关的杂讯
• 保留 Ratings（评分）显示：评分/评论是重要的社会认同，一旦开始累积评论就要让它显示出来

Checkout（结账页设置）：

• 必须设定 Privacy Policy page 指向已经写好的隐私政策页面，结账页会自动显示一行「你的个人信息将用于处理订单...详见隐私政策」并附上链接——这是收集顾客信息前的法律义务
• 必须设定 Terms and Conditions page，并且勾选框「I have read and agreed to the website's terms and conditions」不能预先打勾，必须让顾客自己主动勾选才算数（这是许多地区法律对于同意条款的基本要求）
• 电话号码栏位可以从 Required（必填）改成 Hidden（隐藏）——尤其是纯数字产品完全没有理由联系顾客电话；即使是实体产品，把电话设为选填而非必填也能降低结账流程的摩擦，提高完成购买的比例。结账流程要尽量做到「够用就好、不多要信息」

用 ChatGPT 生成 CSS 代码去掉恼人的侧边栏：

• Sydney 主题在某些页面（My Account、Privacy Policy 等）的侧边栏不容易从后台设置直接关掉
• 解决方法：在 ChatGPT 里输入「Create a CSS code to remove the sidebar across my entire WordPress website using the Sydney theme」，ChatGPT 会直接生成 CSS 代码，还会告诉你该贴到哪里
• 把生成的代码复制，贴到 Customize → Additional CSS 的末尾，Publish 后侧边栏立刻消失
• 📌 这一步的意义不只是解决侧边栏问题：不会写代码的人也可以用 ChatGPT 描述需求直接拿到能用的代码片段，贴到 Additional CSS 里就能实现以前需要花大量时间搜索教学、甚至要花钱请人写代码才能做到的自定义效果

联系页（Contact Page）

Starter kit 自带的 Contact 页面模板内容跟实际业务无关（衣服相关的图片和「我们的故事/理念」文案），需要重新设计成「认识我们 + 留言表单」的结构。

操作步骤：

1. 搭建联系表单插件 WPForms：Dashboard → WPForms → Add New → Let's Go → 选择 Simple Contact Form 模板 → Use Template，默认的姓名/邮箱/留言三个字段已经够用，不需要额外改动
2. 确认表单提交后寄到哪个邮箱：WPForms 设置 → Notifications → Send to Email Address，默认是网站管理员邮箱（创建 WordPress 账号时用的那个），如果想改寄到别的邮箱可以在这里替换
3. 确认 Users → Profile 里的联系邮箱设置正确（收件邮箱要跟 WPForms 通知设置对得上），改动后系统会寄验证信到新邮箱，需要点击确认链接生效
4. 回到 Contact 页面 Edit with Elementor：
   • 把「About Our Store」标题改成「Contact」
   • 换一张真人合照（创办人/团队照片），让访客感觉这是「有真人在经营」的网站，帮助建立信任和关系，而不只是冷冰冰的联系入口
   • 用 Style 里的 Width 调整图片大小，避免图片过大压过文字内容
5. 关于理念（Philosophy）文案：用 Guidebook → Contact Page 章节的 prompt：「Act as a copywriter. I have a website called [网站名] that sells [产品] for [niche]. Write me a 120 word article that explains my website's philosophy. Use US terms and a simple language, use four paragraphs」，如果是个人经营的网站，需要把 prompt 里的「we/us」改成「I/me」这类第一人称单数
6. 生成的文案要求分四段，正好对应模板原本的四段排版设计，直接贴进去就能自然对齐
7. 删掉原本无意义的「Want to talk to us? Follow the link...」引导文字和旧按钮，改成插入 WPForms 小工具（Widget），从 Elementor 左侧元素库拖入「WPForms」，选择刚才建好的 Simple Contact Form，表单就直接嵌入页面
8. 可以在表单上方加一行说明文字，比如「We'll get back to you within 2 to 4 days」，让访客知道大概什么时候会收到回复（可选，不加也没关系）
9. 用 Advanced → Margin 微调各区块间距（例如照片区跟联系表单区之间的留白），让版面不会太拥挤或太空旷
10. 完成后同样切到 Responsive Mode → Mobile 检查手机显示效果
11. 测试表单是否真的能用：亲自到网站上填一次姓名、邮箱、留言并提交，检查对应邮箱是否真的收到通知邮件，并回复测试一下确保全流程通畅

[截图：WPForms Simple Contact Form 模板]

[截图：Contact 页面 Elementor 编辑效果]

核心概念速查

行动步骤

1. WooCommerce 商店排序改成 Sort by popularity；产品页隐藏 SKU/Categories，保留 Breadcrumbs 和 Ratings，去掉侧边栏
2. Checkout 页设定好隐私政策/条款页面链接，条款勾选框保持默认不勾选，电话栏位视情况改为选填/隐藏
3. 侧边栏用后台设置关不掉的地方，直接用 ChatGPT 生成对应 CSS 贴进 Additional CSS
4. 用 WPForms 建一个 Simple Contact Form，确认通知邮箱设置正确
5. 联系页换上真人合照、用 ChatGPT 生成四段式理念文案，嵌入刚建好的表单，做完移动端检查
6. 亲自提交一次表单测试全流程是否正常收到通知邮件

工具 & 资源

常见误区

• Checkout 页条款勾选框预先打勾，不符合「顾客必须主动同意」的法律要求
• 结账流程要求填写不必要的信息（如数字产品也要求填电话），增加顾客流失
• 联系表单搭好后没有亲自测试提交，等到真正有顾客留言才发现邮箱设置错误、收不到通知

Sources

Udemy（课程 transcript）：

1. The Completed Digital Marketing Guide 27 in 1 — Section 30, Lecture 412 (Shop & My Account Pages)
2. The Completed Digital Marketing Guide 27 in 1 — Section 30, Lecture 413 (Contact Page)

PDF 资料：

1. [Marketing+Strategy+Guidebook.pdf](sources/Section 30 - Digital Marketing Strategy with Chatgpt/Marketing+Strategy+Guidebook.pdf)