Are you tired of the same old “Sale!” badge on your WooCommerce products? Want to create a more engaging and dynamic shopping experience for your customers?
In this blog post, we’ll guide you through a simple PHP/JS customization that replaces the static “Sale!” badge on the WooCommerce Single Product page with a captivating countdown timer. This will not only add excitement to your product page but also encourage customers to make a purchase before the sale ends.
Get ready to elevate your WooCommerce store and boost your sales with this effective customization. Enjoy!
PHP (+JS) Snippet: Turn “Sale!” Badge Into A Countdown Timer @ WooCommerce Single Product Page
Of course, this will only work on the single product page AND if you have specified a “sale end date”, because the script needs to calculate the remaining time between now and the future sale end date.
/**
* @snippet Sale End Date Countdown Timer
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @testedwith WooCommerce 9
* @community https://businessbloomer.com/club/
*/
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() ) {
$now = time();
$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;
}
hello
Is it possible to have a short code in this function so that the timer can be shown anywhere on the product page?
Mohammad, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!