WooCommerce: Bộ đếm ngược ngày kết thúc khuyến mãi

Bạn cảm thấy nhàm chán với huy hiệu “Giảm giá!” mặc định trên sản phẩm WooCommerce? Bạn có muốn tạo trải nghiệm mua sắm hấp dẫn, lôi cuốn hơn cho khách hàng? Trong bài viết này, chúng tôi sẽ hướng dẫn bạn tùy chỉnh một chút PHP/JS để thay thế huy hiệu “Giảm giá!” cũ

Bạn cảm thấy nhàm chán với huy hiệu “Giảm giá!” mặc định trên sản phẩm WooCommerce? Bạn có muốn tạo trải nghiệm mua sắm hấp dẫn, lôi cuốn hơn cho khách hàng?
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn tùy chỉnh một chút PHP/JS để thay thế huy hiệu “Giảm giá!” cũ kỹ bằng một bộ đếm ngược đầy hấp dẫn ngay trên trang Sản phẩm đơn lẻ của WooCommerce. Với tính năng này, mỗi khi có đợt giảm giá, khách hàng sẽ cảm nhận được sự khẩn trương và bị thúc đẩy mua hàng trước khi thời gian khuyến mãi kết thúc.
Hãy cùng bắt đầu nâng cấp cửa hàng WooCommerce của bạn và tối ưu hóa doanh số với tùy chỉnh đơn giản nhưng hiệu quả này nhé!
Huy hiệu “Giảm giá” hiện là bộ đếm thời gian đếm ngược động với số ngày, giờ, phút và giây còn lại cho đến “ngày kết thúc giảm giá”

PHP (+JS) Snippet: Biến huy hiệu “Giảm giá!” thành bộ đếm thời gian đếm ngược @ WooCommerce Single Product Page

Lưu ý rằng tùy chỉnh này chỉ hoạt động trên trang sản phẩm đơn lẻ và khi bạn đã thiết lập “ngày kết thúc giảm giá,” vì tập lệnh cần dựa vào thời gian còn lại giữa thời điểm hiện tại và ngày kết thúc khuyến mãi sắp tới.

 
/**
 * @snippet       Sale End Date Countdown Timer
 * @how-to        Get aithietke.com FREE
 * @author        Mr3T, aithietke.com
 * @testedwith    WooCommerce 7
 * @community     https://aithietke.com/
 */
add_filter( 'woocommerce_sale_flash', 'bbloomer_sale_end_date', 9999, 3 ); function bbloomer_sale_end_date( $html, $post, $product ) { if ( is_product() && $product->get_date_on_sale_to() ) {</p>
<p>      $now = time();<br ?--> $sale_price_dates_to_timestamp = $product->get_date_on_sale_to()->getTimestamp();
$datediff = $sale_price_dates_to_timestamp - $now;
$days = floor( $datediff / 86400 );
$hours = floor( ( $datediff - $days * 86400 ) / 3600 );
$mins = floor( ( $datediff - $days * 86400 - $hours * 3600 ) / 60 );
$secs = floor( ( $datediff - $days * 86400 - $hours * 3600 - $mins * 60 ) / 60 );

wc_enqueue_js( "

var end = new Date( " . $sale_price_dates_to_timestamp * 1000 . " );

setInterval( function() { bbcountdown( end ); }, 1000 );

function bbcountdown( endTime ) {
var now = Date.now();
var timeLeft = ( endTime - now ) / 1000;
var days = Math.floor( timeLeft / 86400 );
var hours = Math.floor( ( timeLeft - ( days * 86400 ) ) / 3600 );
var mins = Math.floor( ( timeLeft - ( days * 86400 ) - ( hours * 3600 ) ) / 60 );
var secs = Math.floor( ( timeLeft - ( days * 86400 ) - ( hours * 3600 ) - ( mins * 60 ) ) );
$('.countdown .days').text( days );
$('.countdown .hours').text( hours );
$('.countdown .mins').text( mins );
$('.countdown .secs').text( secs );
}

" );

return '<span class="onsale countdown">Sale ends in <span class="days">' . $days . '</span>d <span class="hours">' . $hours . '</span>h <span class="mins">' . $mins . '</span>m <span class="secs">' . $secs . '</span>s</span>';

}

return $html;

}

Bài viết liên quan

WooCommerce: Ẩn giá tiền và nút thêm vào giỏ hàng đối với khách hàng chưa đăng nhập website

Bạn có thể muốn buộc người dùng đăng nhập để xem giá tiền và thêm sản ph

Hướng dẫn WooCommerce Visual Hook: Trang tài khoản

Này WooCustomizers, Hướng dẫn về Visual Hook Trong tập này, tôi đã tạo hướng dẫ

Hướng dẫn WooCommerce Visual Hook: Emails

Công cụ tùy chỉnh WooCommerce: Hướng dẫn Visual Hook Emails! Đây là hướng dẫn HTM

Hướng dẫn WooCommerce Visual Hook: Trang thanh toán

Đây là hướng dẫn hấp dẫn HTML Visual Hook cho Trang thanh toán WooCommerce. Hướng d