Hiển thị số lượng sản phẩm đã bán Website cực đẹp, giống Shopee

Như quý vị đã biết, trên các sàn thương mại điện tử lớn như Shopee, Tiki, Lazada,… việc hiển thị số lượng người đã mua của một sản phẩm cụ thể thường tạo thêm niềm tin cho người mua. Điều này cho thấy sự phổ biến và được ưa chuộng của sản phẩm, từ đó khích lệ quyết định mua hàng.

1. Tại sao cần hiển thị số lượng sản phẩm đã bán

Hiển thị số lượng sản phẩm đã bán trên trang web không chỉ là một chiến lược marketing thông minh mà còn là cách để tăng cường sự tin tưởng và thuyết phục khách hàng tiềm năng.

Tăng Credibility (Độ Tin Cậy): Khi khách hàng thấy rằng một sản phẩm đã được mua nhiều lần, điều này tự nhiên tạo ra một cảm giác độ tin cậy và an tâm. Họ cảm thấy rằng sản phẩm website đó đã được nhiều người kiểm chứng và đáng để họ mua hàng.
Hiệu Ứng Đám Đông (Social Proof): Theo lý thuyết về hiệu ứng đám đông, con người có xu hướng làm theo đám đông. Khi thấy số lượng lớn người mua sản phẩm, khách hàng mới cảm thấy rằng họ cũng nên mua sản phẩm đó.
Tạo Động Lực Mua Hàng: Việc biết một sản phẩm được bán ra nhiều có thể thúc đẩy quyết định mua hàng nhanh chóng, nhất là trong các sự kiện giảm giá, khuyến mãi khi khách hàng không muốn bỏ lỡ cơ hội.
Tăng Tính Cạnh Tranh: Hiển thị số lượng sản phẩm đã bán cũng là một cách để cửa hàng của bạn nổi bật so với đối thủ cạnh tranh. Nó chứng minh rằng sản phẩm của bạn được ưa chuộng và có vị thế nhất định trên thị trường.
Phản Ánh Tình Trạng Kho Hàng: Việc này cũng giúp khách hàng nhận biết được sản phẩm còn hàng hay không, từ đó có kế hoạch mua sắm phù hợp.

2. Cách hiển thị số lượng sản phẩm đã bán trong Woocommerce

Demo hiển thị sản phẩm đã bán khi cài đặt thành công

2.1 Cài đặt trong trang quản trị website

Bước 1: Các bạn đăng nhập vào trang quản trị của website.
Bước 2: Vào mục Giao diện → Sửa giao diện → function.php.
Bước 3: Các bạn thêm đoạn code vào function.php. (mình để code bên dưới nhé)
Bước 4: Theme css mình để phí dưới vào trong website.

2.2 Cài đặt trong trang quản trị Hosting Cpanel website

Đăng nhập cPanel
Mở File Manager: Trong cPanel, tìm và mở “File Manager”.
Trong File Manager, đi đến public_html > wp-content > themes và chọn thư mục của theme bạn muốn chỉnh sửa.
Tìm file functions.php trong thư mục theme, click chuột phải và chọn “Edit”. Tiến hành chèn Code mình để bên dưới vào.
Sau khi chỉnh sửa, nhấn “Save Changes” để cập nhật file.
Cuối cùng theme css mình để phí dưới vào trong website cho đẹp hơn nhé.

3. Code hiển thị số lượng sản phẩm đã bán trong Woocommerce

3.1 Hiển thị ở trang sản phẩm

add_action( 'woocommerce_single_product_summary', 'wc_product_sold_count', 11 );
function wc_product_sold_count() {
global $product;
$units_sold = get_post_meta( $product->get_id(), 'total_sales', true );
echo '<p class="da-ban">' . sprintf( __( 'Đã bán: %s', 'woocommerce' ), $units_sold ) . '</p>';
}

3.2 Hiển thị ở trang chủ

add_action( 'woocommerce_after_shop_loop_item_title', 'wc_product_sold_count' );
function wc_product_sold_count() {
global $product;
$units_sold = get_post_meta( $product->get_id(), 'total_sales', true );
echo '<p class="da-ban">' . sprintf( __( 'Đã bán: %s', 'woocommerce' ), $units_sold ) . '</p>';
}

3.3 Còn nếu muốn hiện thị 2 vị trí cùng 1 lúc thì dùng code này

add_action( 'woocommerce_after_shop_loop_item_title', 'wc_product_sold_count' );
add_action( 'woocommerce_single_product_summary', 'wc_product_sold_count', 11 );
function wc_product_sold_count() {
global $product;
$units_sold = get_post_meta( $product->get_id(), 'total_sales', true );
echo '<p class="da-ban">' . sprintf( __( 'Đã bán: %s', 'woocommerce' ), $units_sold ) . '</p>';
}

4. Css hiển thị số lượng sản phẩm đã bán

Với theme Flatsome: Vào tùy biến => Css bổ xung và chèn đoạn css này vào là thành công rồi nhé các bạn.

Với các theme khác: vào phần css các bạn chèn vào đoạn code CSS vào file style.css của theme mà bạn đang sử dụng

p.da-ban {
border-radius: 20px;
margin-bottom: 0;
text-align: center;
margin-top: 5px;
background-color: rgba(210,33,33,.4);
background-image: none;
margin-left: 10px;
margin-right: 10px;
position: relative;
height: 25px;
margin-bottom: 10px;
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}

Tổng kết:

Tóm lại, việc hiển thị số lượng sản phẩm đã bán trên website sử dụng Woocommerce là một phần quan trọng giúp tăng cường độ tin cậy và thúc đẩy quyết định mua hàng của khách hàng. Chúc các bạn thành công nhé!

Đừng quên chúng tôi đang cung cấp các:

Mua ùng hộ mình nhé!

Xem thêm: