Code FlashSale Countdown theme Flatsome

Hôm nay mình chia sẻ code flashsale kèm count down đếm ngược thời gian tới ngày hết hạn giảm giá

flash sale countdown theme flatsome

Để hiện flash sale này, yêu cầu 3 việc

  • Có giá khuyến mãi
  • Có set ngày giới hạn giá khuyến mãi trong sản phẩm
  • Dùng theme Flatsome

Code flashsale như sau:

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('[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"]'); ?>
                </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 );

Các bạn chèn đoạn code trên vào function.php, và đoạn css dưới đây vào style.css của theme đang dùng

.single-product .isures-flashsale{
    background-image: url(https://saigondata.sgp1.digitaloceanspaces.com/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

Các bạn có thắc mắc hoặc khó khăn hãy để lại comment bên dưới nhé!

5/5 - (1 bình chọn)
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
()
x
Scroll to Top