Bricks 判断 WooCommerce 购物车是否为空（条件渲染）

应用场景

在做 WooCommerce 站点时，经常需要根据用户购物车状态来显示或隐藏某些内容。比如：

• 购物车为空时显示“快去逛逛吧”的引导区块，不为空时显示“去结算”按钮；

• 购物车为空时隐藏“购物车详情”区域；

• 顶栏显示“购物车 (0)“还是”购物车 (3)“之类的提示。

Bricks 本身没有内置“购物车是否为空”的条件，但通过自定义函数 + 动态数据条件的组合，几行代码就能实现，而且可以套用到任意元素上。

Step 1：注册自定义函数

在子主题的 functions.php（不需要开头 <?php 标签）或代码片段插件中添加：

// Function to check if WooCommerce cart is empty.
function bl_is_cart_empty() {
	if ( function_exists( 'WC' ) ) {
		return WC()->cart->is_empty();
	}
	return true;
}

原理很简单：WooCommerce 全局对象 WC() 提供 cart->is_empty() 方法，返回布尔值。加一层 function_exists( 'WC' ) 判断是为了防止 WooCommerce 未激活时调用报错——此时函数直接返回 true（当作空购物车处理），避免白屏。

Step 2：白名单化函数

Bricks 出于安全考虑，不允许在动态数据里直接执行任意 PHP 函数（防止注入），只有白名单内的函数才能通过 {echo:函数名} 调用。所以必须把 bl_is_cart_empty 加进白名单：

add_filter( 'bricks/code/echo_function_names', function() {
    return [
        'bl_is_cart_empty',
    ];
} );

如果你还有其他自定义函数要在 Bricks 动态数据里用，全部塞进这个数组即可。也可以在 Bricks → 设置 → 自定义代码里点 Code review 按钮检查当前用到的函数。

Step 3：配置动态数据条件

在 Bricks 编辑器里选中目标元素，打开**条件（Conditions）**面板，添加一条动态数据条件：

{echo:bl_is_cart_empty}

比较操作符保持默认的“等于”、值为 1（即 true）。这样：

• 购物车为空 → 函数返回 1 → 条件成立 → 元素显示；

• 购物车不为空 → 函数返回 0 → 条件不成立 → 元素隐藏。

反过来，如果你想在购物车不为空时显示元素，把要检查的值改成 0 即可。记住：1 是 true，0 是 false。

相关阅读：

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

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

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

注意事项与小结

一个容易踩的坑：AJAX 场景下条件不会即时刷新。因为购物车商品是通过 AJAX 移除的，前端页面上的条件判断结果不会立刻更新——用户需要刷新页面或跳转到其他页面后，条件才会按最新购物车状态重新计算。如果对实时性要求高，需要配合前端 JS 监听 added_to_cart / removed_from_cart 事件自行切换元素，本文不展开。

小结：这个套路是 Bricks + WooCommerce 条件渲染的通用范式——自定义函数负责“算状态”，bricks/code/echo_function_names 负责放行，动态数据条件负责渲染控制。同样的方法可以扩展到“购物车总价是否大于 X”“用户是否已登录”等各种判断，值得收藏复用。

适用场景与扩展

购物车空/非空判断适合购物车引导、结算 CTA、会员专区门槛这类按购物状态切换内容的场景。本文的范式还能扩展到更多判断：购物车总价是否大于 X、用户是否已登录、某商品是否在购物车里——本质都是「自定义函数算状态 + bricks/code/echo_function_names 白名单放行 + 动态数据条件渲染」。但要记住前面提过的坑：AJAX 加购/删购后条件不会即时刷新，要求实时就补一段监听 added_to_cart/removed_from_cart 的前端 JS。白名单放行这一步别省，否则函数暴露在前端有安全风险。

常见问题（FAQ）

Q：除了判断空/非空还能判断什么？ A：购物车总价是否大于 X、用户是否登录、某商品是否在购物车里，范式一样。

Q：加购后条件没立刻变？ A：因为删购走 AJAX，条件不即时刷新，要求实时需补前端 JS 监听购物车事件。

Q：为什么要白名单函数？ A：只放行你允许的函数到前端动态数据，避免任意函数被执行的安全风险。

Q：这个范式能用在其他状态判断吗？ A：能，任何「算状态→条件渲染」的需求都可套用同一套结构。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 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.

获取报价 →浏览全部教程