Flash Sale Countdown & Sản phẩm đã bán Trên Website WooCommerce

10/01/2025

7 Phút đọc

80 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Bạn có phải là một tín đồ của flash sale? Hay bạn muốn tăng cường tỷ lệ chuyển đổi cho sản phẩm giảm giá trên WooCommerce? Hãy để muathemewpgiare.com giúp bạn chinh phục thị trường trực tuyến với một tính năng vô cùng tiện ích: Flash Sale Countdown!

Flash Sale Countdown & Sản phẩm đã bán Trên Website WooCommerce

Flash Sale Countdown Là Gì?

FlashSale Countdown là một tính năng mạnh mẽ giúp hiển thị bộ đếm ngược thời gian khuyến mãi cho từng sản phẩm, tạo cảm giác cấp bách và thôi thúc khách hàng đưa ra quyết định mua sắm nhanh hơn. Việc áp dụng chiến lược này không chỉ giúp tăng tỷ lệ chuyển đổi mà còn mang lại hiệu ứng tâm lý “sợ bỏ lỡ” (FOMO), khiến khách hàng khó lòng rời đi mà không đặt hàng.

FlashSale Countdown không chỉ đơn thuần là một bộ đếm ngược, mà còn là công cụ kích thích mua sắm cực kỳ hiệu quả. Khi thời gian khuyến mãi dần cạn kiệt, khách hàng sẽ cảm nhận rõ ràng sự cấp bách, thúc đẩy tâm lý "mua ngay kẻo lỡ" (FOMO). Điều này không chỉ gia tăng tỷ lệ chuyển đổi mà còn tạo ra cảm giác khan hiếm, khiến sản phẩm trở nên hấp dẫn hơn bao giờ hết.

Nhằm hỗ trợ tối đa cho anh em sử dụng theme Flatsome, mình chia sẻ đoạn code tích hợp FlashSale Countdown giúp bạn dễ dàng triển khai mà không cần dùng plugin. Đặc biệt, mình sẽ sớm cập nhật thêm phiên bản tối ưu hóa cho nhiều theme WordPress khác, giúp bạn áp dụng trên mọi giao diện một cách linh hoạt và hiệu quả nhất!

Những Lợi Ích Của Flash Sale Countdown

Khi chạy một chương trình giảm giá, điều quan trọng là làm sao để khách hàng nhận thức được thời gian còn lại. Bằng cách tích hợp một đồng hồ đếm ngược flash sale với thông tin sản phẩm đã bán, bạn sẽ tạo được cảm giác khẩn cấp và thúc đẩy người mua hành động ngay lập tức. Không chỉ vậy, việc kết hợp với muathemewpgiare.com sẽ giúp bạn dễ dàng tùy chỉnh mã giảm giá và tối ưu hóa trang sản phẩm.

Hướng Dẫn Cài Đặt Flash Sale Countdown Với WooCommerce

Chúng ta không cần phải là một lập trình viên chuyên nghiệp để sử dụng tính năng này. Bằng cách thêm một số đoạn mã vào function.php của child theme, bạn sẽ dễ dàng kích hoạt tính năng flash sale countdown và sản phẩm đã bán trên website của mình. Để bạn dễ dàng theo dõi, muathemewpgiare.com đã chuẩn bị hướng dẫn chi tiết:

