Trong thương mại điện tử, việc tạo ra sự “khẩn cấp” và “khan hiếm” là một chiến lược marketing cực kỳ hiệu quả. Một đồng hồ đếm ngược (countdown timer) cho các chương trình khuyến mãi, đặc biệt là Flash Sale, sẽ thôi thúc khách hàng ra quyết định mua nhanh hơn, từ đó tăng tỷ lệ chuyển đổi đáng kể.
Hướng Dẫn Tạo Đồng Hồ Đếm Ngược Flash Sale Cho Theme Flatsome
Theme Flatsome rất mạnh mẽ, nhưng không có sẵn chức năng này. Bài viết này sẽ hướng dẫn bạn từng bước để tự tạo một đồng hồ đếm ngược Flash Sale chuyên nghiệp bằng cách kết hợp PHP, JavaScript và CSS.
Tổng Quan Các Bước Thực Hiện
- Tạo Shortcode: Thêm mã PHP vào tệp
functions.phpđể tạo một shortcode[flash_sale_countdown]. - Thêm JavaScript: Viết mã JavaScript để xử lý logic đếm ngược thời gian.
- Thêm CSS: Tùy chỉnh giao diện cho đồng hồ đếm ngược để trông đẹp mắt và chuyên nghiệp.
- Sử dụng Shortcode: Chèn shortcode vào bất cứ đâu bạn muốn trên website.
⚠️ Lưu ý quan trọng: Luôn sử dụng Theme con (Child Theme) khi thêm code vào functions.php để tránh mất các thay đổi khi cập nhật theme Flatsome.
Bước 1: Thêm Code PHP để tạo Shortcode
Đầu tiên, hãy truy cập vào tệp functions.php của child theme và dán đoạn mã sau vào cuối tệp:
function flashsale_countdown()
{
$thepostid = get_the_ID();
$sale_price_dates_to = ($date = get_post_meta($thepostid, ‘_sale_price_dates_to’, true)) ? date_i18n(‘Y-m-d’, $date) : ”;
$today = strtotime(date(“Y/m/d”));
$strsale_price_dates_to = strtotime($sale_price_dates_to);
if (!empty($sale_price_dates_to)) {?>
<?php
if (!empty($sale_price_dates_to)) {if ($strsale_price_dates_to >= $today) {
ob_start();
$date = DateTime::createFromFormat(“Y-m-d”, $sale_price_dates_to);
$year_sale = $date->format(‘Y’);
$month_sale = $date->format(‘m’);
if ($date->format(‘d’) < 31) {$day_sale = $date->format(‘d’) + 1;
} else {
$day_sale = $date->format(‘d’);
}
?>
<div class=”isures-flashsale”>
<span class=”title”><svg height=”21″ width=”108″ class=”flash-sale-logo flash-sale-logo–white”><g fill=”currentColor” fill-rule=”evenodd”><path d=”M0 16.195h3.402v-5.233h4.237V8H3.402V5.037h5.112V2.075H0zm29.784 0l-.855-2.962h-4.335l-.836 2.962H20.26l4.723-14.12h3.576l4.724 14.12zM26.791 5.294h-.04s-.31 1.54-.563 2.43l-.797 2.744h2.74l-.777-2.745c-.252-.889-.563-2.43-.563-2.43zm7.017 9.124s1.807 2.014 5.073 2.014c3.13 0 4.898-2.034 4.898-4.384 0-4.463-6.259-4.147-6.259-5.925 0-.79.778-1.106 1.477-1.106 1.672 0 3.071 1.245 3.071 1.245l1.439-2.824s-1.477-1.6-4.47-1.6c-2.76 0-4.918 1.718-4.918 4.325 0 4.345 6.258 4.285 6.258 5.964 0 .85-.758 1.126-1.457 1.126-1.75 0-3.324-1.462-3.324-1.462zm12.303 1.777h3.402v-5.53h5.054v5.53h3.401V2.075h-3.401v5.648h-5.054V2.075h-3.402zm18.64-1.678s1.692 1.915 4.763 1.915c2.877 0 4.548-1.876 4.548-4.107 0-4.483-6.492-3.871-6.492-6.36 0-.987.914-1.678 2.08-1.678 1.73 0 3.052 1.224 3.052 1.224l1.088-2.073s-1.4-1.501-4.12-1.501c-2.644 0-4.627 1.738-4.627 4.068 0 4.305 6.512 3.87 6.512 6.379 0 1.145-.952 1.698-2.002 1.698-1.944 0-3.44-1.48-3.44-1.48zm19.846 1.678l-1.166-3.594h-4.84l-1.166 3.594H74.84L79.7 2.174h2.623l4.86 14.021zM81.04 4.603h-.039s-.31 1.382-.583 2.172l-1.224 3.752h3.615l-1.224-3.752c-.253-.79-.545-2.172-.545-2.172zm7.911 11.592h8.475v-2.192H91.46V2.173H88.95zm10.477 0H108v-2.192h-6.064v-3.772h4.645V8.04h-4.645V4.366h5.753V2.174h-8.26zM14.255.808l6.142.163-3.391 5.698 3.87 1.086-8.028 12.437.642-8.42-3.613-1.025z”></path></g></svg></span>
<?php echo do_shortcode(‘‘); ?>
</div>
<?php
$flashsale = ob_get_contents();
ob_end_clean();
return $flashsale;
}
}
}
}
add_action(‘flatsome_custom_single_product_1’, ‘flashsale_countdown’);
add_action( ‘woocommerce_single_product_summary’, ‘flashsale_countdown’, 5 );
và chèn css vào cho đẹp nhé
.single-product .isures-flashsale{
background-image: url(https://cdn.bnix.io.vn/bnixdoc/wp-content/uploads/2021/10/bg-flashsale.jpg);
}
.single-product .isures-flashsale{
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
padding: 10px;
border-radius: 4px;
}
.single-product .isures-flashsale span.title {
margin-top: 10px;
margin-right: 25px;
}.single-product .isures-flashsale .ux-timer {
margin: 0;}
.single-product .isures-flashsale .ux-timer span {
font-size: 20px;
}
.single-product .isures-flashsale .ux-timer span strong{
font-size: 10px;
text-transform: none
}.single-product .isures–flashsale .ux-timer span {
color: var(–isures-secondary-color)!important;
}
.single-product .isures–flashsale .ux-timer span strong{color: #222}
Cách sử dụng:
- Đối với các bạn dùng Custom Product page, thì chọn element đấy vào vị trí muốn hiển thị countdown. (Nhớ chọn Hook này : flatsome_custom_single_product_1)
- Đối với các bạn dùng mặc định, thì tư nó sẽ hiện, không cần làm gì thêm
Chúc bạn thành công nhé
