Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

Thấy anh em hay hỏi “Làm thế nào để hiển thị banner flash sale dạng đếm ngược và show sản phẩm đã bán trong Woocommerce” nên hôm nay mình hướng dẫn anh em cách làm nhé. Triển thôi!

Hình 1: Hiển thị sản phẩm đã bán và đếm ngược thời gian khuyến mãi

Tạo sản phẩm giảm giá kèm ngày hết hạn khuyến mãi trên Woocommerce

Cài đặt thời gian bắt đầu và kết thúc chương trình giảm giá cho sản phẩm woocommerce

Các bạn cứ đăng sản phẩm như bình thường, nhập giá gốc và giá khuyến mãi. Bên cạnh giá khuyến mãi sẽ có chữ lên lịch, click vào sẽ được như hình trên.

Việc còn lại là setup ngày bắt đầu và ngày kết thúc chương trình khuyến mãi. Như mọi người có thể biết thì sau khi kết thúc ngày khuyến mãi thì giá sẽ tự động về giá gốc.

Cài đặt kiểm kê kho hàng ( quản lý kho hàng )

Tick vào “Manage stock level (quantity)” và điền vào ô “Stock quantity” ( Số lượng sản phẩm còn trong kho )

Nếu làm đúng như 2 bước bên trên là code sẽ hoạt động đúng như trên hình 1.

Thêm code Flash Sale Countdown & Sản phẩm đã bán vào child theme

Mục đích của việc thêm vào Child theme là để khi bạn update theme lên phiên bản mới thì code này sẽ không bị mất.

Các bạn chỉ cần thêm đoạn code sau vào cuối file functions.php của child theme:

function isures_flashsale_countdown_and_stock_prod()
{
        $thepostid = get_the_ID();
    $sale_price_dates_to  = ($date_to = get_post_meta($thepostid, '_sale_price_dates_to', true)) ? date_i18n('Y-m-d', $date_to) : '';
    
    $sale_from =  ($date_from = get_post_meta($thepostid, '_sale_price_dates_from', true)) ? date_i18n('Y-m-d', $date_from) : '';
    $strtotime_date_from = strtotime($sale_from);
    $strtotime_date_to = strtotime($sale_price_dates_to);
if (!empty($sale_price_dates_to) && $strtotime_date_to > $strtotime_date_from && $strtotime_date_to >= strtotime(date("Y/m/d"))) {
    ?>
 
 
        <div class="crazy-deal-details pc">
            <div class="crazy-deal-details-right">
                <time class="crazy-deal-details-countdown">Kết thúc sau <span data-count="<?php echo $sale_price_dates_to; ?>" id="isures-sale-fl"></span></time>
                <?php
                global $product;
                $stock  = $product->get_stock_quantity();
                $buy = get_post_meta($product->get_id(), 'total_sales', true);
                if (!empty($stock) && $buy > 0) {
 
 
                    $round = round(($buy * 100 / ($stock + $buy)), 0);
                ?>
                    <div class="crazy-deal-details-process">
                        <div class="crazy-deal-details-procressbar">
                            <div class="crazy-deal-details-procressbar-inner" style="width:<?php echo  $round . '%'; ?>"></div>
                        </div>
                        <span class="crazy-deal-details-soldtext"><?php echo sprintf(__('Đã bán %s sp', 'woocommerce'), $buy); ?></span>
                    </div>
                <?php
                }
                ?>
 
 
 
 
            </div>
        </div>       
<?php
    }
}
 
 
add_action('woocommerce_before_add_to_cart_button', 'isures_flashsale_countdown_and_stock_prod');

function isures_flashsale_countdown_and_stock_prod()

