购物车为空时隐藏商品数量的实现问题求助（附代码）

问题情况 #

已通过以下代码实现WooCommerce购物车图标旁显示商品数量，但购物车为空时数量数字仍会显示，自行编写的JS脚本无法隐藏它。

已实现的代码 #

HTML

<div class="ico-shop"> 
      <a href="<?php echo wc_get_cart_url(); ?>">
    <button class="ico-shop_btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16" >
      <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
    </svg>
    </button>
    <span class="counting_cart_items"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
      </a> 
    </div>

CSS

.ico-shop button {
    background: none;
    border: none;
    outline: none;
    list-style: none;
    padding-right: 17px;
    border-right: 2px solid #afb1b5;
}

.ico-shop {
    position: relative;
}

.counting_cart_items {
    position: absolute;
    top: 18px;
    right: 3px;
    font-size: 12px;
    background: #52abff;
    color: #fff;
    text-shadow: none;
    padding: 1px 7px;
    border-radius: 50%;
}

PHP（函数文件中）

function custom_cart_count_fragments( $fragments ) {
  $fragments[ 'div.cart-totals' ] = '<div class="cart-totals">' . WC()->cart->get_cart_contents_count() . '</div>';
  return $fragments;
}

原JS脚本的问题 #

你的JS存在两个核心错误：

1. 用document.querySelector选中单个元素后，没必要用jQuery的each遍历
2. 判断条件错误：$(this) == 0是将jQuery对象与数字0比较，永远不会成立，应该获取元素的文本内容并转为数字后判断

解决方案 #

方案1：修正JS脚本（支持AJAX更新） #

WooCommerce加购/移除商品是AJAX异步操作，需监听购物车更新事件，同时处理初始加载状态：

// 统一处理数量显示逻辑
function updateCartCountVisibility() {
    const cartCountEl = document.querySelector('.counting_cart_items');
    if (cartCountEl) {
        const count = parseInt(cartCountEl.textContent.trim(), 10);
        cartCountEl.style.display = count === 0 ? 'none' : 'block';
    }
}

// 页面加载完成后执行初始检查
document.addEventListener('DOMContentLoaded', updateCartCountVisibility);

// 监听WooCommerce购物车AJAX更新事件
document.body.addEventListener('updated_cart_totals', updateCartCountVisibility);
document.body.addEventListener('wc_fragments_refreshed', updateCartCountVisibility);

方案2：服务器端直接控制（更高效，无需JS） #

在PHP渲染HTML时直接判断购物车数量，为空则不渲染数量span：
修改HTML中的数量span部分：

<?php 
$cartCount = WC()->cart->get_cart_contents_count();
if ($cartCount > 0) {
    echo '<span class="counting_cart_items">' . $cartCount . '</span>';
}
?>

同时修正PHP的片段刷新函数，确保AJAX更新时正确处理：

function custom_cart_count_fragments( $fragments ) {
    $cartCount = WC()->cart->get_cart_contents_count();
    $countHtml = $cartCount > 0 ? '<span class="counting_cart_items">' . $cartCount . '</span>' : '';
    $fragments[ '.counting_cart_items' ] = $countHtml;
    return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'custom_cart_count_fragments');

方案3：CSS辅助隐藏 #

配合方案2的PHP逻辑，当数量为空时用CSS隐藏（需确保空数量时span不输出或内容为空）：

.counting_cart_items:empty {
    display: none;
}

内容的提问来源于stack exchange，提问作者Developer