Chắc hẵn không ít bạn đang cần đến chức năng hiển thị một chương trình khuyến mãi cho từng sản phẩm bằng cách đếm ngược thời gian diễn ra khuyến mãi, nhằm kích thích sự mua hàng của khách hàng, sau đây mình sẽ chia sẽ đoạn code và cách thực hiện mà không cần Plugin thật nhanh gọn.
Chức năng Countdown Timer dùng cho theme Flatsome
Phạm vi áp dụng cho đoạn code này là theme Flatsome nhé mọi người, chức năng này mình tạm gọi là “Countdown Timer”. Việc dùng cho các theme khác mình chưa check thử bạn nào đã làm xin chia sẽ nhé.
Cách thực hiện chức năng Countdown Timer
Việc đâu tiên cần làm là mở file function.php của theme bạn đang dùng ở đây chúng ta đang dùng Theme Flatsome nên đường dẫn sẽ là: /wp-content/themes/flatsome/function.php và chèn đoạn code bên dưới vào.
/* Dev by Woovn */
add_shortcode('woovn_sale_date', 'sale_price_dates_to');
function sale_price_dates_to() {
ob_start();
global $product;
$sales_price_to = get_post_meta($product->get_id(), '_sale_price_dates_to', true);
if($product->is_type('simple') && $product->is_on_sale() && $sales_price_to != "") {
$sales_price_year_to = date("Y", $sales_price_to);
$sales_price_month_date_to = date("n", $sales_price_to);
$sales_price_day_date_to = date("j", $sales_price_to);
echo do_shortcode( '[testux_countdown size="177" year="'.$sales_price_year_to.'" month="'.$sales_price_month_date_to.'" day="'.$sales_price_day_date_to.'" 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"]' );
}
return ob_get_clean();
}
Lưu ý: sửa testux_countdown -> ux_countdown
Sau đó chúng ta chỉ việc chèn shortcode sau vào Custom HTML trong Tùy biến ▸ WooCommerce ▸ Product Page
woovn_sale_date
Bước thiết lập tiếp theo nằm ở chính sản phẩm đang muốn áp dụng chương trình
Như ban đầu đã nói, chức năng này áp dụng cho các sản phẩm mà bạn muốn chỉ định áp dụng khuyến mãi vì vậy đối với sản phẩm nào bạn đang muốn áp dụng chương trình khuyến mãi đếm ngược thời gian “Countdown Timer”.
Bạn vào đúng sản phẩm đó và thực hiện chọn thời gian. Bạn xem hình hướng dẫn sau:
Fix chỉnh sửa html và css
Ở khung tùy chỉnh Custom HTML trong Theme Option của theme Flatsome các bạn có thể thêm nội dung chương trình hoặc chiến dịch khuyến mãi của bên bạn sao cho hợp lý và CSS lại cho phù hợp.
Trải nghiệm thành quả vừa thực hiện xong, chúc các bạn thành công!
Nguồn tham khảo: Woovn
