WordPress購物車顯示數(shù)量功能實(shí)現(xiàn)指南

來自：素雅營銷研究院

方知筆記

2025年06月06日 22:36

在電子商務(wù)網(wǎng)站中，購物車數(shù)量顯示是一個(gè)至關(guān)重要的用戶體驗(yàn)元素。對(duì)于使用WordPress搭建的在線商店來說，正確顯示購物車中的商品數(shù)量能夠幫助客戶快速了解當(dāng)前購物狀態(tài)，提高轉(zhuǎn)化率。本文將詳細(xì)介紹如何在WordPress網(wǎng)站上實(shí)現(xiàn)購物車數(shù)量顯示功能。

一、為什么需要購物車數(shù)量顯示

提升用戶體驗(yàn)：讓訪客一目了然地看到自己已選擇的商品數(shù)量
增加轉(zhuǎn)化率：通過視覺提醒鼓勵(lì)用戶完成結(jié)賬流程
減少跳出率：當(dāng)用戶看到購物車中有商品時(shí)，更可能返回完成購買

二、使用WooCommerce默認(rèn)功能顯示購物車數(shù)量

WooCommerce作為WordPress最流行的電商插件，本身就提供了購物車數(shù)量顯示功能：

確保已安裝并激活WooCommerce插件
進(jìn)入WordPress后臺(tái)的”外觀 > 菜單”
在菜單編輯頁面，點(diǎn)擊”屏幕選項(xiàng)”并勾選”WooCommerce菜單”
將”購物車”添加到您的導(dǎo)航菜單中
保存菜單后，前端將自動(dòng)顯示購物車圖標(biāo)及商品數(shù)量

三、自定義購物車數(shù)量顯示樣式

如果您想自定義購物車數(shù)量的顯示方式，可以通過以下方法實(shí)現(xiàn)：

方法1：使用CSS樣式調(diào)整

.cart-contents .count {
background-color: #ff0000;
color: #ffffff;
border-radius: 50%;
padding: 2px 6px;
font-size: 12px;
position: relative;
top: -10px;
left: -5px;
}

方法2：使用PHP代碼片段

在主題的functions.php文件中添加以下代碼：

add_filter('woocommerce_add_to_cart_fragments', 'wc_refresh_cart_count');
function wc_refresh_cart_count($fragments){
ob_start();
?>
<span class="cart-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
<?php
$fragments['.cart-count'] = ob_get_clean();
return $fragments;
}