Code hiển thị số lượng đã bán trên trang sản phẩm trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách hiển thị số lượng đã bán trên trang sản phẩm trong Flatsome nhé.

Ai bán hàng trên Shopee, Lazada thì quen với dòng “Đã bán 1,2k” nằm ngay dưới tên sản phẩm — nó tạo niềm tin và cảm giác sản phẩm đang bán chạy. Nhưng WooCommerce và Flatsome mặc định không hiển thị thông tin này ra trang sản phẩm, dù hệ thống vẫn âm thầm lưu tổng số lượng đã bán của từng sản phẩm. Muốn show ra thì bạn phải code thêm nhé.

Thêm code hiển thị số lượng đã bán

Đầu tiên bạn chỉ cần thêm code dưới vào file functions.php của child theme (Flatsome có sẵn child theme đi kèm, bạn kích hoạt child theme rồi chèn vào đó nhé). Nhớ sao lưu file trước khi sửa.

// Hiển thị số lượng đã bán trên trang sản phẩm - Ngoc Nguyen
add_action('woocommerce_single_product_summary', 'nn_show_sold_count', 15);
function nn_show_sold_count() {
    global $product;
    $sold = (int) $product->get_total_sales();
    if ($sold <= 0) return;
    echo '<p class="nn-sold-count">Đã bán: <strong>' . number_format_i18n($sold) . '</strong></p>';
}

Đoạn code này dùng hook woocommerce_single_product_summary với độ ưu tiên 15 để chèn dòng “Đã bán” vào ngay dưới giá sản phẩm. Số liệu lấy từ total sales mà WooCommerce tự cộng dồn mỗi khi có đơn hàng hoàn tất, nên bạn không phải nhập tay và số luôn tự cập nhật. Sản phẩm nào chưa bán được cái nào (số bằng 0) thì dòng này tự ẩn đi, tránh cảm giác “chưa ai mua” cho sản phẩm mới.

Muốn dòng chữ có màu nổi bật như các sàn thì bạn dán thêm đoạn CSS dưới vào Tùy biến → CSS bổ sung:

.nn-sold-count {
    color: #ee4d2d;
    font-size: 15px;
    margin-top: 4px;
}

Xong xuôi bạn mở thử 1 trang sản phẩm đã có đơn hàng, kết quả sẽ như hình bên dưới: dòng Đã bán màu cam hiện ngay dưới giá.

Lưu ý khi dùng

Số “đã bán” tính theo tổng số lượng sản phẩm trong các đơn đã ghi nhận, sản phẩm có biến thể thì WooCommerce cộng dồn cho sản phẩm cha nên con số hiển thị là tổng của mọi biến thể — như vậy là đúng ý nghĩa bán chạy. Nếu bạn muốn đổi vị trí dòng chữ, chỉ cần đổi số 15 trong hook: số nhỏ hơn thì lên cao hơn (5 là ngay dưới tên sản phẩm), số lớn hơn thì xuống thấp hơn. Các bài code kiểu chèn thêm thông tin vào trang bằng hook như này mình cũng dùng trong bài code thêm bài viết liên quan vào theme Flatsome, bạn muốn nghịch thêm thì xem luôn nhé.

Kết luận

Vậy là chỉ với vài dòng code bạn đã hiển thị được số lượng đã bán trên trang sản phẩm Flatsome rồi nhé. Thêm 1 bằng chứng xã hội nhỏ ngay cạnh giá là tỉ lệ khách bấm mua cải thiện thấy rõ, nhất là với các sản phẩm chủ lực đã bán được nhiều.

Nếu cần mình kèm 1-1 về Flatsome hoặc hỗ trợ custom tính năng cho website thì cứ liên hệ mình nhé.