[Hướng dẫn] Hiển thị countdown sản phẩm khuyến mãi ngoài trang chủ

thêm countdown bên dưới sản phẩm

Bạn đang dự định mở 1 chương trình ưu đãi có thời hạn đối với tất các sản phẩm trong shop. Bạn muốn show countdown thời gian ưu đãi dưới giá mỗi sản phẩm để kích thích nhu cầu mua sắm của khách hàng. Hãy làm theo cách sau đây cực kỳ đơn giản nhé!

[Hướng dẫn] Hiển thị countdown sản phẩm khuyến mãi ngoài trang chủ

thêm countdown bên dưới sản phẩm
thêm countdown bên dưới sản phẩm

Bước 1: Chèn code vào functions.php

Copy và chèn đoạn code sau vào file functions.php nhé

//Hiển thị countdown sản phẩm ngoài trang chủ
function countdown_product(){
echo do_shortcode('[ux_countdown1 year="2021" month="08" day="30" time="15:00"]');
}
add_action('woocommerce_after_shop_loop_item','countdown_product',10);

Lưu ý: Để hiện code cho các bạn xem nên mình thêm số 1 vào sau ux_countdown. Khi các bạn copy về thì bỏ số 1 đi nhé!

Nhớ thay năm, tháng, ngày và thời gian kết thúc ưu đãi cho phù hợp với nhu cầu của bạn nhé

Bước 2: Thêm CSS làm đẹp 

Bạn copy và thêm đoạn CSS cơ bản sau vào file style.css trong child theme hoặc Giao diện > Tuỳ biến > Add CSS nhé

.ux-timer.dark span {
font-size: 11px;
}
.ux-timer.dark{
margin-top:-36px;
background-color:red;
}
.product-small.box {
height:300px;
}

Nếu bạn rành về CSS thì có thể tuỳ biến thêm nhé. Lưu lại và xem thành quả nào ^^

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

Trả lời

Email của bạn sẽ không được hiển thị công khai.