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

本文旨在解决 WooCommerce 网站购物车菜单在购物车为空时显示 "0" 的问题。我们将提供一段代码，该代码可以检测购物车是否为空，并在购物车为空时仅显示购物车图标，而隐藏数量圆圈。通过本文，你将学习如何修改 WordPress 主题的 functions.php 文件，以及如何使用 WooCommerce 提供的函数来实现这一功能。

隐藏空购物车时购物车数量的实现方法

在 WooCommerce 网站上，通常需要在菜单中显示购物车图标，并显示购物车中商品的数量。但当购物车为空时，显示 "0" 可能不太美观。以下是如何在购物车为空时隐藏数量显示的步骤：

1. 打开 functions.php 文件：

   首先，你需要编辑你当前使用的主题的 functions.php 文件。你可以通过 WordPress 后台的 "外观" -> "主题编辑器" 找到它。请注意，直接修改主题文件存在风险，建议使用子主题或代码片段插件进行修改，以避免主题更新导致修改丢失。

2. 修改购物车菜单显示的代码：

   找到你之前添加到 functions.php 文件中，用于在菜单中显示购物车图标和数量的代码。通常，它类似于以下内容：

   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' ) {
                           $item->title = ''. '' .  $woocommerce->cart->get_cart_contents_count() . '';
                       }
                   }
   
               }
           }
       }
       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;
   }

3. 添加条件判断：

   

   佳可商务购物程序 2004

   在原版的基础上做了一下修正评论没有提交正文的问题特价商品的调用连接问题去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正主题添加问题商家注册页导航连接问题销售排行不能显示更多问题热点商品不能显示更多问题增加了服务器探测 增加了空间使用查看 增加了在线文件编辑增加了后台管理里两处全选功能更新说明：后台的部分功能已经改过前台

   下载

   修改代码，添加一个条件判断，只有当购物车中的商品数量大于 0 时，才显示数量圆圈。修改后的代码如下：

   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 = '' . $count . '';
                           };
   
                           $item->title = '' . $innerBasket . '';
                       }
                   }
   
               }
           }
       }
       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;
   }

   这段代码的核心在于：

   • 使用 $woocommerce->cart->get_cart_contents_count() 获取购物车中的商品数量。
   • 使用 if ($count > 0) 条件判断，只有当数量大于 0 时，才将包含数量的 HTML 代码赋值给 $innerBasket 变量。
   • 最后，将 $innerBasket 变量嵌入到购物车图标的 HTML 代码中。

4. 保存文件并测试：

   保存 functions.php 文件，然后刷新你的网站。如果购物车为空，你应该只看到购物车图标，而没有数量显示。当你向购物车中添加商品时，数量圆圈应该会正常显示。

注意事项

• 子主题或代码片段插件： 强烈建议使用子主题或代码片段插件来添加这段代码，以避免主题更新导致修改丢失。
• 缓存问题： 修改 functions.php 文件后，可能需要清除网站缓存才能看到效果。
• CSS 样式： 确保你的 CSS 样式能够正确显示购物车图标和数量圆圈。

总结

通过以上步骤，你可以轻松地在 WooCommerce 网站的购物车菜单中隐藏空购物车时的数量显示，从而提升用户体验。记住，修改主题文件需要谨慎，并做好备份工作。