WooCommerce 菜单购物车：隐藏空购物车时的数量显示

2025-09-08

WooCommerce 菜单购物车：隐藏空购物车时的数量显示

woocommerce 菜单购物车：隐藏空购物车时的数量显示

本文旨在解决 WooCommerce 网站中，菜单购物车图标在购物车为空时显示 “0” 的问题。通过修改 functions.php 文件中的代码，实现当购物车为空时，只显示购物车图标，隐藏数量标记，从而提供更友好的用户体验。本文将提供详细的代码示例和步骤，帮助你轻松实现此功能。

隐藏空购物车数量标记的步骤

在 WooCommerce 网站中，我们经常会在菜单中添加一个购物车图标，并显示购物车中的商品数量。但当购物车为空时，默认情况下会显示 “0”，这可能会影响用户体验。以下步骤将指导你如何修改代码，使其在购物车为空时隐藏数量标记。

定位代码： 首先，你需要找到你的 WordPress 主题的 functions.php 文件。通常位于 wp-content/themes/你的主题名称/functions.php。
修改 my_item_setup 函数： 在 functions.php 文件中找到名为 my_item_setup 的函数。该函数负责生成菜单项的内容，包括购物车图标和数量。
添加条件判断： 在 my_item_setup 函数中，你需要添加一个条件判断，只有当购物车中的商品数量大于 0 时，才显示数量标记。以下是修改后的代码示例：

灵办AI

免费一键快速抠图，支持下载高清图片

63

查看详情

/* Add cart to menu */
add_filter( 'wp_setup_nav_menu_item','my_item_setup' );
function my_item_setup($item) {

    if ( ! is_admin() ) {
        if ( class_exists( 'woocommerce' ) ) {

            global $woocommerce;

            if ( $item->url == esc_url( wc_get_cart_url() ) ) {

                if (is_null($woocommerce->cart)){

                } else {
                    if( get_locale() == 'fr_FR' ) {
                        $innerBasket = '';
                        $count = $woocommerce->cart->get_cart_contents_count();  

                        if ($count > 0) {
                            $innerBasket = '<span class="cart-basket d-flex align-items-center justify-content-center">' . $count . '</span>';
                        };

                        $item->title = '<span style="position:relative;"><i class="fal fa-shopping-cart" style="font-size:1.25em;"></i>' . $innerBasket . '</span>';
                    }
                }

            }
        }
    }
    return $item;
}

/**
 * Updates the content of the cart link via AJAX when adding an item */
add_filter( 'woocommerce_add_to_cart_fragments', 'my_woocommerce_add_to_cart_fragments' );
function my_woocommerce_add_to_cart_fragments( $fragments ) {
    // Add our fragment
    $fragments['li.menu-item-type-woocommerce-cart'] = my_item_setup( '');
    return $fragments;
}

登录后复制

代码解释：

$innerBasket = ”;: 初始化一个空字符串变量 $innerBasket，用于存储数量标记的 HTML 代码。
$count = $woocommerce->cart->get_cart_contents_count();: 获取购物车中的商品数量。
if ($count > 0) { … }: 判断购物车中的商品数量是否大于 0。
$innerBasket = ‘’ . $count . ‘’;: 如果购物车中的商品数量大于 0，则将包含数量的 HTML 代码赋值给 $innerBasket 变量。
$item->title = ‘’ . $innerBasket . ‘’;: 将购物车图标和数量标记的 HTML 代码组合起来，赋值给菜单项的标题。

保存文件： 保存 functions.php 文件。
清除缓存： 清除 WordPress 网站的缓存，包括主题缓存、插件缓存以及浏览器缓存。

注意事项

备份文件： 在修改 functions.php 文件之前，请务必备份该文件，以防止出现意外情况。
主题更新： 如果你的主题进行了更新，你可能需要重新应用这些修改，因为主题更新可能会覆盖 functions.php 文件。
子主题： 建议将这些修改放在子主题的 functions.php 文件中，这样可以避免主题更新导致修改丢失。
CSS样式： 上述代码使用了 cart-basket 类名。请确保你的主题或插件定义了相应的 CSS 样式，以便正确显示数量标记。
语言环境： 代码示例中包含 if( get_locale() == ‘fr_FR’ )，这表明代码最初是为法语环境设计的。你需要根据你的网站语言环境进行相应的调整，例如删除此判断，或者添加其他语言环境的判断。

总结

通过以上步骤，你可以轻松地实现在 WooCommerce 网站中，当购物车为空时隐藏数量标记的功能。这可以提升用户体验，避免在购物车为空时显示 “0” 的情况。记住在修改代码之前备份文件，并注意主题更新可能导致修改丢失的问题。通过使用子主题，你可以更好地管理自定义代码，避免主题更新带来的影响。

以上就是WooCommerce 菜单购物车：隐藏空购物车时的数量显示的详细内容，更多请关注php中文网其它相关文章！