function muathemewpgiare_custom_flashsale_timer() {
    $product_id = get_the_ID(); // Lấy ID của sản phẩm hiện tại
    $sale_end_time = get_post_meta($product_id, '_sale_price_dates_to', true) ? date_i18n('Y-m-d', get_post_meta($product_id, '_sale_price_dates_to', true)) : '';
    $sale_start_time = get_post_meta($product_id, '_sale_price_dates_from', true) ? date_i18n('Y-m-d', get_post_meta($product_id, '_sale_price_dates_from', true)) : '';

    $sale_start_timestamp = strtotime($sale_start_time);
    $sale_end_timestamp = strtotime($sale_end_time);

    if (!empty($sale_end_time) && $sale_end_timestamp > $sale_start_timestamp && $sale_end_timestamp >= strtotime(date("Y/m/d"))) {
    ?>
        <div class="muathemewpgiare-sale-info">
            <div class="muathemewpgiare-sale-timer">
                <time class="muathemewpgiare-sale-countdown">Chương trình giảm giá kết thúc trong: <span data-end-time="<?php echo $sale_end_time; ?>" id="muathemewpgiare-flash-timer"></span></time>
                <?php
                global $product;
                $current_stock = $product->get_stock_quantity();
                $units_sold = get_post_meta($product->get_id(), 'total_sales', true);
                if (!empty($current_stock) && $units_sold > 0) {
                    $sold_percentage = round(($units_sold * 100 / ($current_stock + $units_sold)), 0);
                ?>
                    <div class="muathemewpgiare-progress-bar">
                        <div class="muathemewpgiare-progress-inner">
                            <div class="muathemewpgiare-progress-bar-fill" style="width:<?php echo $sold_percentage . '%'; ?>"></div>
                        </div>
                        <span class="muathemewpgiare-sold-info"><?php echo sprintf(__('Đã bán %s sản phẩm', 'woocommerce'), $units_sold); ?></span>
                    </div>
                <?php
                }
                ?>
            </div>
        </div>
    <?php
    }
}

add_action('woocommerce_before_add_to_cart_button', 'muathemewpgiare_custom_flashsale_timer');

function muathemewpgiare_custom_flashsale_timer() {

$product_id = get_the_ID(); // Lấy ID của sản phẩm hiện tại

$sale_end_time = get_post_meta($product_id, '_sale_price_dates_to', true) ? date_i18n('Y-m-d', get_post_meta($product_id, '_sale_price_dates_to', true)) : '';

$sale_start_time = get_post_meta($product_id, '_sale_price_dates_from', true) ? date_i18n('Y-m-d', get_post_meta($product_id, '_sale_price_dates_from', true)) : '';

$sale_start_timestamp = strtotime($sale_start_time);

$sale_end_timestamp = strtotime($sale_end_time);

if (!empty($sale_end_time) && $sale_end_timestamp > $sale_start_timestamp && $sale_end_timestamp >= strtotime(date("Y/m/d"))) {

<time class="muathemewpgiare-sale-countdown">Chương trình giảm giá kết thúc trong: <span data-end-time="<?php echo $sale_end_time; ?>" id="muathemewpgiare-flash-timer"></span></time>

<?php

global $product;

$current_stock = $product->get_stock_quantity();

$units_sold = get_post_meta($product->get_id(), 'total_sales', true);

if (!empty($current_stock) && $units_sold > 0) {

$sold_percentage = round(($units_sold * 100 / ($current_stock + $units_sold)), 0);

</div>

</div>

<?php

}

</div>

<?php

}

add_action('woocommerce_before_add_to_cart_button', 'muathemewpgiare_custom_flashsale_timer');

Thêm JavaScript Cho Flash Sale Countdown

Sau khi thêm mã PHP vào function.php, bước tiếp theo là tạo hiệu ứng đếm ngược thời gian. Đoạn mã JavaScript dưới đây sẽ giúp hiển thị thời gian còn lại cho chương trình flash sale một cách hấp dẫn và dễ nhìn. Bạn có thể thêm mã này vào phần footer của website hoặc thông qua hook vào chân trang.

jQuery(function($) {
    function updateSaleCountdown() {
        var countdownEnd = $("#muathemewpgiare-flash-timer").attr('data-end-time');
        var futureTime = Date.parse(countdownEnd);
        var currentTime = new Date();
        var timeDifference = futureTime - currentTime;

        var days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        var hours = Math.floor(timeDifference / (1000 * 60 * 60));
        var minutes = Math.floor(timeDifference / (1000 * 60));
        var seconds = Math.floor(timeDifference / 1000);

        days = days;
        hours = hours - days * 24;
        minutes = minutes - hours * 60;
        seconds = seconds - minutes * 60;

        $('#muathemewpgiare-flash-timer').html(days + ' ngày ' + hours + ' giờ ' + minutes + ' phút ' + seconds + ' giây');
    }
    setInterval(function() {
        updateSaleCountdown();
    }, 1000);
});

jQuery(function($) {

function updateSaleCountdown() {

var countdownEnd = $("#muathemewpgiare-flash-timer").attr('data-end-time');

var futureTime = Date.parse(countdownEnd);

var currentTime = new Date();

var timeDifference = futureTime - currentTime;

var days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));

var hours = Math.floor(timeDifference / (1000 * 60 * 60));

var minutes = Math.floor(timeDifference / (1000 * 60));

var seconds = Math.floor(timeDifference / 1000);

days = days;

hours = hours - days * 24;

minutes = minutes - hours * 60;

seconds = seconds - minutes * 60;

$('#muathemewpgiare-flash-timer').html(days + ' ngày ' + hours + ' giờ ' + minutes + ' phút ' + seconds + ' giây');

}

setInterval(function() {

updateSaleCountdown();

}, 1000);

});

