如何添加 WooCommerce 购物车计数器 - PHP

在 WooCommerce 网站中，购物车计数器是一个很重要的元素。它允许用户看到他们当前购物车中的商品数量，而无需进入购物车页面。在本文中，我们将演示如何添加一个购物车计数器到你的 WooCommerce 网站中。

步骤1：在函数中添加购物车计数器

在 functions.php 文件中添加以下 PHP 代码：

// 为购物车添加计数器
add_filter( 'woocommerce_add_to_cart_fragments', 'woo_cart_count_fragments', 10, 1 );
function woo_cart_count_fragments( $fragments ) {
  global $woocommerce;

  ob_start();
  ?>
  <span class="cart-count"><?php echo esc_html( $woocommerce->cart->cart_contents_count ); ?></span>
  <?php
  $fragments['span.cart-count'] = ob_get_clean();
  return $fragments;
}

以上代码将为购物车添加一个计数器。

步骤2：添加 CSS 样式

接下来，我们需要添加 CSS 样式，来定义计数器的样式。在 style.css 文件中添加以下 CSS 代码：

/* 购物车数量计数器 */
.cart-count {
    background: #e62e00;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    margin-left: 5px;
    margin-right: -10px;
    text-align: center;
    vertical-align: middle;
    width: 16px;
}

步骤3：将计数器添加到网站中

最后，我们需要将计数器添加到网站的相应位置上。可以将以下代码添加到你想要显示计数器的位置：

<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" title="<?php _e( 'View your shopping cart' ); ?>">
  <?php echo wp_kses_post( $woocommerce->cart->cart_contents_count ); ?>
  <span class="cart-count"><?php echo esc_html( $woocommerce->cart->cart_contents_count ); ?></span>
</a>

Code Blocks：

```php
// 为购物车添加计数器
add_filter( 'woocommerce_add_to_cart_fragments', 'woo_cart_count_fragments', 10, 1 );
function woo_cart_count_fragments( $fragments ) {
  global $woocommerce;

  ob_start();
  ?>
  <span class="cart-count"><?php echo esc_html( $woocommerce->cart->cart_contents_count ); ?></span>
  <?php
  $fragments['span.cart-count'] = ob_get_clean();
  return $fragments;
}
```

```css
/* 购物车数量计数器 */
.cart-count {
    background: #e62e00;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    margin-left: 5px;
    margin-right: -10px;
    text-align: center;
    vertical-align: middle;
    width: 16px;
}
```

```html
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" title="<?php _e( 'View your shopping cart' ); ?>">
  <?php echo wp_kses_post( $woocommerce->cart->cart_contents_count ); ?>
  <span class="cart-count"><?php echo esc_html( $woocommerce->cart->cart_contents_count ); ?></span>
</a>
```

以上就是在 WooCommerce 网站中添加购物车计数器的完整步骤。使用这个方法，你可以很容易地增强你的网站功能，帮助你提高销量。