How to Add a Shipping Time Countdown Timer to WooCommerce Product Pages?

It’s well known that a countdown is designed to capture user attention and prompt quicker decision-making regarding the purchase. A simple and easy way is to add a countdown timer on the WooCommerce product page, updating every second, and providing information about the time remaining until a specified delivery deadline. The countdown is only displayed on weekdays, not on weekends.

// Add the countdown to the WooCommerce before single product summary hook
add_action('woocommerce_before_single_product_summary', 'ts_delivery_countdown');

// Add the countdown timer to the WooCommerce before single product summary hook
function ts_delivery_countdown() {
    date_default_timezone_set('Asia/Kolkata');
    $deadline = 18;
    $isWeekend = null;
    $weekend = array('Saturday', 'Sunday');
    $weekdayDeadline = "Friday 18:00"; // 6:00 PM

    // Get the current day and time
    $currentDay = date("l");
    $currentTime = strtotime("now");

    // Check if it's a weekend or past the weekday deadline
    if (in_array($currentDay, $weekend) || ($currentTime > strtotime($weekdayDeadline))) {
        $isWeekend = true;
    } else {
        $isWeekend = false;
    }

    if (!$isWeekend) {
        echo '
        <p style="color: red;"><span id="delivery-countdown"></span></p>
        <style>
        #delivery-countdown {
            color: red; /* Set to red */
            font-weight: bold;
            font-size: 16px; /* Set your desired font size */
        }
        </style>
        <script>
        jQuery(function ($) {
            $(document).ready(function () {
                let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
                let weekdayDeadline = "Friday 18:00"; // 6:00 PM

                function countdownTimer() {
                    let currentTime = new Date();
                    let deadline = ' . $deadline . ';
                    deadline -= 1;
                    let hrs, mins, secs, hrsPrefix, minsPrefix, secsPrefix, orderInPrefix, deliveryBy;

                    if (currentTime.getHours() > deadline) {
                        hrs = (deadline - currentTime.getHours()) + 24;
                        if (currentTime.getDay() == 5) {
                            hrs += 48;
                        }
                        if (currentTime.getDay() == 6) {
                            hrs += 24;
                        }
                    } else {
                        hrs = deadline - currentTime.getHours();
                    }

                    mins = 59 - currentTime.getMinutes();
                    secs = 59 - currentTime.getSeconds();
                    orderInPrefix = "Order in ";
                    deliveryBy = " to get delivered by " + days[(currentTime.getDay() + 1) % 7] ; // Adding 1 to get the next day
                    hrsPrefix = (hrs == 1) ? " hour " : " hours ";
                    minsPrefix = (mins == 1) ? " minute " : " minutes ";
                    secsPrefix = (secs == 1) ? " second" : " seconds";
                    timeLeft = orderInPrefix + hrs + hrsPrefix + mins + minsPrefix + secs + secsPrefix + deliveryBy;
                    $("#delivery-countdown").html(timeLeft);
                }

                setInterval(countdownTimer, 1000);
            });
        });
        </script>
        ';
    }
}

Output

In the provided code, with the deadline time is set to 18, the countdownTimer function calculates the current day and time (currently 9:33 AM) and runs the countdown timer to display a message such as “Order in 8 hours 26 minutes 40 seconds to get delivered by Tuesday.”

Instead of showing a countdown timer, you can also show specific delivery time that will show the estimated delivery date or dispatch time on the WooCommerce product page. This prompt message will help customers to know the exact delivery date and time.