Zum Inhalt springen
Startseite » Woocommerce Snippets » Produkt Countdown Timer

Produkt Countdown Timer

Diese Kurzanleitung zeigt Ihnen, wie Sie Ihrer Produktseitenvorlage unter den Produktbegriffen (Kategorien und Tags) einen Countdown-Timer hinzufügen. In dieser Anleitung wird eine Produkt-ID verwendet, um eine bestimmte Produktseite anzusprechen, sodass Sie nicht auf jeder Seite einen Countdown-Timer haben.

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