WordPress 商品与购物车：展示、加购与转化
WooCommerce 装完不等于能卖货。真正影响成交的只有三件事：商品类型选对、详情页信息够用、结算页字段够少。前两件决定用户「想不想买」，第三件决定「买不买得成」。这三块里任何一块出问题，流量再精准也换不来订单。
一、商品类型选错，后面全是补救
| 类型 | 适用场景 | 库存管理 | 最常见的错误 |
|---|---|---|---|
| Simple 简单商品 | 单一规格、单一价格 | 单一 SKU，可设数量 | 颜色尺码写在描述里，导致无法按规格下单 |
| Variable 可变商品 | 多尺码、多颜色、多材质 | 按变体分别管理 | 属性没勾「用于变体」，生成不出变体 |
| Virtual 虚拟商品 | 课程、服务、上门安装 | 不发货 | 忘勾虚拟，结算时强制填收货地址 |
| Downloadable 可下载 | 电子书、素材、许可证 | 不限数量 | 没设下载次数与有效期，链接被到处转发 |
可变商品是最容易出问题的一类。正确顺序是：先在「产品 → 属性」里建全局属性（比如「尺寸」），再在商品页的「属性」标签里添加并勾选「用于变体」，最后点「变体」标签里的「从所有属性生成变体」。跳过第二步，变体页会是空的，前台只显示一句「该产品目前缺货」。一个可变商品超过 50 个变体时，编辑页会明显变慢，这是 wp_postmeta 里变体数据膨胀导致的，属于结构性问题，不是服务器配置问题。
二、商品详情页的要素顺序
默认 WooCommerce 模板的输出顺序是：图库 → 标题 → 价格 → 简短描述 → 加购按钮 → 分类标签 → 长描述 → 评价。这个顺序本身没问题，问题出在大多数人只填了长描述，简短描述空着。
简短描述是详情页里性价比最高的一块。它出现在加购按钮正上方，用户决定要不要点按钮时看的就是这两三行。写清楚三件事就行：这东西解决什么问题、包含什么、多久能到。长描述再展开参数、场景、售后。
- 主图 1200×1200 白底，正方形，压缩到 200KB 以内。
- 画廊放 3 到 6 张，至少一张细节图、一张使用场景图、一张尺寸标注图。
- 价格下方直接写运费规则和发货时效，别等结算才告诉用户。
- 库存少于 10 件时显示剩余数量，比只显示「有货」有效。
三、加购按钮与 AJAX 加购
WooCommerce 在两处的行为不一样：归档页（商品列表、分类页）默认是 AJAX 加购，按钮带 ajax_add_to_cart 和 add_to_cart_button 两个 class，请求打到 ?wc-ajax=add_to_cart；详情页默认是表单 POST，提交后整页跳转到购物车。后者体验差一截，用户会觉得「我只是加个购物车，怎么跳走了」。
想在列表页补一个数量选择器，用 woocommerce_loop_add_to_cart_link 过滤器重写按钮即可：
add_filter( 'woocommerce_loop_add_to_cart_link', function ( $html, $product ) {
if ( ! $product->is_type( 'simple' ) || ! $product->is_in_stock() ) {
return $html;
}
return sprintf(
'<a href="%s" data-quantity="1" data-product_id="%d" class="button add_to_cart_button ajax_add_to_cart">加入购物车</a>',
esc_url( $product->add_to_cart_url() ),
$product->get_id()
);
}, 10, 2 );AJAX 加购失败，八成不是 WooCommerce 的问题，而是缓存。整页缓存会把 ?wc-ajax= 请求也缓存住，返回上一次的结果；CDN 剥离 Set-Cookie 会导致购物车 session 丢失；页面缓存还会让购物车数量角标停在旧数字。处理办法是在缓存插件里排除 wc-ajax、cart、checkout、my-account 这几条路径，并关闭这些页面的 HTML 缓存。
购物车角标要实时更新，得挂 woocommerce_add_to_cart_fragments，把角标的 HTML 片段返回去。自己重写了购物车图标却没接这个过滤器，就会出现「加购成功但数字不动」。
四、购物车页与结算页的精简
先确认一件事：你的站用的是短代码版还是区块版。[woocommerce_cart] 和 [woocommerce_checkout] 是短代码版，能用 PHP 过滤器改字段；WooCommerce 8.3 之后新装站点默认用 Cart Block 和 Checkout Block，这两个是 React 渲染的，woocommerce_checkout_fields 过滤器完全不生效，要改字段得用区块自己的 Additional Checkout Fields API，或者把结算页换回短代码版。改了半天没反应，先看这一条。
短代码版精简字段：
add_filter( 'woocommerce_checkout_fields', function ( $fields ) {
unset( $fields['billing']['billing_company'] );
unset( $fields['billing']['billing_address_2'] );
unset( $fields['order']['order_comments'] );
$fields['billing']['billing_phone']['required'] = true;
$fields['billing']['billing_phone']['priority'] = 25;
return $fields;
} );| 字段 | 默认状态 | 建议 | 原因 |
|---|---|---|---|
| 公司名 | 可选 | B2C 删除 | 增加填写负担，几乎没人填 |
| 地址第二行 | 可选 | 删除 | 国内地址一段就够 |
| 邮编 | 必填 | B2C 可删，B2B 保留 | 快递不依赖邮编，填错反而卡住 |
| 电话 | 必填 | 保留并前置 | 配送异常时唯一能联系上的方式 |
| 订单备注 | 展开 | 折叠或删除 | 视觉上像多了一道必填题 |
同时把优惠券输入框默认收起，访客结账打开（「WooCommerce → 设置 → 账户与隐私」里取消勾选「结账时必须登录」）。这两项对转化率的影响比换主题大。
五、弃购的六个真实原因
- 运费在最后一步才出现。商品页写「满 99 包邮」，比结算页突然多出 12 元运费强得多。
- 强制注册。用户只是想买一件东西，不想再记一个密码。
- 结算字段太多。每多一个必填项，流失一小截。
- 支付方式单一。只有对公转账的站，移动端下单率会非常低。
- 库存状态和按钮不一致。显示「缺货」但按钮还能点，点了报错。
- 移动端加购按钮被固定底栏或客服浮窗遮住。
排查弃购不要靠猜，先看数据。「WooCommerce → 分析 → 漏斗」能看到「加入购物车 → 到达结算 → 下单」的逐级流失；再结合「分析 → 收入」里的失败订单，分清是用户主动放弃还是支付回调失败。支付回调失败通常表现为订单状态卡在「待付款」，这时候要查的是支付插件的异步通知地址和 HTTPS 是否正常，而不是页面设计。
六、图和规格表对转化的实际影响
商品图的影响是可以量化的。移动端主图超过 500KB、首屏加载超过 2.5 秒，跳出率会明显上升；同一组商品，加了尺寸标注图和场景图之后，退货率通常下降，因为用户对尺寸的预期更准了。技术上做三件事就够：转成 WebP、按容器尺寸生成多档缩略图、静态资源走 CDN。
规格表建议直接用 HTML 表格写进长描述，不要做成图片。图片里的参数搜不到、复制不了、在手机上要放大看，而且不利于搜索收录。一张 6 行的表能覆盖 90% 的售前咨询：材质、尺寸、重量、颜色、包装清单、保修期。
评价区要打开，但要配审核。带图评价对转化的推动最明显，可以在发货后三天自动发一封邀请评价的邮件——这封邮件同样依赖稳定的 SMTP，否则发不出去。差评不要删，公开回复并给出解决方式，比一片清一色好评更可信。默认的评价表单字段多，把「网址」这类无关字段删掉能提高提交率。
七、性能与安全
WooCommerce 的 wp_postmeta 增长很快，一个 500 个商品的站，meta 表很容易过十万行。定期清理 _transient_ 开头的记录和已完成的会话数据，能明显降低后台卡顿。「WooCommerce → 设置 → 高级」里的 wp_woocommerce_sessions 表也要定期清，未登录用户的购物车都存这里。
结算页必须走 HTTPS，混合内容会让支付插件直接拒绝加载。另外建议关掉前台不需要的 REST 端点，商品接口会暴露价格和库存结构，被比价脚本抓取的成本很低。整站结构规划可以看建站总览，速度层面的优化在速度优化里有逐项做法，图片和静态资源走CDN 加速效果最直接。证书没配好的先看SSL 配置，商品页模板要改结构的话参考主题定制。