{

$thepostid = get_the_ID();

$sale_price_dates_to = ($date_to = get_post_meta($thepostid, '_sale_price_dates_to', true)) ? date_i18n('Y-m-d', $date_to) : '';

$sale_from = ($date_from = get_post_meta($thepostid, '_sale_price_dates_from', true)) ? date_i18n('Y-m-d', $date_from) : '';

$strtotime_date_from = strtotime($sale_from);

$strtotime_date_to = strtotime($sale_price_dates_to);

if (!empty($sale_price_dates_to) && $strtotime_date_to > $strtotime_date_from && $strtotime_date_to >= strtotime(date("Y/m/d"))) {

<time class="crazy-deal-details-countdown">Kết thúc sau <span data-count="<?php echo $sale_price_dates_to; ?>" id="isures-sale-fl"></span></time>

<?php

global $product;

$stock = $product->get_stock_quantity();

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

if (!empty($stock) && $buy > 0) {

$round = round(($buy * 100 / ($stock + $buy)), 0);

</div>

</div>

<?php

}

</div>

<?php

}

add_action('woocommerce_before_add_to_cart_button', 'isures_flashsale_countdown_and_stock_prod');

Anh em phải nhớ lên lịch thời gian khuyến mãi cho sản phẩm thì code này mới hoạt động và hiển thị nhé.

Chúng ta sẽ hook vào vị trí trước nút Add to cart , nếu anh em không muốn hiển thị tại vị trí đó thì có thể tham khảo một số vị trí hook tại trang single product khác.

Nếu dùng Theme Flatsome có thể tận dụng Element Custom Hook trong UX Builder ( với điều kiện sử dụng Custom Layout ).

Bây giờ mình cần thêm 1 vài dòng jQuery để xử lý time countdown. Đoạn code js này thì bỏ vào footer.php hoặc cài Plugins Insert Headers and Footers + Custom Code Snippets của WPCode để thêm đoạn code js dưới đây vào Footer nhé:

jQuery(function($) {
    function updateTimer() {
        var isures_count = $("#isures-sale-fl").attr('data-count');
        future  = Date.parse(isures_count);
        now     = new Date();
        diff    = future - now;
 
 
        days  = Math.floor( diff / (1000*60*60*24) );
        hours = Math.floor( diff / (1000*60*60) );
        mins  = Math.floor( diff / (1000*60) );
        secs  = Math.floor( diff / 1000 );
 
 
        d = days;
        h = hours - days  * 24;
        m = mins  - hours * 60;
        s = secs  - mins  * 60;
        $('#isures-sale-fl').html(d + ':' + h + ':' + m + ':' + s);
    }
    setInterval(function() {
        updateTimer();
    }, 1000);
});

jQuery(function($) {

function updateTimer() {

var isures_count = $("#isures-sale-fl").attr('data-count');

future = Date.parse(isures_count);

now = new Date();

diff = future - now;

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

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

mins = Math.floor( diff / (1000*60) );

secs = Math.floor( diff / 1000 );

d = days;

h = hours - days * 24;

m = mins - hours * 60;

s = secs - mins * 60;

$('#isures-sale-fl').html(d + ':' + h + ':' + m + ':' + s);

}

setInterval(function() {

updateTimer();

}, 1000);

});

Tiếp theo, chúng ta sẽ thêm vài dòng CSS cho nó hiển thị đẹp và gọn gàng hơn. Thêm đoạn code dưới đây vào file style.css của child theme nhé:

.crazy-deal-details.pc {
    margin: 25px auto;
    height: 29px;
    overflow: hidden;
    background-image: url(https://huanvm.com/wp-content/uploads/2022/12/huanvmdotcom-flashsale-pc.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
 
 
}
 
 
.crazy-deal-details-right {
    position: relative;
    margin-left: 140px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}
 
 
time.crazy-deal-details-countdown {
    text-align: left;
    font-size: 14px;
}
 
 
span#isures-sale-fl {
    color: #ff3d00;
    font-size: 14px;
}
 
 
span.crazy-deal-details-soldtext {
    color: #999;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
}
 
 
.crazy-deal-details.pc .crazy-deal-details-process {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    color: #999;
    font-weight: 700;
}
 
 
.crazy-deal-details.pc .crazy-deal-details-procressbar {
    width: 90px;
    height: 8px;
    background: #ffd1c2;
    border-radius: 4px;
    display: inline-block;
    margin-right: 6px;
    margin-left: 6px;
}
 
 
.crazy-deal-details.pc .crazy-deal-details-procressbar-inner {
    background: linear-gradient(90deg, #ff8763, #ff330c);
    border-radius: 4px;
    width: 0;
    height: 100%;
}
 
 
@media screen and (max-width: 1024px) {
    .crazy-deal-details.pc {
        height: 50px;
        background-image: url(https://huanvm.com/wp-content/uploads/2022/12/huanvmdotcom-flashsale-mobile.png);
 
 
    }
 
 
    .crazy-deal-details-right {
        position: relative;
        display: flex;
        color: #fff;
        margin-right: 10px;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }
    .crazy-deal-details-procressbar{
        background: hsla(0,0%,100%,.5);
    }
    .crazy-deal-details.pc .crazy-deal-details-procressbar-inner{
        background: #fff;
    }
    .isures-sale-fl , span.crazy-deal-details-soldtext{
        color: #fff!important
    }
}

100

101

.crazy-deal-details.pc {

margin: 25px auto;

height: 29px;

overflow: hidden;

background-image: url(https://huanvm.com/wp-content/uploads/2022/12/huanvmdotcom-flashsale-pc.png);

background-position: 0 0;

background-repeat: no-repeat;

background-size: 100% 100%;

}

.crazy-deal-details-right {

position: relative;

margin-left: 140px;

height: 100%;

display: flex;

align-items: center;

flex-direction: row;

justify-content: space-between;

}

time.crazy-deal-details-countdown {

text-align: left;

font-size: 14px;

}

span#isures-sale-fl {

color: #ff3d00;

font-size: 14px;

}

span.crazy-deal-details-soldtext {

color: #999;

font-size: 14px;

font-weight: bold;

margin-right: 10px;

}

.crazy-deal-details.pc .crazy-deal-details-process {

display: flex;

flex-direction: row-reverse;

align-items: center;

color: #999;

font-weight: 700;

}

.crazy-deal-details.pc .crazy-deal-details-procressbar {

width: 90px;

height: 8px;

background: #ffd1c2;

border-radius: 4px;

display: inline-block;

margin-right: 6px;

margin-left: 6px;

}

.crazy-deal-details.pc .crazy-deal-details-procressbar-inner {

background: linear-gradient(90deg, #ff8763, #ff330c);

border-radius: 4px;

width: 0;

height: 100%;

}

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

.crazy-deal-details.pc {

height: 50px;

background-image: url(https://huanvm.com/wp-content/uploads/2022/12/huanvmdotcom-flashsale-mobile.png);

}

.crazy-deal-details-right {

position: relative;

display: flex;

color: #fff;

margin-right: 10px;

height: 100%;

flex-direction: column;

justify-content: center;

align-items: flex-end;

}

.crazy-deal-details-procressbar{

background: hsla(0,0%,100%,.5);

}

.crazy-deal-details.pc .crazy-deal-details-procressbar-inner{

background: #fff;

}

.isures-sale-fl , span.crazy-deal-details-soldtext{

color: #fff!important

}

Bây giờ ra trang sản phẩm mua thử 1 vài item và thưởng thức thành quả thôi!

Còn đây là full code của bài hướng dẫn này, các bạn copy và dán hết vào file functions.php của child theme là được ( dùng code này thì không dùng các đoạn code, js và css bên trên nhé ):

function isures_flashsale_countdown_and_stock_prod()
{
    $thepostid = get_the_ID();
    $sale_price_dates_to  = ($date_to = get_post_meta($thepostid, '_sale_price_dates_to', true)) ? date_i18n('Y-m-d', $date_to) : '';
 
 
    $sale_from =  ($date_from = get_post_meta($thepostid, '_sale_price_dates_from', true)) ? date_i18n('Y-m-d', $date_from) : '';
    $strtotime_date_from = strtotime($sale_from);
    $strtotime_date_to = strtotime($sale_price_dates_to);
    if (!empty($sale_price_dates_to) && $strtotime_date_to > $strtotime_date_from && $strtotime_date_to >= strtotime(date("Y/m/d"))) {
?>
 
 
        <div class="crazy-deal-details pc">
            <div class="crazy-deal-details-right">
                <time class="crazy-deal-details-countdown">Kết thúc sau <span data-count="<?php echo $sale_price_dates_to; ?>" id="isures-sale-fl"></span></time>
                <?php
                global $product;
                $stock  = $product->get_stock_quantity();
                $buy = get_post_meta($product->get_id(), 'total_sales', true);
                if (!empty($stock) && $buy > 0) {
 
 
                    $round = round(($buy * 100 / ($stock + $buy)), 0);
                ?>
                    <div class="crazy-deal-details-process">
                        <div class="crazy-deal-details-procressbar">
                            <div class="crazy-deal-details-procressbar-inner" style="width:<?php echo  $round . '%'; ?>"></div>
                        </div>
                        <span class="crazy-deal-details-soldtext"><?php echo sprintf(__('Đã bán %s sp', 'woocommerce'), $buy); ?></span>
                    </div>
                <?php
                }
                ?>
 
 
 
 
            </div>
        </div>
<script>
    jQuery(function($) {
        function updateTimer() {
            var isures_count = $("#isures-sale-fl").attr('data-count');
            future  = Date.parse(isures_count);
            now     = new Date();
            diff    = future - now;
 
 
            days  = Math.floor( diff / (1000*60*60*24) );
            hours = Math.floor( diff / (1000*60*60) );
            mins  = Math.floor( diff / (1000*60) );
            secs  = Math.floor( diff / 1000 );
 
 
            d = days;
            h = hours - days  * 24;
            m = mins  - hours * 60;
            s = secs  - mins  * 60;
 
 
 
 
            $('#isures-sale-fl').html(d + ':' + h + ':' + m + ':' + s);
        }
        setInterval(function() {
            updateTimer();
        }, 1000);
 
 
 
 
 
 
    });
</script>
        <style>
            .crazy-deal-details.pc {
                margin: 25px auto;
                height: 29px;
                overflow: hidden;
                background-image: url(https://huanvm.com/wp-content/uploads/2022/12/huanvmdotcom-flashsale-pc.png);
                background-position: 0 0;
                background-repeat: no-repeat;
                background-size: 100% 100%;
 
 
            }
 
 
            .crazy-deal-details-right {
                position: relative;
                margin-left: 140px;
                height: 100%;
                display: flex;
                align-items: center;
                flex-direction: row;
                justify-content: space-between;
            }
 
 
            time.crazy-deal-details-countdown {
                text-align: left;
                font-size: 14px;
            }
 
 
            span#isures-sale-fl {
                color: #ff3d00;
                font-size: 14px;
            }
 
 
            span.crazy-deal-details-soldtext {
                color: #999;
                font-size: 14px;
                font-weight: bold;
                margin-right: 10px;
            }
 
 
            .crazy-deal-details.pc .crazy-deal-details-process {
                display: flex;
                flex-direction: row-reverse;
                align-items: center;
                color: #999;
                font-weight: 700;
            }
 
 
            .crazy-deal-details.pc .crazy-deal-details-procressbar {
                width: 90px;
                height: 8px;
                background: #ffd1c2;
                border-radius: 4px;
                display: inline-block;
                margin-right: 6px;
                margin-left: 6px;
            }
 
 
            .crazy-deal-details.pc .crazy-deal-details-procressbar-inner {
                background: linear-gradient(90deg, #ff8763, #ff330c);
                border-radius: 4px;
                width: 0;
                height: 100%;
            }
 
 
            @media screen and (max-width: 1024px) {
                .crazy-deal-details.pc {
                    height: 50px;
                    background-image: url(https://huanvm.com/wp-content/uploads/2022/12/huanvmdotcom-flashsale-mobile.png);
 
 
                }
 
 
                .crazy-deal-details-right {
                    position: relative;
                    display: flex;
                    color: #fff;
                    margin-right: 10px;
                    height: 100%;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-end;
                }
 
 
                .crazy-deal-details-procressbar {
                    background: hsla(0, 0%, 100%, .5);
                }
 
 
                .crazy-deal-details.pc .crazy-deal-details-procressbar-inner {
                    background: #fff;
                }
 
 
                .isures-sale-fl,
                span.crazy-deal-details-soldtext {
                    color: #fff !important
                }
            }
        </style>
<?php
    }
}
 
 
add_action('woocommerce_before_add_to_cart_button', 'isures_flashsale_countdown_and_stock_prod');

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

function isures_flashsale_countdown_and_stock_prod()

{

$thepostid = get_the_ID();

$sale_price_dates_to = ($date_to = get_post_meta($thepostid, '_sale_price_dates_to', true)) ? date_i18n('Y-m-d', $date_to) : '';

$sale_from = ($date_from = get_post_meta($thepostid, '_sale_price_dates_from', true)) ? date_i18n('Y-m-d', $date_from) : '';

$strtotime_date_from = strtotime($sale_from);

$strtotime_date_to = strtotime($sale_price_dates_to);

if (!empty($sale_price_dates_to) && $strtotime_date_to > $strtotime_date_from && $strtotime_date_to >= strtotime(date("Y/m/d"))) {

<time class="crazy-deal-details-countdown">Kết thúc sau <span data-count="<?php echo $sale_price_dates_to; ?>" id="isures-sale-fl"></span></time>

<?php

global $product;

$stock = $product->get_stock_quantity();

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

if (!empty($stock) && $buy > 0) {

$round = round(($buy * 100 / ($stock + $buy)), 0);

</div>

</div>

<?php

}

</div>

jQuery(function($) {

function updateTimer() {

var isures_count = $("#isures-sale-fl").attr('data-count');

future = Date.parse(isures_count);

now = new Date();

diff = future - now;

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

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

mins = Math.floor( diff / (1000*60) );

secs = Math.floor( diff / 1000 );

d = days;

h = hours - days * 24;

m = mins - hours * 60;

s = secs - mins * 60;

$('#isures-sale-fl').html(d + ':' + h + ':' + m + ':' + s);

}

setInterval(function() {

updateTimer();

}, 1000);

});

</script>

<style>

.crazy-deal-details.pc {

margin: 25px auto;

height: 29px;

overflow: hidden;

background-image: url(https://huanvm.com/wp-content/uploads/2022/12/huanvmdotcom-flashsale-pc.png);

background-position: 0 0;

background-repeat: no-repeat;

background-size: 100% 100%;

}

.crazy-deal-details-right {

position: relative;

margin-left: 140px;

height: 100%;

display: flex;

align-items: center;

flex-direction: row;

justify-content: space-between;

}

time.crazy-deal-details-countdown {

text-align: left;

font-size: 14px;

}

span#isures-sale-fl {

color: #ff3d00;

font-size: 14px;

}

span.crazy-deal-details-soldtext {

color: #999;

font-size: 14px;

font-weight: bold;

margin-right: 10px;

}

.crazy-deal-details.pc .crazy-deal-details-process {

display: flex;

flex-direction: row-reverse;

align-items: center;

color: #999;

font-weight: 700;

}

.crazy-deal-details.pc .crazy-deal-details-procressbar {

width: 90px;

height: 8px;

background: #ffd1c2;

border-radius: 4px;

display: inline-block;

margin-right: 6px;

margin-left: 6px;

}

.crazy-deal-details.pc .crazy-deal-details-procressbar-inner {

background: linear-gradient(90deg, #ff8763, #ff330c);

border-radius: 4px;

width: 0;

height: 100%;

}

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

.crazy-deal-details.pc {

height: 50px;

background-image: url(https://huanvm.com/wp-content/uploads/2022/12/huanvmdotcom-flashsale-mobile.png);

}

.crazy-deal-details-right {

position: relative;

display: flex;

color: #fff;

margin-right: 10px;

height: 100%;

flex-direction: column;

justify-content: center;

align-items: flex-end;

}

.crazy-deal-details-procressbar {

background: hsla(0, 0%, 100%, .5);

}

.crazy-deal-details.pc .crazy-deal-details-procressbar-inner {

background: #fff;

}

.isures-sale-fl,

span.crazy-deal-details-soldtext {

color: #fff !important

}

</style>

<?php

}

add_action('woocommerce_before_add_to_cart_button', 'isures_flashsale_countdown_and_stock_prod');

Lưu ý: Code này không sử dụng cho Variable Product ( sản phẩm có biến thể ) mà chỉ sử dụng cho Simple Products ( sản phẩm đơn giản ). Sản phẩm có biến thể mình sẽ update sau.

Chúc các bạn thành công!