「woocommerce」
共 13 篇相关教程
Bricks vs Elementor 2026：正面对决基准测试
Bricks 还是 Elementor？本文对比 2026 年两者的性能基准、价格、动态数据、交互、条件逻辑和 WooCommerce 能力，给出适合你的结论。
Bricks 自定义 WooCommerce 账户中心：完整搭建教程
有人在 Bricks Facebook 群https://www.facebook.com/groups/brickscommunity/posts/1311323746198809/里提问：
WooCommerce 产品循环模板覆盖：用 Bricks 模板替换默认产品循环
Bricks 里的查询循环（query loop）确实强大又方便，但你也肯定不想把自定义的 WooCommerce 产品循环复制粘贴到每个页面里吧？有时候你用 Bricks 把 WooCommerce 设计得挺漂亮，可产…
Bricks 判断 WooCommerce 购物车是否为空（条件渲染）
根据购物车是否为空条件渲染元素：注册一个自定义函数并白名单化，再用 Bricks 动态数据条件 {echo:bl_is_cart_empty} 控制任意元素显示。
Bricks 将 WooCommerce 产品分类图片设为 Section 背景
在 WooCommerce 产品分类归档模板中，把分类缩略图作为 Section 背景图。注册一个返回分类图片 URL 的自定义函数，白名单化后用 {echo:...} 动态数据标签填进背景。
Bricks 打造自定义 WooCommerce 账户中心（My Account Dashboard）
WooCommerce 自带的 Account Page 元素很受限。用 Bricks 的账户构建器从零搭一个左侧固定导航 + 右侧内容区的自定义账户中心，含导航覆盖、链接配色与端点模板完整步骤。
Bricks 在 My Account 页面标题后追加 WooCommerce 端点名称
WooCommerce 的 My account 各端点页（订单/下载/地址/账户详情）标题都一样。用自定义函数识别当前端点并拼接后缀，让页面标题变成『订单 - Orders』这种可区分的文案。
Bricks 查询循环只显示促销中（On Sale）的 WooCommerce 产品
在 Bricks Query Loop 中只输出正在促销的产品。原文为付费教程，本文给出场景与步骤骨架，并用 Bricks 官方钩子 bricks/posts/query_vars 补全实现。
Bricks 按 WooCommerce 产品属性值条件渲染元素
WooCommerce 产品属性本质是 taxonomy，可以在 Bricks 里按属性值做元素条件判断。例如属性 color=Red 时显示某个视频/区块。含 :plain 过滤器说明。
Bricks 让 WooCommerce 数量输入框与加入购物车按钮并排
WooCommerce 单产品页默认数量输入框和加入购物车按钮上下排列。用一段 Flex 布局 CSS 让它们水平并排，无需改模板。
Bricks 用 Popup + 交互做 WooCommerce 商品快速预览
不装插件，用 Bricks 自带的 Popup 模板和 Interactions 交互给商品网格加快速预览：点击按钮弹出灯箱，展示图片、价格、简介与加购按钮。
Bricks 移除 WooCommerce 产品图库中的特色图片
WooCommerce 单产品页图库默认把特色图也算进去。用 woocommerce_single_product_image_thumbnail_html 过滤器把特色图从图库中剔除，只显示附加图库图片。
WooCommerce 滚动吸顶 Add to Cart 区块（Bricks）
在 Bricks 中构建一个滚动时吸顶的加入购物车区块，包含产品图、标题、价格、数量与购买按钮，下滑淡入、回顶淡出，纯构建器实现无需插件。