У woocommerce есть встроенная система сообщений: при добавлении товара в корзину, при удалении товара из корзины, при различных ошибках. Но они появляются перед основным контентом, нарушая исходную верстку. Сделаем их всплывающими и исчезающими.

Скрипт исчезновения

Так как сообщения могут возникать при различных обстоятельствах, скрипт будет в процессе дополнятся

$(document).ready(function() { 

setTimeout(function(){
   $('.woocommerce-message, .woocommerce-error').addClass("hidden");
}, 4000);
setTimeout(function(){
   $('.woocommerce-message, .woocommerce-error').hide();
}, 5000);

$('.button').click(function() {
setTimeout(function(){
   $('.woocommerce-message, .woocommerce-error').addClass("hidden");
}, 4000);
setTimeout(function(){
   $('.woocommerce-message, .woocommerce-error').hide();
}, 5000);
});
   
});

Таймеры нужны, чтобы сообщение некоторое время «висело», потом становилось прозрачным, а после исчезало. Исчезновение происходит за счет добавления класса .hidden {opacity: 0;} и после этого hide.

Стили сообщений

Все родные стили woocommerce я отключаю!

/* Сообщения woocommerce */

.woocommerce-info, .woocommerce-message, .woocommerce-error {
    position: fixed;
    z-index: 999;
    background-color: rgba(3,169,244,0.9);
    padding: 15px;
    top: 5%;
    right: 3%;
    width: 300px;
    text-align: center;
    margin-bottom: 15px;
    display: table;
    border-radius: 3px;
    border: 2px solid #fff;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
    -o-transition: opacity 0.9s;
    transition: opacity 0.9s ease;
    -webkit-transition: opacity 0.9s ease 0s;
}

.woocommerce-message a, .woocommerce-error a {
    color: #000;
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    bottom: -100%;
    padding: 7px 15px;
    border: 1px solid #fff;
    background-color: #ffeb3b;
}

.woocommerce-message a:hover, .woocommerce-error a:hover {background-color: #499800; color: #fff !important;}

.woocommerce-info a {color: #fff !important;}

.woocommerce-message {background-color: rgba(148, 225, 0, 0.9);}

.woocommerce-error {background-color: rgba(244, 67, 54, 0.9);}

.woocommerce-error li {list-style: none;}

.woocommerce-error:before, .woocommerce-info:before, .woocommerce-message:before {
    font-family: WooCommerce;
    content: "\e028";
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 25px;
    color: #fff;
}

.woocommerce-error:before {content: "\e016";}

Поделиться в соц. сетях: