Code hiển thị số lượng còn lại trong kho 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 còn lại trong kho trên trang sản phẩm trong Flatsome nhé.

Khách đang phân vân có nên đặt hàng ngay không mà chỉ thấy dòng “Còn hàng” chung chung thì không có gì thúc họ chốt đơn, trong khi một dòng “Chỉ còn 3 sản phẩm” hiện ngay dưới giá lại tạo cảm giác khan hiếm rất rõ. Flatsome mặc định không hiện số lượng tồn kho cụ thể trên trang sản phẩm, muốn có dòng báo sắp hết hàng này thì bạn phải code thêm nhé.

Thêm code hiển thị số lượng còn lại trong kho

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme Flatsome nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code. Trước khi thêm code, bạn cần bật Quản lý tồn kho và nhập số lượng tồn cho sản phẩm trong tab Tồn kho của trang sửa sản phẩm, vì code chỉ đọc được số lượng khi sản phẩm có bật quản lý tồn kho.

<?php
// Hiện dòng "Chỉ còn X sản phẩm" ngay dưới giá khi sản phẩm sắp hết hàng
// Đổi 5 thành ngưỡng tồn kho của shop bạn (ví dụ chỉ báo khi còn từ 5 sản phẩm trở xuống)
add_action('wp_enqueue_scripts', 'nn_flatsome_con_lai_trong_kho_css');
function nn_flatsome_con_lai_trong_kho_css() {
    wp_register_style('nn-con-lai-trong-kho', false);
    wp_enqueue_style('nn-con-lai-trong-kho');
    wp_add_inline_style('nn-con-lai-trong-kho', '.nn-con-lai-trong-kho { display: inline-block; background: #fff3e0; color: #c25700; border: 1px solid #f0c48c; border-radius: 4px; font-size: 14px; font-weight: 700; padding: 4px 10px; margin: 8px 0; }');
}
add_action('woocommerce_single_product_summary', 'nn_flatsome_con_lai_trong_kho', 11);
function nn_flatsome_con_lai_trong_kho() {
    global $product;
    if (!$product || !$product->managing_stock()) {
        return;
    }
    $ton_kho = (int) $product->get_stock_quantity();
    if ($ton_kho <= 0 || $ton_kho > 5) {
        return;
    }
    echo '<div class="nn-con-lai-trong-kho">Chỉ còn ' . $ton_kho . ' sản phẩm trong kho — đặt hàng ngay kẻo hết!</div>';
}

Code trên có hai phần. Phần đầu móc vào wp_enqueue_scripts để nạp CSS cho dòng báo tồn kho: nền cam nhạt, chữ cam đậm in đậm, viền bo tròn để nhìn như một nhãn cảnh báo nhẹ ngay dưới giá. Phần sau móc vào hook woocommerce_single_product_summary với độ ưu tiên 11, tức chạy ngay sau phần giá, để in dòng “Chỉ còn X sản phẩm trong kho — đặt hàng ngay kẻo hết!”. Hàm kiểm tra managing_stock() rồi lấy số lượng bằng get_stock_quantity(), chỉ hiện khi tồn kho từ 1 đến 5, còn nhiều hơn 5 hoặc đã hết hàng thì không hiện gì để trang sản phẩm không bị rối.

Kiểm tra trên trang sản phẩm

Bạn lưu file rồi mở một sản phẩm đang bật quản lý tồn kho và còn từ 1 đến 5 sản phẩm, ngay dưới giá sẽ thấy nhãn cam “Chỉ còn X sản phẩm trong kho — đặt hàng ngay kẻo hết!”. Mở một sản phẩm còn nhiều hàng thì nhãn biến mất, và số lượng trong nhãn tự giảm theo mỗi đơn hàng mới vì nó đọc trực tiếp từ tồn kho của WooCommerce.

Lưu ý khi dùng

Ngưỡng 5 trong code là ngưỡng mình đặt ví dụ, bạn đổi con số 5 trong dòng if ($ton_kho <= 0 || $ton_kho > 5) thành ngưỡng của shop bạn là được. Code chỉ áp dụng cho sản phẩm quản lý tồn kho ở cấp sản phẩm, sản phẩm biến thể quản lý tồn kho theo từng biến thể thì hàm managing_stock() ở sản phẩm cha trả về false nên nhãn sẽ không hiện. Tính năng này đi chung với bài code hiển thị số lượng đã bán trên trang sản phẩm trong Flatsome là thành combo bằng chứng mua hàng ngay dưới giá khá tốt.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã hiển thị số lượng còn lại trong kho trên trang sản phẩm trong Flatsome rồi nhé. Tính năng này đi chung với bài code hiển thị số lượng đã bán trên trang sản phẩm trong Flatsome và bài code thêm tab Hướng dẫn sử dụng cho trang sản phẩm trong Flatsome là thành combo trang sản phẩm thuyết phục khách chốt đơn khá tốt.

Nếu cần mình kèm 1-1 về Flatsome thì cứ liên hệ mình nhé.