WooCommerce Product Page Countdown Timer

WooCommerce Countdown Timer

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.

About this Solution

This quick guide shows you how to add a countdown timer to your product page template under the products terms (categories and tags). This guide uses a product ID to target a particular product page so that you don’t have a countdown timer on every page.

				
					/*
* Snippet Name:
* Snippet Author: ecommercehints.com with props to www.w3schools.com for the JS countdown
*/
 
function action_woocommerce_share() { 
	global $product;
    if ( 15 === $product->get_id() ) { // The product ID to show the countdown timer
    echo
        '<style>
#timer {
  font-size: 20px;
  padding-top: 10px;
  color:red;
}
</style><p id="timer"></p><script>
// Set the date we are counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").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 = "Available for:<br>"+ 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 = "PRODUCT NO LONGER AVAILABLE";
  }
}, 1000);
</script>';
}}; 
         
// add the action 
add_action( 'woocommerce_share', 'action_woocommerce_share', 10, 0 ); 
				
			
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

2 Responses

  1. Hi
    Is there any guide that can explain to me about the way I need to embed the code for it to work for me on a product page?
    Thank you!

    1. Hi Itay, you need to add the code snippet to your functions.php file (your host should be able to help you with that). Or, you can add it as a snippet using the Code Snippets plugin (preferable)

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

Your email address will not be published. Required fields are marked *

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers