When placing an order, WooCommerce does validate all required user fields inputs. If not, the checkout-errors messages appear like if the first name is missing and so on.
I want those error validation messages to fade out after a given time.
So, I injected this jQuery code:
(function($) {
var wooError = $('.woocommerce-error');
wooError.delay(4000).fadeOut(160);
})
(jQuery);
As long the .woocommerce-error
class is not within form.checkout
, it works fine, like on login or register for example. But it does not work on checkout page.
The class .woocommerce-error
is correct (it's there) , but the fadeOut isn't triggered.
So, I went on searching the web. Found an other approach, to wait for checkout_error
checkout page event, like so:
$( document.body ).on( 'checkout_error', function(){
var wooError = $('.woocommerce-error');
wooError.delay(4000).fadeOut(160);
})
(jQuery);
But it doesn't work.
Can someone tell me, why I can not trigger the .woocommerce-error
class to fadeout as long it's inside the checkout form?
How to trigger the fadeOut on checkout error validation messages?
Try the following code using setTimeout()
instead of delay()
, that will fade out any error message on checkout page with a delay of 4 seconds and a duration of 160 mili-seconds:
// 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;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Finally I found the way. If there's someone else looking for this, here's how it works:
(function($) {
$( document.body ).on( 'checkout_error', function(){
var wooError = $('.woocommerce-error');
wooError.delay(4000).fadeOut(160);
})
})
(jQuery);
After 13 hours of coding and stuff you don't see the obvious sometimes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.