WooCommerce Show Sale Ending Countdown Timer On Loop

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

Need support with the snippet? We’re Here to Help You, Contact Us!

About This Solution

This snippet increases the Fear Of Missing Out (FOMO) and urgency factor by showing a countdown timer on the product loop.

Specifically, the timer counts down to the sale end price. If there is no sale end price, the countdown timer will not show.

The “sale to price” is set in the product settings under the “General” tab and saved in the database in the “wp_postmeta” table with the meta key “_sale_price_dates_to”.

By showing a countdown, the customer knows that the sale will end, an encourages them to purchase now rather than wait and potentially miss out on the sales price.

/**
 * Snippet Name:	WooCommerce Show Sale Ending Countdown Timer On Loop
 * Snippet Author:	ecommercehints.com with props to www.w3schools.com for the JS countdown
 */


add_action( 'woocommerce_after_shop_loop_item_title', 'ecommercehints_show_countdown_timer_on_loop', 15 );
function ecommercehints_show_countdown_timer_on_loop() {
	global $product;
    $sales_price_to   = date( "M j, Y", get_post_meta( $product->id, '_sale_price_dates_to', true )); // Get the sales price 'to' date
	if ( $product->is_on_sale() && $sales_price_to != "" ) {
		echo 'Sales ends in:<br>
		<p id="timer"></p>
		<script>
			// Set the date we are counting down to (sale price to date)
			var countDownDate = new Date("'.$sales_price_to.'").getTime();

			// Update the count down every 1 second
			var x = setInterval(function() {

			// Get date and time for today
			var now = new Date().getTime();

			// Find the distance between now and the count down date
			var distance = countDownDate - now;

			// Time calculations for days, hours, minutes and seconds
			var days = Math.floor(distance / (1000 * 60 * 60 * 24));
			var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			var seconds = Math.floor((distance % (1000 * 60)) / 1000);

			// Output the result in an element with id="timer"
			document.getElementById("timer").innerHTML = days + " days,  " + hours + " hours,  " + minutes + " minutes,  " + seconds + " seconds ";

			// If the count down is over, write some text
			if (distance < 0) {
				clearInterval(x);
				document.getElementById("timer").innerHTML = "SALE ENDED";
			}}, 1000);
		</script>';
	}
};