Get access to Flatsome shortcode. Sign up for free
Let’s spice up your Flatsome WooCommerce shop with menu labels and product tags
CSS Code (Label designs)
.label-new.menu-item>a:after, .label-hot.menu-item>a:after, .label-sale.menu-item>a:after, .label-popular.menu-item>a:after, .label-custom.menu-item>a:after {
text-transform: uppercase;
font-size: 9px;
font-weight: bolder;
padding: 4px;
border-radius: 2px;
line-height: 12px;
top: 1px;
letter-spacing: 0.05em;
margin-left: 4px;
display: inline-block;
position: relative;
}
.label-new.menu-item>a:after {
content: 'Nieuw' !important; /* Change Text */
background-color: #6168F2;  /* Change BG color */
color: #FFFFFF; /* Change Text color */
}
.label-hot.menu-item>a:after {
content: 'Hot' !important;
background-color: #35CE9D;
color: #FFFFFF;
}
.label-sale.menu-item>a:after {
content: 'Sale' !important;
background-color: #FC6070;
color: #FFFFFF;
}
.label-custom.menu-item > a:after {
content: 'Custom';
background-color: #262626;
color: #FFFFFF;
}
		 
					 ">
">							
More popular tutorials
Discover more articles and tutorials to help you build better.
How to use the Header Builder in Flatsome Theme
How to use Presets & Templates in Flatsome Theme
Custom Icons in Flatsome Theme
Black Friday ⚡ Limited offer 50%-Off
Look better. Sell Better. With our designs.
Beautifully designed and easy customizable Flatsome demos for your WooCommerce shop. Invest in your online future.