How to Add a Sale Countdown Timer to WooCommerce Without a Plugin – 2026

/*
 * Snippet: How to Add a Sale Countdown Timer to WooCommerce Without a Plugin – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1645
 * Tested with WooCommerce 10.7.0
 * "This function adds a countdown timer element to the product page"
*/
function wcsuccess_add_countdown_timer_html() {
    global $product;

    if ( $product->is_on_sale() && $product->get_date_on_sale_to() ) {
        $sale_end_date = $product->get_date_on_sale_to()->getTimestamp() * 1000; // Convert to milliseconds for JavaScript

        echo '<div id="countdown-timer" data-sale-end="' . esc_attr($sale_end_date) . '" style="font-size: 18px; margin-top: 10px;">';
        echo '<strong>Sale ends in: </strong><span id="time-remaining"></span>';
        echo '</div>';
    }
}
add_action( 'woocommerce_single_product_summary', 'wcsuccess_add_countdown_timer_html', 25 );

/*
 * Snippet: How to Add a Sale Countdown Timer to WooCommerce Without a Plugin – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1645
 * Tested with WooCommerce 10.7.0
 * "This JavaScript creates a countdown timer that updates in real time"
*/
function wcsuccess_enqueue_countdown_script() {
    if ( is_product() ) {
        ?>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                var countdownElement = document.getElementById('countdown-timer');
                if (countdownElement) {
                    var saleEndTime = parseInt(countdownElement.getAttribute('data-sale-end'), 10);

                    function updateCountdown() {
                        var now = new Date().getTime();
                        var timeRemaining = saleEndTime - now;

                        if (timeRemaining > 0) {
                            var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
                            var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                            var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
                            var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

                            countdownElement.querySelector('#time-remaining').textContent = 
                                days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                        } else {
                            countdownElement.querySelector('#time-remaining').textContent = "Sale Ended";
                        }
                    }

                    // Update countdown every second
                    updateCountdown();
                    setInterval(updateCountdown, 1000);
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'wcsuccess_enqueue_countdown_script');

#countdown-timer {
    background-color: #ffeb3b;
    padding: 10px;
    border-radius: 5px;
    color: #333;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
}