如何在 WooCommerce 中添加购物车计数器

如果你使用 WooCommerce 来构建电商网站，你可能会需要添加一个购物车计数器来让用户知道他们添加了多少商品到购物车。这篇文章将会介绍如何使用代码添加购物车计数器。

第一步：打开 functions.php 文件

在您的 WordPress 主题文件夹中找到 functions.php 文件。这个文件是主题的一个重要文件，它在页面加载时会自动加载并运行其中的 PHP 代码。

在文件中添加以下代码：

function custom_cart_count() {
  $count = WC()->cart->cart_contents_count;
  ?>
  <span class="cart-items-count"><?php echo esc_html( $count ); ?></span>
  <?php
}

第二步：在模板中调用购物车计数器

在你想要显示购物车计数器的地方，添加以下代码：

<?php if ( class_exists( 'WooCommerce' ) ) { ?>
  <a href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_html_e( 'View your shopping cart' ); ?>" class="cart-link">
    <?php custom_cart_count(); ?>
  </a>
<?php } ?>

第三步：添加 CSS 样式

在 CSS 文件中添加以下代码，来让购物车计数器看起来漂亮：

.cart-items-count {
  background-color: #ff0000;
  color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  font-size: 14px;
  text-align: center;
  width: 25px;
  height: 25px;
  line-height: 25px;
  margin-left: 5px;
}

现在你已经成功地添加了一个购物车计数器到 WooCommerce 中，让你的用户知道他们添加了多少商品到购物车！