How to Add a Countdown Timer for Discounted Products in WooCommerce

Adding a WooCommerce countdown timer for discounted products can create urgency and boost sales. In this tutorial, we will guide you on how to programmatically add a countdown timer to display the remaining time for a product’s sale price.

Step 1: Add the Countdown Timer to Product Pages

Add the following code to your functions.php file.

// Display countdown timer on product pages
add_action( 'woocommerce_single_product_summary', 'custom_sale_countdown_timer', 25 );

function custom_sale_countdown_timer() {
    global $product;
   
    // Get the sale end date
    $sale_end = get_post_meta( $product->get_id(), '_sale_price_dates_to', true );
   
    // If there's no sale end date, return
    if ( !$sale_end ) {
        return;
    }
   
    // Convert to JavaScript timestamp
    $sale_end_time = date( 'Y/m/d H:i:s', $sale_end );
   
    // Countdown Timer HTML
    echo '<div id="countdown-timer" data-time="' . esc_attr( $sale_end_time ) . '"></div>';
}

Step 2: Add JavaScript for Countdown Timer

Now, we need to add JavaScript to make the countdown timer functional. Place this code in your theme’s JavaScript file.

// countdown script
add_action( 'wp_footer', 'custom_countdown_script' );

function custom_countdown_script() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let timerElement = document.getElementById("countdown-timer");

            if (timerElement) {
                let saleEndTime = new Date(timerElement.getAttribute("data-time")).getTime();

                let countdown = setInterval(function() {
                    let now = new Date().getTime();
                    let timeLeft = saleEndTime - now;

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

                        timerElement.innerHTML = `<strong>Hurry! Sale ends in:</strong> ${days}d ${hours}h ${minutes}m ${seconds}s`;
                    } else {
                        clearInterval(countdown);
                        timerElement.innerHTML = "<strong>Sale has ended!</strong>";
                    }
                }, 1000);
            }
        });
    </script>
    <?php
}

Qaisar Satti

Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!