Application of auction product timer in archive page

Question

The auction product timer is working fine on a single store page, I want to add it to the store archive page, but it only shows up on the first product in the store archive and not the rest.

Based on the Product Sale End Countdown Timer on WooCommerce Single Product Page answer code, here is my code attempt:

function sales_timer_countdown_product() {
    global $product;
    $sale_date = get_post_meta( $product->get_id(), '_sale_price_dates_to', true );
    if ( ! empty( $sale_date ) ) {
        ?>
        <script>
            // 设置倒计时的日期
            var countDownDate = <?php echo $sale_date; ?> * 1000;
            // 每1秒更新倒计时
            var x = setInterval(function() {
                // 获取今天的日期和时间
                var now = new Date().getTime();
                // 计算现在和倒计时日期之间的距离
                var distance = countDownDate - now;
                // 计算天、小时、分钟和秒
                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);
                // 在id为“saleend”的元素中输出结果
                document.getElementById("saleend").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                // 如果倒计时结束，显示一些文本
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("saleend").innerHTML = "此产品的销售已过期";
                }
            }, 1000);
        </script>
        <!-- 这是倒计时显示的位置 -->
        <p id="saleend" style="color:red"></p>
        <?php
    }
} add_shortcode( 'sales_timer_countdown_product', 'sales_timer_countdown_product' );

what is the problem?

Answer 1

To display a countdown timer for each product in the store archive page, you need to modify the template file responsible for rendering the store archive page. Here are examples of how you can achieve this:

• Open the template file for your theme’s store archive page (usually named archive-product.php or taxonomy-product_cat.php).

• Find the part where the product cycle is executed. This is where individual product items are displayed.

• Inside the loop, find the section where you want to display the countdown timer for each product (such as the product title, price, or custom location). Add the following code snippet:

  <script>
        // 设置我们要倒计时的日期
        var countDownDate<?php echo get_the_ID(); ?> = <?php echo $sale_date; ?> * 1000;
        // 每1秒更新倒计时
        var x<?php echo get_the_ID(); ?> = setInterval(function() {
            // 获取今天的日期和时间
            var now = new Date().getTime();
            // 计算现在和倒计时日期之间的距离
            var distance = countDownDate<?php echo get_the_ID(); ?> - now;
            // 计算天、小时、分钟和秒的时间
            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);
            // 在id为“saleend”的元素中输出结果
            document.getElementById("saleend-<?php echo get_the_ID(); ?>").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
            // 如果倒计时结束，写入一些文本
            if (distance < 0) {
                clearInterval(x<?php echo get_the_ID(); ?>);
                document.getElementById("saleend-<?php echo get_the_ID(); ?>").innerHTML = "该产品的销售已过期";
            }
        }, 1000);
    </script>
    <!-- 这是倒计时显示的位置 -->
    <p id="saleend-<?php echo get_the_ID(); ?>" style="color:red"></p>

This code generates a unique countdown timer for each product by using the product's ID (get_the_ID()) as a suffix to the variable and element ID.

Save changes to the template file and a countdown timer should appear on the store archive page.