WordPress + WooCommerce 商品简码完整详解

内容目录 隐藏

WordPress + WooCommerce 商品简码完整详解

前提:必须安装 WooCommerce 插件才有商品简码;简码可以放在页面、文章、小工具、Elementor/古腾堡简码块内。 ⚠️ 重点区分: (单数)= 单个商品卡片

(复数)= 商品列表/网格(最常用、功能最强)

一、基础简码总览

1. 展示单个商品

(商品缩略卡片:图+标题+价格+加入购物车)

// 通过商品ID调用
[product id="123"]

// 通过SKU调用

[product sku="GOOD001"]

// 自定义CSS类方便样式修改

[product id="123" class="custom-item"]

(嵌入完整商品详情页)

完整加载商品页模板(图库、详情、规格选项卡、评价)

[product_page id="123"]

仅显示价格+加入购物车按钮(无图片)

[add_to_cart id="123"]

二、核心万能简码:
(复数,重点!)

WooCommerce 3.2+ 统一简码,可以实现:按ID、分类、标签、属性、特价、热销、随机、分页等几乎所有展示需求。 基础语法

[products 参数1="值" 参数2="值"]

全部可用参数分类

📐 布局控制

  1. limit:展示商品数量;-1 = 显示全部
  2. columns:网格列数(默认4)
  3. paginate="true":开启分页(必须配合 limit)
  4. class="xxx":外层自定义CSS类

🧩 筛选商品

  1. ids="1,2,3" 指定若干商品ID(逗号分隔)
  2. skus="SKU01,SKU02" 通过货号调取
  3. category="shirt,shoe" 分类别名(slug,不是中文名称!)
  4. tag="hot,new" 标签别名
  5. visibility="featured" 只显示【特色商品】
  6. on_sale="true" 只显示打折商品
  7. best_selling="true" 销量最高商品
  8. top_rated="true" 评分最高商品
  9. attribute="color" terms="red" 按商品属性筛选

📊 排序参数

  • orderby
    • title(默认)标题
    • date 发布时间(新品)
    • popularity 销量
    • rating 评分
    • rand 随机(缓存插件容易失效)
    • id ID排序
    • menu_order 后台手动排序
  • order="ASC" / order="DESC" 升序/降序

三、高频实用示例(直接复制修改)

1. 指定若干商品ID,一行3列展示6个

[products ids="22,35,41,56,67,89" limit="6" columns="3"]

2. 指定分类商品、最新发布、3列6个

[products category="lure" limit="6" columns="3" orderby="date" order="DESC"]

3. 只展示特价促销商品,随机4个

[products on_sale="true" limit="4" columns="4" orderby="rand"]

4. 热销商品(销量排行)

[products best_selling="true" limit="8" columns="4"]

5. 商品属性筛选:颜色=黑色

[products attribute="color" terms="black" limit="6" columns="3"]

6. 带分页的商品列表(每页12个,4列)

[products category="clothes" limit="12" columns="4" paginate="true"]

7. 特色商品(后台商品勾选【特色】)

[products visibility="featured" limit="6" columns="3"]

8. 多分类同时调取(路亚+渔具两个分类slug)

[products category="lure,fishing" limit="9" columns="3"]

四、其他配套商品简码(旧版兼容,推荐优先用

这些是历史遗留简码,功能都能被

替代

// 最新商品
[recent_products per_page="6" columns="3"]

// 特价商品

[sale_products per_page="6" columns="3"]

// 热销

[best_selling_products per_page="6" columns="3"]

// 高分商品

[top_rated_products per_page="6" columns="3"]

// 特色商品

[featured_products per_page="6" columns="3"]

分类简码:只输出某个分类下商品

[product_category category="lure" limit="8" columns="4"]

显示所有商品分类封面列表(不是商品,是分类)

[product_categories number="12" columns="4"]

五、常见问题排查

  1. 商品不显示
    • 商品状态:已发布
    • 目录可见性:不要设为【隐藏】
    • category/tag 使用 别名(slug),不要填中文名称
    • 缓存插件开启随机排序 rand 时,刷新不会变化
  2. 列数不生效 部分主题强制覆盖简码网格样式,需要自定义CSS;Elementor中简码小工具容器宽度也会影响布局。
  3. 分页 paginate 无效 必须同时写 limit;不能搭配 ids="" 指定商品(指定ID列表无法分页)。
  4. 简码在侧边栏小工具失效 部分主题默认关闭小工具简码解析,需要代码开启。

六、进阶:自定义简码样式示例CSS

放到自定义→附加CSS,修改商品网格间距

.woocommerce.columns-3 li.product {
    margin: 0 10px 25px;
}
.custom-item .woocommerce-loop-product__title {
    font-size:14px;
}

文章完毕,祝你好运!

发表评论

要发表评论,您必须先登录
购物车
滚动至顶部