WooCommerce shopping cart product quantity and content of the real-time update display method

在电商网站中，购物车页面是核心部分之一，顾客可以在这里查看订单信息。默认情况下，WooCommerce 购物车并不会出现在菜单栏中，而这对大多数商家来说可能不够直观。因此，对购物车功能进行优化和自定义是提升转化率的重要手段。

检查 WooCommerce 是否激活

在实现购物车动态更新之前，首先要确认 WooCommerce 是否已经正确激活。如果 WooCommerce 未安装或未启用，调用购物车的功能可能会报错。下面的代码用于检测 WooCommerce 是否可用，并在购物车按钮上显示当前商品数量和总金额：

<?php global $woocommerce; ?>
<a class="your-class-name" href="/en/</?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('Cart View', 'woothemes'); ?>">
<?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'),
 $woocommerce->cart->cart_contents_count);?>  -
<?php echo $woocommerce->cart->get_cart_total(); ?>
</a>

这段代码可以放置在主题的任何模板文件中，建议放在合适的位置，例如导航栏区域，以便顾客随时查看购物车内容。

在 header.php 文件中添加购物车代码

为了让购物车信息出现在导航栏中，需要修改 header.php 文件，将购物车按钮代码插入到菜单结构中，例如：

<header id="masthead" class="site-header" role="banner">
    <?php get_template_part('template-parts/header/header', 'image'); ?>
    <?php if (has_nav_menu('top')) : ?>
    <div class="navigation-top">
        <div class="wrap">
            <?php get_template_part('template-parts/navigation/navigation', 'top'); ?>
            <!-- 购物车开始 -->
            <?php global $woocommerce; ?>
            <a class="your-class-name" href="/en/</?php echo $woocommerce->cart->get_cart_url(); ?>"
               title="<?php _e('Cart View', 'woothemes'); ?>">
                <?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'),
                $woocommerce->cart->cart_contents_count);?>  -
                <?php echo $woocommerce->cart->get_cart_total(); ?>
            </a>
            <!-- 购物车结束 -->
        </div>
    </div>
    <?php endif; ?>
</header>

保存文件后，刷新前台页面，可以看到 WooCommerce 购物车信息已经成功添加到导航栏中。

测试购物车数量和总金额显示

在代码添加完毕后，更新页面，观察购物车是否正确显示数量和金额。如果一切正常，购物车会显示以下信息。

添加商品到购物车

在前端页面上试着添加几个商品，观察购物车的更新情况。默认情况下，这个购物车信息不会自动更新，只有在刷新页面后才会变化。

tackle AJAX 购物车更新问题

default (setting) WooCommerce 购物车不会自动更新，需要手动刷新页面才能看到变化。为了解决这个问题，可以添加以下代码到 functions.php 文件，让购物车在添加商品时动态更新：

add_filter('add_to_cart_custom_fragments', 'woocommerce_header_add_to_cart_custom_fragment');
function woocommerce_header_add_to_cart_custom_fragment($cart_fragments) {
    global $woocommerce;
    ob_start();
    ?>
    <a class="cart-contents" href="/en/</?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View cart', 'woothemes'); ?>">
        <?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?>
    </a>
    <?php
    $cart_fragments['a.cart-contents'] = ob_get_clean();
    return $cart_fragments;
}

保存文件后，再次测试购物车，添加商品时，购物车数量和总金额会自动更新，无需手动刷新页面。

summarize

本文介绍了 WooCommerce 购物车的基本优化方法，包括在导航栏中显示购物车信息、动态更新购物车内容，以及使用 AJAX 让购物车实时变化。这种方式不需要额外插件，可以直接在主题文件中添加代码完成。如果希望进一步优化购物车功能，例如添加倒计时优惠、推荐商品等，还可以结合 JavaScript 进行更多交互设计。