电子商务网站设计：商品页到结算这条路径怎么设计

商品页到结算这条路径，最容易被忽略的一点是：它断掉的地方，往往不是设计得多难看，而是手机端少了点东西、Google根本没抓到那一页。电子商务网站设计真正要做的，是把商品页、购物车、结算这三段一段一段走通，让每一段都接得上。Google推荐响应式设计，理由是它在不同设备上实现和维护都最容易。

对做外贸独立站的人来说，这条路径就是收钱的口子。页面加载慢一点、按钮点不动、手机端排版散了，单子就卡在那一步。独立站运营要盯的细节很多，页面交付前先按交付验什么过一遍，能省掉后面不少返工。设计上真正要紧的从来不是好看，是路径在哪一段断了没人发现。

• WordPress 主题分块主题与经典主题两类，块主题从 5.9 起可用
• Google 推荐响应式设计，理由是它实现和维护都最容易
• 商品页加 Product 结构化数据，用 Rich Results Test 验证，再用 URL Inspection 看 Google 怎么抓
• WooCommerce 核心平台免费，发布页面后可能要数天才被 Google 抓到
• 移动端别对主要内容做需交互才加载的懒加载

下面把这条路径上的动作、依据、出了问题怎么回查讲清楚。

电子商务网站设计到底在设计什么：一条路径、两端设备

这条路径只有三段：商品页、购物车、结算。三段各管一件事，串起来才是完整的购买流程。设计要做的，是让这三段每一步都走得下去。

商品页、购物车、结算三段各管一件事

商品页管让人看懂这是什么、多少钱、买了会怎样。购物车管让人确认买了哪几件、数量对不对。结算管填地址、选配送、付钱。三段里任何一段断了，后面都接不上。

WooCommerce 的商品页用模块化商品区块来搭，自定义商品页走区块编辑这一套。站点还没搭起来的话，先看建站方法，页面设计是站能跑之后的事。

为什么移动端和桌面端必须同 URL 同内容

Google 的移动优先索引，是拿站点的移动版本（用智能手机代理抓取）来做索引和排名。手机端返回什么，Google 就主要看什么。

响应式设计在相同 URL 上向不同设备返回同一份 HTML，只是按屏幕尺寸调整显示。Google 推荐这种做法，因为它实现和维护都最容易。移动端和桌面端要用同一套 robots meta 标签。移动端单独写了 noindex 或 nofollow，Google 可能抓不到也索引不了页面。title、meta description、alt 文本、结构化数据，两边也要一致。

内容对不上，后果直接。移动页内容比桌面页少，站点切到移动优先索引后，可预期的流量损失是有的，Google 从页面拿到的信息不如以前多。

第一步：先把模板和页面结构定下来

WordPress 的模板代表网页的标记，负责创建文档结构，把静态数据和动态数据输出到前端。块主题从 WordPress 5.9 起可用，主要由 HTML 和主题配置文件构成。经典主题没有版本限制，主要用 PHP、JavaScript 和 CSS。

后台进外观 > 编辑器 > 模板 > 单篇文章，能看到单篇文章模板长什么样。模板文件在主题的 /templates 文件夹下，模板部件在 /parts 文件夹下。块主题里只有 index.html 是必需的模板文件。

模板部件是模板的一部分，作用是让同一段结构不用反复写。页头和页脚是最常见的两个模板部件，改一处，全站跟着变。先把这一层定下来，后面加商品、加分类，页面结构不会每加一个就歪一次。

WooCommerce 可以跟任何主题配合用，但可能要补一些样式。想要跟 WooCommerce 深度集成的主题，官方推荐 Storefront。

页面结构对不上，按模板层级往回查。以自定义文章类型 product、slug 为 blue-shirt 的商品页为例，查找顺序从细到粗依次是：自定义模板文件、single-product-blue-shirt.html、single-product.html、single.html、singular.html、index.html。主题里哪个文件存在，就先用哪个。

第二步：商品页设计要放什么、结构化数据怎么加

商品页要放什么，Google 的说法是尽量提供丰富的商品信息，不用管具体哪个体验会用到。

结构化数据分两类。不能直接下单的商品页，用商品摘要。客户能直接付钱的页面，用商家信息。商家信息有更多选项来写服装尺码、配送详情和退货政策这类信息。

商品有变体的时候，推荐把变体嵌套在顶层的 ProductGroup 下，用 hasVariant 属性。这是最紧凑、最自然的写法。Google 的示例里，一件外套小号绿色 39.99 USD，大号浅蓝色 49.99 USD，配送费 2.99 USD，退货窗口 60 天。变体之间价格、配送可以不一样。

