WooCommerce 結帳頁面中的淡出驗證錯誤消息

Question

下訂單時，WooCommerce 會驗證所有必需的用戶字段輸入。 如果沒有，結帳錯誤消息會顯示為是否缺少名字等等。

我希望這些錯誤驗證消息在給定時間后淡出。

所以，我注入了這個 jQuery 代碼：

(function($) {
    var wooError = $('.woocommerce-error'); 
    wooError.delay(4000).fadeOut(160);
})
(jQuery);

只要.woocommerce-error類不在form.checkout ，它就可以正常工作，例如在登錄或注冊時。 但它在結帳頁面上不起作用。

.woocommerce-error類是正確的（它在那里） ，但沒有觸發.woocommerce-error淡出。

於是，我繼續在網上搜索。 找到了另一種方法，等待checkout_error結帳頁面事件，如下所示：

$( document.body ).on( 'checkout_error', function(){
    var wooError = $('.woocommerce-error'); 
    wooError.delay(4000).fadeOut(160);
})
(jQuery);

但它不起作用。

有人能告訴我，為什么我不能觸發.woocommerce-error類淡出，只要它在結帳表單內？

如何在結帳錯誤驗證消息上觸發淡出？

Answer 1

使用setTimeout()而不是delay()嘗試以下代碼，這將淡出結帳頁面上的任何錯誤消息，延遲為 4 秒，持續時間為 160 毫秒：

// Checkout JS
add_action( 'wp_footer', 'checkout_fadeout_error_message');
function checkout_fadeout_error_message() {
    // Only on front-end and checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
    jQuery(function($){
        $(document.body).on( 'checkout_error', function(){
            var wooError = $('.woocommerce-error');
            setTimeout(function(){
                wooError.fadeOut(160);
            }, 4000);
        })
    });
    </script>
    <?php
    endif;
}

代碼位於活動子主題（或活動主題）的 function.php 文件中。 測試和工作。

Answer 2

最后我找到了方法。 如果有其他人在尋找這個，這是它的工作原理：

(function($) {
    $( document.body ).on( 'checkout_error', function(){
        var wooError = $('.woocommerce-error'); 
        wooError.delay(4000).fadeOut(160);
    })
})   
(jQuery);

經過 13 個小時的編碼和其他東西，有時您看不到明顯的東西。