How to Add a Countdown Timer for Discounted Products in WooCommerce

Qaisar Satti

1 day ago

Adding a WooCommerce countdown timer for discounted products can create urgency and boost sales. In this tutorial, we will guide you on how to programmatically add a countdown timer to display the remaining time for a product’s sale price.

Step 1: Add the Countdown Timer to Product Pages

Add the following code to your functions.php file.

// Display countdown timer on product pages
add_action( 'woocommerce_single_product_summary', 'custom_sale_countdown_timer', 25 );

function custom_sale_countdown_timer() {
global $product;

// Get the sale end date
$sale_end = get_post_meta( $product->get_id(), '_sale_price_dates_to', true );

// If there's no sale end date, return
if ( !$sale_end ) {
return;
}

// Convert to JavaScript timestamp
$sale_end_time = date( 'Y/m/d H:i:s', $sale_end );

// Countdown Timer HTML
echo '<div id="countdown-timer" data-time="' . esc_attr( $sale_end_time ) . '"></div>';
}

Step 2: Add JavaScript for Countdown Timer

Now, we need to add JavaScript to make the countdown timer functional. Place this code in your theme’s JavaScript file.

// countdown script
add_action( 'wp_footer', 'custom_countdown_script' );

function custom_countdown_script() {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
let timerElement = document.getElementById("countdown-timer");

if (timerElement) {
let saleEndTime = new Date(timerElement.getAttribute("data-time")).getTime();

let countdown = setInterval(function() {
let now = new Date().getTime();
let timeLeft = saleEndTime - now;

if (timeLeft > 0) {
let days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
let hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

timerElement.innerHTML = `<strong>Hurry! Sale ends in:</strong> ${days}d ${hours}h ${minutes}m ${seconds}s`;
} else {
clearInterval(countdown);
timerElement.innerHTML = "<strong>Sale has ended!</strong>";
}
}, 1000);
}
});
</script>
<?php
}