Automatic hiding Woocommerce notice

Feature Requests / Improvements
1

Please add to the Woocommerce notice element the ability to configure automatic hiding of notifications after a certain time.

This version of the code works for me:

setInterval(function() {
  jQuery('.woocommerce-message, .woocommerce-error').fadeOut('slow')
}, 5000);
1 Like
2

Use it at your own risk. It works for me :sunglasses:

<?php
/*
Plugin Name: WooCommerce Auto-hide Notices
Plugin URI: https://example.com/plugin
Description: Adds auto-hide functionality with smooth animation to WooCommerce notices
Version: 1.0
Author: Your Name
Author URI: https://example.com
License: GPL2
*/

if (!defined('ABSPATH')) exit; // Exit if accessed directly

class WC_Auto_Hide_Notices {
    public function __construct() {
        add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
        add_action('wp_footer', array($this, 'add_auto_hide_script'));
    }

    public function enqueue_scripts() {
        wp_enqueue_style('wc-auto-hide-notices', plugins_url('css/style.css', __FILE__));
    }

    public function add_auto_hide_script() {
        $auto_hide_time = apply_filters('wc_auto_hide_notices_time', 5000); // 5 seconds by default
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const noticesWrapper = document.querySelector('.woocommerce-notices-wrapper');
                if (!noticesWrapper) return;

                function animateNotice(notice, start, end, duration) {
                    return new Promise((resolve) => {
                        notice.style.transition = `opacity ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), max-height ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), padding ${duration}ms cubic-bezier(0.4, 0, 0.2, 1), margin ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                        notice.style.opacity = start;
                        notice.style.maxHeight = start === '0' ? '0' : '400px';
                        notice.style.padding = start === '0' ? '0' : '';
                        notice.style.margin = start === '0' ? '0' : '';
                        
                        requestAnimationFrame(() => {
                            setTimeout(() => {
                                notice.style.opacity = end;
                                notice.style.maxHeight = end === '0' ? '0' : '400px';
                                notice.style.padding = end === '0' ? '0' : '';
                                notice.style.margin = end === '0' ? '0' : '';
                                
                                setTimeout(resolve, duration);
                            }, 50);
                        });
                    });
                }

                async function hideNotice(notice) {
                    await animateNotice(notice, '1', '0', 2000);
                    notice.remove();
                }

                const observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.addedNodes.length) {
                            mutation.addedNodes.forEach(async function(node) {
                                if (node.classList && (node.classList.contains('woocommerce-message') || node.classList.contains('woocommerce-error') || node.classList.contains('woocommerce-info'))) {
                                    await animateNotice(node, '0', '1', 2000);
                                    setTimeout(function() {
                                        hideNotice(node);
                                    }, <?php echo $auto_hide_time; ?>);
                                }
                            });
                        }
                    });
                });

                observer.observe(noticesWrapper, { childList: true });
            });
        </script>
        <?php
    }
}

new WC_Auto_Hide_Notices();


.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1), max-height 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}