电商业务的政策标记，比如退货政策和忠诚度计划，建议嵌在 Organization 标记下面。网页上的结构化数据和 Merchant Center 数据源同时提供，能让你有机会拿到更多种展示，也帮 Google 正确理解和验证数据。用 CMS 的话，用集成到 CMS 的插件来加结构化数据更简单。

做完之后怎么验：先用 Rich Results Test 跑一遍，把严重错误修掉。拿几个页面用 URL Inspection 工具看 Google 实际抓到的页面是什么样。确认页面没被 robots.txt、noindex 标签或登录挡住。没问题了，提交站点地图，让 Google 知道后面还会变。

第三步：结算流程设计能落地的只有这几件事

结算这一段，能落地的就三件事：支付网关、HTTPS、更新后怎么回查。WooCommerce 支持 100 多个支付网关，包括 Stripe、PayPal 和 Square。HTTPS 是官方推荐项。

安装走后台：登录 WordPress，进插件菜单点“添加新”，搜“WooCommerce”，点“立即安装”。装好之后先导入示例数据看商品外观。WooCommerce 自带 sample_products.xml，通过 WordPress 导入器导进来，商品长什么样一眼就能看到，看完再改真实商品。

更新 WooCommerce 之前先备份站点。更新之后商店页或分类页出问题，去设置 > 固定链接点保存，刷新一下固定链接，通常就能恢复。如果问题出在更新主题或插件之后，可能是兼容性；出在更新 WooCommerce 之后，可能是跟过时的主题或插件冲突。用 Health Check 做冲突测试，或者用暂存站点排查，两边都不影响访客。

第四步：移动端适配按官方这几条做

移动端适配按官方给的几条来。先说最关键的，head 里加 meta viewport 标签。不加的话，页面在手机上加载后会缩得很小，字读不清。

图片给 max-width 设 100%，让图片缩小适应屏幕。同时给 img 标签加 width 和 height 属性，让浏览器在图片加载前就留出位置，减少布局偏移。

手机屏幕小，内容别删。Google 的建议是把内容移进折叠面板或标签页来省空间，不是删掉。另一条是懒加载：不要对主要内容做需交互才加载的懒加载。Google 不会加载需要用户交互，比如滑动、点击、输入，才出现的内容。

移动端和桌面端的 title、meta description、alt 文本、结构化数据要一致。结构化数据如果要先做几类，先做 Breadcrumb、Product 和 VideoObject，这是 Google 给的优先顺序。

断点不要按设备类别、品牌名或操作系统来定。让内容决定布局怎么变，这样代码好维护。还有一条，不建议用 minimum-scale、maximum-scale 和 user-scalable 属性，它们会阻止用户缩放视口，可能带来无障碍问题。

出问题怎么回查，有三个明显信号。页面在手机上缩得很小，字看不清，说明缺 meta viewport。页面能左右滑动，说明有固定尺寸的图片或元素超过了视口，给图片设 max-width 就能解决。换一台手机布局就乱，说明断点按设备定了，要改成按内容定。

数字和限制：做这件事要盯的几个数

表里这几项，LCP、INP、CLS 是 Core Web Vitals 的三项阈值，按第 75 百分位、移动和桌面分段来看。WooCommerce 最低环境是上线前要核对的。抓取等待这一项，发布页面后 Google 可能要数天才能发现和抓取，别急着改来改去。

WooCommerce 核心平台免费，付费扩展的支持团队目标在 24 小时内回复。

常见误区和排查：流量掉了先查这五处

移动端和桌面端的 robots meta 标签不一致，尤其移动端写了 noindex 或 nofollow。Google 可能抓不到也索引不了页面。这是最直接能让整个页面消失的一条，先查它。

移动页内容比桌面页少。站点切到移动优先索引后，流量损失是可预期的，Google 从页面拿到的信息不如以前多。

移动端和桌面端用了不同的图片 URL。站点过渡到移动优先索引时，移动站的图片 URL 对 Google 索引来说是新的，可能出现临时的图片流量损失。

移动版有 URL 片段，以 # 开头的部分，或者不同 URL 重定向到同一 URL。大多数情况下 URL 片段不可索引，这些页面在启用移动优先索引后会从索引里缺失。不同 URL 重定向到同一 URL，比如移动端首页，也一样会缺失。

桌面某个页面正常，移动端同一页面返回错误页。这一页会从索引里缺失。

排查顺序从上往下走。先看 robots meta 和 noindex，再看内容是否对得上，然后看图片 URL 和重定向，最后查移动端有没有单独的错误页。排到哪处对上了，就改哪处。

