Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flatsome Theme - Customize Success & Error Messages / Notices (Floating) & Hide Success Messages Completely & Make Notices disappear after 15 seconds
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment