Code thêm đếm ngược khuyến mãi cho sản phẩm trong WooCommerce

Bài viết này mình sẽ hướng dẫn bạn cách thêm đếm ngược khuyến mãi cho sản phẩm trong WooCommerce nhé.

WooCommerce cho bạn đặt lịch giá khuyến mãi với ngày bắt đầu và ngày kết thúc, nhưng ngoài trang sản phẩm mặc định không hiển thị đồng hồ đếm ngược — khách nhìn vào chỉ thấy giá giảm mà không cảm nhận được là sắp hết khuyến mãi. WooCommerce mặc định không có tính năng này, muốn có thì bạn phải code thêm nhé.

Thêm code đếm ngược khuyến mãi

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme 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.

function nn_woocommerce_sale_countdown() {
    global $product;
    if (!is_product() || !$product || !$product->is_on_sale()) {
        return;
    }
    $hetHan = (int) get_post_meta($product->get_id(), '_sale_price_dates_to', true);
    if (!$hetHan || $hetHan <= time()) {
        return;
    }
    echo '<div class="nn-sale-countdown" data-het-han="' . esc_attr($hetHan) . '">';
    echo '<span class="nn-sale-countdown-label">Khuyến mãi kết thúc sau:</span> ';
    echo '<span class="nn-sale-countdown-time">Đang tải...</span>';
    echo '</div>';
    echo '<script>
    document.addEventListener("DOMContentLoaded", function () {
        var khoi = document.querySelector(".nn-sale-countdown");
        if (!khoi) { return; }
        var hetHan = parseInt(khoi.getAttribute("data-het-han"), 10) * 1000;
        var oHienThi = khoi.querySelector(".nn-sale-countdown-time");
        function capNhat() {
            var conLai = hetHan - Date.now();
            if (conLai <= 0) {
                oHienThi.textContent = "Đã hết khuyến mãi.";
                clearInterval(boDem);
                return;
            }
            var ngay = Math.floor(conLai / 86400000);
            var gio = Math.floor(conLai % 86400000 / 3600000);
            var phut = Math.floor(conLai % 3600000 / 60000);
            var giay = Math.floor(conLai % 60000 / 1000);
            oHienThi.textContent = ngay + " ngày " + gio + " giờ " + phut + " phút " + giay + " giây";
        }
        capNhat();
        var boDem = setInterval(capNhat, 1000);
    });
    </script>';
}
add_action('woocommerce_single_product_summary', 'nn_woocommerce_sale_countdown', 15);

Code trên móc vào hook woocommerce_single_product_summary với độ ưu tiên 15, tức là ngay sau phần giá, nên đồng hồ sẽ hiện ngay dưới giá sản phẩm. Nó đọc ngày kết thúc khuyến mãi mà WooCommerce lưu trong meta _sale_price_dates_to, đưa xuống trình duyệt dưới dạng timestamp rồi đoạn JS đếm ngược từng giây theo dạng “x ngày x giờ x phút x giây”. Sản phẩm không có khuyến mãi, hoặc có khuyến mãi mà không đặt ngày kết thúc, thì code tự không hiện gì.

Đặt lịch khuyến mãi cho sản phẩm

Bạn mở sản phẩm cần khuyến mãi, nhập Giá khuyến mãi rồi bấm Lên lịch ngay bên cạnh để chọn ngày bắt đầu và ngày kết thúc. Chỉ cần đặt ngày kết thúc là đồng hồ tự chạy, không cần nhập thêm gì khác. Muốn đổi màu hộp đếm ngược thì sửa trong đoạn CSS dưới rồi dán vào Tùy biến → CSS bổ sung nhé.

.nn-sale-countdown { margin: 10px 0; padding: 12px 16px; background: #fff4e0; border: 1px solid #f5c97b; border-radius: 8px; }
.nn-sale-countdown-label { font-weight: 600; }
.nn-sale-countdown-time { font-weight: 700; color: #c0392b; }

Lưu ý khi dùng

Đồng hồ đếm theo giờ trên trình duyệt của khách, nếu đồng hồ máy khách lệch vài phút thì số giây hiển thị cũng lệch chừng đó, không đáng kể. Khi hết giờ, chính WooCommerce sẽ tự ngừng áp giá khuyến mãi, còn đồng hồ trên trang đã mở sẵn sẽ chuyển thành dòng “Đã hết khuyến mãi.” khi khách tải lại trang hoặc khi bộ đếm chạy tới 0.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm được đếm ngược khuyến mãi cho sản phẩm trong WooCommerce rồi nhé. Tính năng này đi chung với bài code tự động áp dụng mã giảm giá trong WooCommerce là thành combo tạo cảm giác gấp gáp khá tốt cho trang sản phẩm.

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