Product Page

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 );

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 20% off on your first month with us.

26027
WELCOME OFFER