Bricks 按 WooCommerce 产品属性值条件渲染元素

需求场景

Bricks 官方群里有用户提了这样一个需求：产品详情页想根据用户选择了哪个产品属性值来显示对应内容。他有一个名为 difficulty（难度）的属性，取值有 very-easy、easy、moderate、hard 四档，希望每一档难度各显示一个对应的教学视频。

这类“属性值不同 → 页面内容不同”的需求很常见：颜色属性显示对应色卡、材质属性显示对应工艺说明、尺寸属性显示对应尺码表等等。

核心思路：属性即 Taxonomy

关键认知：WooCommerce 的产品属性（Product Attributes）本质上就是 taxonomy。每个全局属性在后台注册时都会生成一个对应的分类法（比如属性 color 对应 pa_color），属性值就是该分类法的术语（term）。

既然是 taxonomy，那么在 Bricks 里判断“当前产品的某个属性值是不是 X”，就和判断“当前文章的某个分类是不是 X”完全一样——直接用动态数据条件，不需要写任何 PHP。

配置动态数据条件

在 Bricks 编辑器中选中目标元素（比如视频区块），打开条件（Conditions）面板，添加一条动态数据条件，标签填：

{product_attribute:color:plain}

说明（对应原文截图中的用法）：

• color 是属性名，替换成你自己的属性名（如 difficulty）；

• :plain 是动态数据过滤器，作用是把输出中的超链接剥掉——因为产品属性默认渲染成带链接的 HTML（点击可跳到属性归档页），而条件比较需要的是纯文本值；

• 条件的比较值填你想匹配的属性值，比如 Red。

配置后，只有当前产品的 color 属性等于 Red 时，该元素才会输出；其他属性值下自动隐藏。应用到 difficulty 场景，就是 four 个视频区块各挂一条“属性 = 对应难度”的条件，页面自动只显示匹配的那一个。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

补充与小结

两个容易踩的坑：

1. 属性必须是全局属性（Global attribute）：在 产品 → 属性 里创建的全局属性才会注册成 taxonomy，产品编辑页里临时加的“自定义属性”不会生成 pa_ 分类法，无法用这个标签判断。个别产品属性若未开启“公开（public）”，旧版 Bricks 的动态数据下拉里可能不显示，先确认属性勾选了公开。

2. 条件用的是产品页上下文：这个标签默认读取当前产品（single product）的属性。如果你要在 Query Loop 里对每个循环项判断，需要确保循环项上下文正确，必要时配合 {product_attribute:xxx} 的循环内取值。

小结：本文展示的是 Bricks 条件渲染最实用的一类——把业务数据（产品属性）映射成 taxonomy，再用动态数据条件做显示控制。纯配置、零代码，维护起来也直观。配合 :plain 过滤器处理链接问题，是 Bricks + WooCommerce 定制产品页的高频套路。

纯配置 vs 写代码

这个「按属性值显示不同内容」的需求，Bricks 用动态数据条件就能纯配置搞定，零代码、好维护，是首选。什么时候才需要写代码？当你的属性不是全局属性、或要做更复杂的「多属性组合判断、跨产品联动」时，才退化到 PHP/JS 方案。常见误区提醒：属性必须是全局属性（在 产品→属性 里建），临时加的自定义属性不会生成 pa_ 分类法，动态标签读不到；循环里对每个项判断时，要确保取的是循环项上下文的属性，别拿成外层产品。配合 :plain 过滤器处理链接文本问题。

常见问题（FAQ）

Q：为什么我的属性在动态数据里读不到？ A：属性必须是全局属性（产品→属性里建），临时自定义属性不会生成 pa_ 分类法。

Q：一定要写代码吗？ A：不用，用动态数据条件纯配置就能按属性值显示不同内容，零代码。

Q：循环里每个产品判断错了？ A：确认取的是循环项上下文的属性，必要时用 {product_attribute:xxx} 的循环内取值。

Q：属性值带链接怎么处理？ A：用 :plain 过滤器去掉链接、只取纯文本，避免样式错位。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程