FlashSale Countdown là tính năng khá hay. Thời gian đếm ngược sản phẩm khuyến mãi, điều này cũng phần nào kích thích khách hàng mua sản phẩm của bạn.

Vì thế mình share code này trên theme Flatsome, thời gian tới sẽ update code sử dụng trên các theme khác.

Oke đi thẳng vào vấn đề. Flatsome có Custom Hook, khi sử dụng Custom Layout. 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) .

Sau đấy chèn code bên dưới vào function.php của theme.

add_action('flatsome_custom_single_product_1', 'isures_2718_flashsale_countdown');
function isures_2718_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) {
                $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');
                }
                echo '<div class="isures-flashsale">';
                echo '<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>';
                echo do_shortcode('[ux_countdown year="' . $year_sale . '" month="' . $month_sale . '" day="' . $day_sale . '" time="00:00" t_week="Tuần" t_day="Ngày" t_hour="Giờ" t_min="Phút" t_sec="Giây" t_week_p="Tuần" t_day_p="Ngày" t_hour_p="Giờ" t_min_p="Phút" t_sec_p="Giây"]');
                echo '</div>';
            }
        } ?>
 
<?php
    }
}

add_action('flatsome_custom_single_product_1', 'isures_2718_flashsale_countdown');

function isures_2718_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) {

$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');

}

echo '<div class="isures-flashsale">';

echo '<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>';

echo do_shortcode('[ux_countdown year="' . $year_sale . '" month="' . $month_sale . '" day="' . $day_sale . '" time="00:00" t_week="Tuần" t_day="Ngày" t_hour="Giờ" t_min="Phút" t_sec="Giây" t_week_p="Tuần" t_day_p="Ngày" t_hour_p="Giờ" t_min_p="Phút" t_sec_p="Giây"]');

echo '</div>';

}

} ?>

<?php

}

Trường hợp không dùng Custom layout hãy tham khảo các Hook tại trang single product, và thay thế Hook flatsome_custom_single_product_1 ở code trên.

Code trên mình tận dụng Shortcode ux_countdown của Flatsome cho tiện. Bây giờ làm đẹp code trên với Css.

.single-product .isures-flashsale{
    background-image: url(https://allin.isures.com/wp-content/themes/supper-market/images/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}

.single-product .isures-flashsale{

background-image: url(https://allin.isures.com/wp-content/themes/supper-market/images/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}

Tải ảnh tại https://allin.isures.com/wp-content/themes/supper-market/images/bg-flashsale.jpg và up lên web của bạn nhé! Tránh trường hợp sau mất cái background.

Để code trên chạy thì bạn cần giá khuyến mãi sản phẩm, kèm theo ngày hết hạn khuyến mãi nhé.

Thành quả sẽ được như này

Flash sale countdown – tính năng đếm ngược thời gian khuyến mãi sản phẩm

Nếu anh em thấy hay hoặc gặp vấn đề gì khi add code vào theme hãy join group này để ae có thể hỗ trợ bạn.

Nguồn : https://thietkewebgiarehcm.com/code-flashsale-countdown-theme-flatsome

Flatsome

Code FlashSale Countdown theme Flatsome

Trả lời Hủy

Trả lời Hủy

Đăng ký nhận báo giá & khuyến mãi

Đăng nhập