Product Bubbles and Menu Labels in Flatsome Theme

Learn how to setup your own custom product bubbles and menu labels with your own colors and text.

Product Bubbles and Menu Labels in Flatsome Theme" data-src="Product Bubbles and Menu Labels in Flatsome Theme">

Get the best design for your Flatsome shop from $49

95% of the Flatsome shops get more conversion + sales with our designs

See our designs

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)

This free code is locked. 

Sign Up / Login
.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.

Look better. Sell Better. With our designs.

Beautifully designed and easy customizable Flatsome demos for your WooCommerce shop. Invest in your online future.

#1 WooCommerce Designs
This site uses cookies to offer you a better browsing experience.