本教程旨在解决WordPress + WooCommerce网站中购物车图标在空状态下仍显示“0”的问题。通过修改functions.php文件中的PHP代码，我们将实现当购物车为空时，仅显示购物车图标，而不显示数量圆圈及数字，从而提升用户界面简洁性和购物体验。
问题背景与目标
在wordpress和woocommerce搭建的电商网站中，为了方便用户随时查看购物车商品数量，我们通常会在导航菜单中集成一个购物车图标，并在其旁边显示当前购物车中的商品总数。这通常通过在主题的functions.php文件中添加自定义代码来实现。然而，一个常见的用户体验问题是，当购物车中没有任何商品时，这个数字区域（通常是一个带有数字的圆形或椭圆形标记）仍然会显示“0”，这可能显得冗余或不够美观。
我们的目标是优化这一显示逻辑：当购物车为空时，只显示购物车图标本身；当购物车中有商品时，才显示带有商品数量的数字标记。
现有实现分析
通常，购物车图标及其数量的添加会涉及以下两个核心WordPress和WooCommerce钩子：
wp_setup_nav_menu_item：用于在菜单项加载时修改其内容，这里用来插入购物车图标和商品数量。woocommerce_add_to_cart_fragments：用于在商品添加到购物车（通过AJAX）后，实时更新购物车相关元素，避免页面刷新。
原始代码示例可能如下所示，它在购物车URL匹配时，无条件地为菜单项标题添加了一个包含购物车图标和商品数量的HTML结构：
/* 将购物车添加到菜单 */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;}/** * 通过AJAX添加商品时更新购物车链接内容 */add_filter( 'woocommerce_add_to_cart_fragments', 'my_woocommerce_add_to_cart_fragments' );function my_woocommerce_add_to_cart_fragments( $fragments ) { // 将我们的片段添加到碎片中 // 注意：这里传递空字符串给my_item_setup，它内部会自行处理 $fragments['li.menu-item-type-woocommerce-cart'] = my_item_setup( ''); return $fragments;}
问题在于，$woocommerce->cart->get_cart_contents_count() 在购物车为空时会返回 0，而上述代码会直接将这个 0 渲染到 中。
解决方案：条件渲染购物车数量
要解决此问题，我们需要在生成购物车数量的HTML片段之前，先判断购物车中的商品数量是否大于零。只有当数量大于零时，才生成包含数字的 标签。
以下是修改后的 my_item_setup 函数代码：
/* 将购物车添加到菜单 */add_filter( 'wp_setup_nav_menu_item','my_item_setup' );function my_item_setup($item) { if ( ! is_admin() ) { // 确保只在前端执行 if ( class_exists( 'woocommerce' ) ) { // 确保WooCommerce已激活 global $woocommerce; // 检查当前菜单项的URL是否是购物车页面URL if ( $item->url == esc_url( wc_get_cart_url() ) ) { // 确保购物车对象存在 if (is_null($woocommerce->cart)){ // 如果购物车对象为空，通常不应该发生，但作为健壮性处理 $item->title = ''; } else { // 根据语言环境判断，如果不需要特定语言，可以移除此if块 if( get_locale() == 'fr_FR' ) { $innerBasket = ''; // 初始化内部篮子数量的HTML片段 $count = $woocommerce->cart->get_cart_contents_count(); // 获取购物车商品数量 // 只有当商品数量大于0时，才生成包含数量的HTML if ($count > 0) { $innerBasket = '' . $count . ''; } // 构建最终的菜单项标题 $item->title = '' . $innerBasket . ''; } else { // 如果不是 'fr_FR' 语言环境，可以添加其他语言的逻辑 // 或者默认显示英文版本，这里为了简洁，假设只有fr_FR需要处理 // 如果不限制语言，可以直接将上面的逻辑放在这个else块外面 $innerBasket = ''; $count = $woocommerce->cart->get_cart_contents_count(); if ($count > 0) { $innerBasket = '' . $count . ''; } $item->title = '' . $innerBasket . ''; } } } } } return $item;}/** * 通过AJAX添加商品时更新购物车链接内容 * 此函数保持不变，因为它依赖my_item_setup来生成内容 */add_filter( 'woocommerce_add_to_cart_fragments', 'my_woocommerce_add_to_cart_fragments' );function my_woocommerce_add_to_cart_fragments( $fragments ) { // 这里需要确保my_item_setup能正确处理空参数或模拟一个$item对象 // 一个更健壮的方法是直接在这里重新构建HTML，或者确保my_item_setup能独立生成片段 // 原始代码中传入空字符串，my_item_setup内部通过全局变量获取购物车信息，所以是可行的 $fragments['li.menu-item-type-woocommerce-cart'] = my_item_setup( (object)['url' => esc_url( wc_get_cart_url() )] ); // 传入一个模拟的$item对象 return $fragments;}
代码说明：
$innerBasket = ”;: 初始化一个空字符串，用于存储购物车数量的HTML片段。$count = $woocommerce->cart->get_cart_contents_count();: 获取购物车中商品的实际数量。if ($count > 0): 这是核心的条件判断。只有当 $count 大于 0 时，才将包含商品数量的 标签赋值给 $innerBasket。$item->title = … . $innerBasket . …;: 最终构建菜单项的标题时，将 $innerBasket 拼接进去。如果 $count 为 0，则 $innerBasket 保持为空字符串，这样就不会渲染出带有“0”的数字标记。woocommerce_add_to_cart_fragments 的优化：为了让 my_item_setup 在被 woocommerce_add_to_cart_fragments 调用时也能正常工作，我们稍微调整了 my_woocommerce_add_to_cart_fragments 中的调用方式，传入一个模拟的 $item 对象，确保 my_item_setup 内部的 if ( $item->url == esc_url( wc_get_cart_url() ) ) 条件能够被满足。
部署与注意事项
代码位置：将上述修改后的PHP代码添加到你的WordPress主题的 functions.php 文件中，或者更推荐的做法是创建一个自定义插件来管理这类功能，以确保主题更新时代码不会丢失。语言环境：示例代码中包含 if( get_locale() == ‘fr_FR’ ) 的判断。如果你的网站不是法语环境，或者你希望这个功能适用于所有语言环境，你可以移除这个 if 语句，让其逻辑直接执行。CSS样式：确保你的主题或自定义CSS中为 .cart-basket 类提供了合适的样式，以控制数字标记的显示位置、大小、颜色等。缓存：在部署代码后，如果网站使用了缓存插件，请清除所有缓存，以确保新的代码能够正确加载和执行。错误排查：如果在添加代码后出现网站白屏或其他错误，请检查 functions.php 文件中是否存在语法错误。可以通过FTP或文件管理器暂时移除代码，或查看WordPress的错误日志进行排查。
总结
通过对购物车数量显示逻辑进行条件判断，我们成功优化了WooCommerce网站的用户体验。现在，当购物车为空时，用户将看到一个简洁的购物车图标；而当购物车中有商品时，图标旁会清晰地显示商品数量。这种细节上的改进有助于提升网站的专业度和用户满意度。
以上就是优化WooCommerce购物车图标：空购物车不显示数量的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1272812.html
微信扫一扫 
支付宝扫一扫 
