• Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
Friday, 31 March, 2023
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
No Result
View All Result
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
Home Website

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

Code Flash Sale Countdown & Products Sold

Harris by Harris
28/12/2022
in Hướng dẫn, Thủ thuật, Website
Reading Time: 6 mins read
0
huanvmdotcom code flash sale countdown va san pham da ban
17
SHARES
52
VIEWS
Share to FacebookShare to TwitterPin on Pinterest

Mục lục bài viết

  1. Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce
  2. Tạo sản phẩm giảm giá kèm ngày hết hạn khuyến mãi trên Woocommerce
    1. 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
    2. Cài đặt kiểm kê kho hàng ( quản lý kho hàng )
  3. Thêm code Flash Sale Countdown & Sản phẩm đã bán vào child theme

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
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à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à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:

Code flash sale countdown & products sold
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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');

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é:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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é:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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é ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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"))) {
?>
        <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');

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!

Digiprove sealCopyright protected by Digiprove © 2022
5/5 - (1 vote)
Chào ! Bạn thấy nội dung này thế nào?
Hữu ích 36Tạm được 36
Tags: flash sale countdownwoocommerce
Previous Post

Woocommerce hooks là gì, cách dùng Actions Hook và Filters Hook trong WordPress

Next Post

Hướng dẫn fix lỗi Error message: Blacklisted domain trên CyberPanel

Harris

Harris

Thích du lịch, khám phá và thích vọc vạch

Next Post
Hướng dẫn fix lỗi Error message: Blacklisted domain trên CyberPanel

Hướng dẫn fix lỗi Error message: Blacklisted domain trên CyberPanel

Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận

KHUYÊN DÙNG

Auto Draft

[Hướng dẫn] Giải Nén Tập Tin Trên Android

05/03/2022
101
Steinberg – Cubase Elements 11.0.0

Steinberg Cubase 11 Elements v11.0.0 Full

05/03/2022
1.4k

ĐANG THỊNH HÀNH

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

28/12/2022
6.3k
Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

30/12/2022
1.9k
Steinberg – Cubase Pro 12.0.0.205 x64

Steinberg – Cubase Pro 12.0.0.205 x64

24/03/2022
2k
[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

[Hướng dẫn] Thêm Custom Fields vào Simple Products cho WooCommerce

28/12/2022
86
Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

05/03/2022
253

GIỚI THIỆU

Chia sẻ thủ thuật IT, tải phần mềm miễn phí

Xin chào! Mình là Mạnh Huấn, website này mình xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức, thủ thuật máy tính, làm web WordPress, SEO, MMO, các phần mềm hay... mà mình biết cho tất cả mọi người. Cảm ơn các bạn đã ghé qua, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho mình nhé!

Theo dõi mình tại đây:

BÀI VIẾT GẦN ĐÂY

Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

23/03/2023
Hướng dẫn fix lỗi Error message: Blacklisted domain trên CyberPanel

Hướng dẫn fix lỗi Error message: Blacklisted domain trên CyberPanel

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

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

28/12/2022

HV MEDIA ON FACEBOOK

  • Giới thiệu
  • Chính sách bảo mật
  • Bản quyền
  • Liên hệ
  • Quảng cáo
  • Gửi yêu cầu
  • Báo link hỏng

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

No Result
View All Result
  • Home
  • Mac OS
    • Adobe
    • Developer Tools
    • Graphics & Design
    • Internet – Security
    • Productivity
    • Utilities
    • Video – Audio
  • Windows
    • Anti Virus
    • Development
    • Graphics & Design
    • Office – Study
    • Tools
    • Utilities
    • Video – Audio
  • Điện thoại
    • Apps, Game Cho iOS
    • Phần mềm Android
  • Thủ thuật
    • Thủ thuật máy tính
    • Thủ thuật Mobile
    • Thủ thuật Facebook
  • Game hay
    • Game MacOS
    • Game Windows
  • Website
  • Hướng dẫn
  • Tài liệu

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

wpDiscuz
0
0
Bạn đang nghĩ gì, hãy để lại bình luận nhé !x
()
x
| Phản hồi