Flatsome Theme - Customize Success & Error Messages / Notices (Floating) & Hide Success Messages Completely & Make Notices disappear after 15 seconds

flatsome-customize-woocommerce-notices

CSS FOR CUSTOMIZING WOOCOMMERCE MESSAGES

/*---------------------------------------------*/
/*Make Woocommerce Messages Float Above Content*/
/*---------------------------------------------*/

.woocommerce-notices-wrapper {
    position:fixed;
    top:30%;
    left:50%;
    margin-left:-150px;
    width:300px;
    z-index: 9999;
    background:white;
    border-radius:10px;
    border:1px:solid;
    text-align:center;
}

.woocommerce-error {
    position:fixed;
    top:10%;
    left:50%;
    margin-left:-150px;
    width:300px;
    z-index:9999
 }

.message-container {
    border-radius:10px;
    border-style:solid;
    border-color:#000;
    border-width:2px 2px 2px 2px
}

/*---------------------------------------------------*/
/*Make Woocommerce Notices Disappear After 15 Seconds*/
/*---------------------------------------------------*/
.woocommerce-notices-wrapper {
    opacity:0;
    -moz-animation:notices 15s;
    -webkit-animation:notices 15s;
    -o-animation:notices 15s;
    animation:notices 15s;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}
@keyframes notices {
   0% { opacity:1} 
   15% { opacity:1} 
   30% { opacity:1} 
   45% { opacity:1} 
   60% { opacity:1}
   75% { opacity:1}
   100% { opacity:0} }


MAKE ALL SUCCESS NOTICES INVISIBLE - ONLY AFFECTS SUCCESS AND NOT ERROR or NOTICE MESSAGES
This is especially useful for annoying coupon added / removed messages and also product was added to cart messages
- Copy flatsome/woocommerce/notices/success.php to your child theme
- edit success.php and add an x before the classname (line 29)
- making the classname xwoocommerce-message message-wrapper

/*---------------------------------*/
/*Hide Woocommerce Success Messages*/
/*---------------------------------*/
.message-container.container.success-color {
    display: none;
}