Cải Thiện Giao Diện Với CSS

Khi đã cài đặt tính năng flash sale countdown, đừng quên làm đẹp cho trang của bạn với CSS. Đoạn mã CSS dưới đây sẽ giúp bạn tùy chỉnh giao diện sao cho phù hợp với cả PC và mobile.

.muathemewpgiare-sale-info {
    margin: 20px auto;
    padding: 15px;
    background-color: #ff4500;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.muathemewpgiare-sale-timer {
    font-size: 18px;
    color: #fff;
}

#muathemewpgiare-flash-timer {
    color: #ffd700;
    font-weight: bold;
}

.muathemewpgiare-progress-bar {
    width: 100px;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
}

.muathemewpgiare-progress-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.muathemewpgiare-progress-bar-fill {
    background: linear-gradient(90deg, #ff6347, #ff4500);
    border-radius: 4px;
    height: 100%;
}

.muathemewpgiare-sold-info {
    font-size: 14px;
    color: #fff;
    margin-left: 10px;
}

@media screen and (max-width: 768px) {
    .muathemewpgiare-sale-info {
        flex-direction: column;
        text-align: center;
    }

    .muathemewpgiare-sale-timer {
        font-size: 16px;
    }

    .muathemewpgiare-progress-bar {
        width: 80px;
    }
}

.muathemewpgiare-sale-info {

margin: 20px auto;

padding: 15px;

background-color: #ff4500;

border-radius: 8px;

display: flex;

justify-content: space-between;

align-items: center;

}

.muathemewpgiare-sale-timer {

font-size: 18px;

color: #fff;

}

#muathemewpgiare-flash-timer {

color: #ffd700;

font-weight: bold;

}

.muathemewpgiare-progress-bar {

width: 100px;

height: 8px;

background: #f0f0f0;

border-radius: 4px;

}

.muathemewpgiare-progress-inner {

display: flex;

align-items: center;

justify-content: center;

}

.muathemewpgiare-progress-bar-fill {

background: linear-gradient(90deg, #ff6347, #ff4500);

border-radius: 4px;

height: 100%;

}

.muathemewpgiare-sold-info {

font-size: 14px;

color: #fff;

margin-left: 10px;

}

@media screen and (max-width: 768px) {

.muathemewpgiare-sale-info {

flex-direction: column;

text-align: center;

}

.muathemewpgiare-sale-timer {

font-size: 16px;

}

.muathemewpgiare-progress-bar {

width: 80px;

}

Tối Ưu SEO Cho Flash Sale

Để tăng lượng truy cập và tỷ lệ chuyển đổi, đừng quên tối ưu hóa các yếu tố SEO cho website của bạn. Sử dụng các từ khóa như flash sale countdown, tăng chuyển đổi WooCommerce, giảm giá online, và muathemewpgiare trong nội dung, thẻ tiêu đề, và mô tả sản phẩm để Google dễ dàng nhận diện và xếp hạng website của bạn.

Lợi Ích Từ muathemewpgiare.com

Khi sử dụng muathemewpgiare.com, bạn không chỉ được hưởng lợi từ tính năng flash sale countdown, mà còn có thể tận dụng những template WooCommerce đẹp mắt giúp bạn xây dựng website bán hàng chuyên nghiệp và hiện đại. Nếu bạn đang tìm kiếm một giải pháp dễ dàng để tối ưu hóa website, đừng quên ghé thăm muathemewpgiare.com.

Hy vọng phiên bản này sẽ mang lại hiệu quả SEO tốt hơn và giúp bạn tối ưu hóa việc áp dụng flash sale countdown trên trang WooCommerce của mình!

Xem thêm: