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.
Vertical Menu and Mobile Tabs in Flatsome Theme
Create a Custom 404 Page in Flatsome Theme
Optimising your Product Category Page for WooCommerce
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.