这五处查完，页面设计上还有两块容易漏。页脚缺退货政策和联系方式，用户找不到；联系表单字段太多，用户填一半就走。页脚放哪三组信息和表单留几个字段可以对照检查，出了问题不容易被发现，但用户会碰到。

上线后看哪些数据复盘，怎么用

LCP 看首屏最大的那块内容什么时候出来。商品页上一般是主图，主图加载快不快，直接影响 LCP。INP 看用户点击或输入后页面多久有反应，加购按钮、结算按钮点下去卡不卡，看这个。CLS 看页面加载过程中布局有没有跳，图片没留位、字体加载慢，都会让 CLS 变差。

看数据注意两点。一是按第 75 百分位看，别看平均值，平均值会把慢的那部分用户藏起来。二是移动和桌面分开看，两边瓶颈不一样。Search Console 里看抓取和索引状态，哪些页面被收录、哪些报错，都在这里。

复盘的时候把改动前后对比着看，改版前的数据和改版后的数据拉出来比，别只看改版当天的。别拿外部的百分比当标准，购物车放弃率、转化率没有通用基准，跟自己的前一版比才有意义。

接着看用户体验优化和转化率优化这两块。

用 AI 帮哪几步，哪几步必须人来核

AI 在这一段能帮的，是整理、起草和对照。这几步的共同点是：规则明确、有官方文档对照、输出可以检查。AI 做起来快，但结果不能直接上线。

可以交给 AI 的几步：按模板层级列出商品页、分类页、单页各自该用哪个模板文件，先拿一份草稿，再对照 WordPress 模板层级文档核对；生成 Product 结构化数据的 JSON-LD 草稿，name、image、description、sku、brand、offers 这些字段先写全，再交人验证；把商品页要素整理成清单，按 Google 商品结构化数据的必需属性和推荐属性分成两列，缺哪项标出来；按 Core Web Vitals 三项阈值整理一份上线前自测清单。

必须人动手的只有三件事。先说第一件，在 WordPress 后台外观 > 编辑器 > 模板里点开单篇文章模板，确认商品页实际调用的是哪个模板文件。第二件，把商品页 URL 贴进 Rich Results Test，看有没有严重错误，决定是继续改还是上线。第三件，在 Search Console 的 URL Inspection 工具里看 Google 实际抓到的页面，确认没被 robots.txt、noindex 或登录挡住。

下面三条提示词是本文给的示例，不是官方模板，可以直接复制。

1. 按 WordPress 模板层级，为一个自定义文章类型 product、slug 为 blue-shirt 的商品页列出模板文件查找顺序，只列文件名，不解释。
2. 按 Google Product 结构化数据要求，为一件价格 39.99 USD、库存 InStock、支持 60 天退货的商品生成 JSON-LD 草稿，字段名用 schema.org 原名。
3. 把这份商品页要素清单按 Google 商品结构化数据的必需属性和推荐属性分成两列，缺的标出来。

整理和起草的活交给 AI，验证完上线，猎者出海的AI Agent 能接着做上线运营：自己拉数据，每周给你一张单子，指出改哪几篇、改什么、先改哪篇。

常见问题

WooCommerce 能配我现在的主题吗？

能。WooCommerce 跟任何主题都能配合用，但可能要补一点样式。想要跟 WooCommerce 深度集成的主题，官方推荐 Storefront。

WooCommerce 装好之后从哪开始配置？

看 Getting Started 和 New WooCommerce Store Owner Guide 这两份官方文档。先用 sample_products.xml 导入示例商品看外观，再改真实商品。

站点更新后出问题先做什么？

先按故障排查指南诊断。商店页、分类页异常，去设置 > 固定链接点保存刷新固定链接。更新前先备份。

发现 WooCommerce 的 bug 去哪报？

WooCommerce 的 GitHub 仓库可以报缺陷，也可以通过支持论坛通知。

想要新功能去哪提？

官方功能请求板可以提新功能和扩展，也可以给已有的建议投票。

不做纯设计、先立品牌行不行？

行。页面设计解决的是路径通不通，品牌解决的是用户记不记得住你，两件事可以分开做。首页品牌形象怎么立，可以看首页品牌形象。

商品页到结算这条路径，设计上没什么花活，一段一段对下去就行。移动端和桌面端同 URL、同内容、同结构化数据，模板层级对清楚，结构化数据验过，结算能安全收钱，这几件事做到了，路径就是通的。上线之后的数据不用天天盯，猎者出海的AI Agent 按周拉一次、出一份改稿单，照着改就行。