Enhance your WooCommerce product cards with custom labels like “Best Seller,” “On Sale,” and “Limited Edition” to grab customer attention and increase conversions. Easily customize label colors, fonts, and placement with a drag-and-drop editor—no coding needed!
General information about the plugin #
The Label Builder plugin by Develux provides additional functionality for your online store, enhancing the standard product card and product page capabilities.
In all online stores built on WooCommerce, product cards are displayed on the following pages:
- Catalog
- On the product page (Upsells)
- On the cart page (Cross-sells)
- May also be displayed on other pages if implemented in the site theme
If your WooCommerce theme has not modified the standard generation of product cards, the full functionality of the plugin will be available. Otherwise, only part of its features will be accessible.
With this plugin, you can perform the following actions:
- Create custom labels or use ready-made ones from our library. You can also use labels created in other graphic programs and saved in the following formats: jpg/jpeg, png, svg, placing them on the product card or page.
- Display additional informational elements in various places on the product card
- Work with the bulk manager, which allows you to assign labels to multiple products using WooCommerce categories and tags, as well as include or exclude specific products
- Create your own library of labels
- Use the general auxiliary features of the plugin
Plugin compatibility #
The plugin is designed to provide additional functionality for your online store built on WooCommerce. It is not compatible with other e-commerce platforms. Our plugin works correctly with WordPress themes developed for WooCommerce, following all requirements and recommendations of the WooCommerce/WordPress developer guidelines.
Important! Our plugin uses standard WooCommerce/WordPress hooks and filters. If your theme or other plugins modify the default behavior of these hooks/filters, the plugin may not function correctly!
Important! Our plugin uses the standard jQuery/jQuery UI library. If your theme or other plugins modify or disable these libraries, the plugin may not function correctly!
Installation and configuration #
The plugin is installed using the standard method provided in WordPress.
In the admin panel, you need to go to the Add New Plugin page.
Using the Upload Plugin button, upload the plugin’s zip archive.
After the plugin installation, it will be ready for use immediately. Additionally, after installation, you will receive ready-to-use elements in the label and timer library.
Video instruction: Installation
Plugin global settings #
On this page you can find general help functions
SVG Settings – Here you can enable support for working with svg files.
By default, support for this extension is disabled.
Default WC labels – here you can disable the standard labels that are displayed in most WooCommerce themes
Video instruction: Plugin global settings
#
Creating and customizing/styling a unique label for a product #
With our tools you can create two types of labels, custom and ready-made in these formats (jpeg/jpg, png, svg).
For the label to appear on the product card, it must be enabled using the “Display label” switch.
Custom label mode #
Where to display label list of options
Only on the product card – the label will be placed exclusively on the product card
Use this label also on product page – label will be placed on the card and product page
Use this label only on product page – the label will be placed exclusively on the product page
Label Text
Label title – field for entering text that will be placed in the label
Writing mode – Here we can change the text orientation
Text Align – you can align the text on the left, right and center
Vertical Align – You can align text along the top and bottom side as well as center.
Font Size – here we specify the text size (rem)
Font Weight – here we specify the text weight
Style – here we specify the text style (normal or italic)
Text Transform – here we can rotate the text inside the label
Additional label text
None – normal static label mode
SKU – a unique product code will appear on the label. Along with this code, you can use additional text that you write in the label title field
Percentage – the label will display the percentage of the discount for the product, if such a discount is set. Along with this code, you can use additional text that you write in the label title field
Out of Stock – in this mode the label will appear automatically when the product is out of stock.
This mode does not add any additional text inside the label, only the text you write will be used
Quantity – The available quantity of the product that you set in the store settings will appear on the label. Along with this code, you can use additional text that you enter in the label title field
Display before label text – the dynamic value will appear before the static text
Display after label text – the dynamic value will appear after the static text
Mono Color – a single color will be used for the text
Gradient – mode in which you can set a gradient (there are no text shadow tools available in this mode)
- Start color – initial color
- End color – final color
- Direction – the direction in which the gradient will be applied
Text Shadow
Shadow X / Shadow Y – the position of the shadow
Color – here you set the color for the shadow
Label Block Styles
Background mono Color – here you set the background color for the label
- Color – background color for the label
- Background Opacity – here you set the opacity for the label color
Background Gradient – here you set the gradient colors for the label
- Start color – initial color
- End color – final color
- Gradient Type – the direction in which the gradient will be applied
- Gradient Opacity – here you set the opacity for the label gradient
Label Width – here you set the width for the label (in pixels or percentage)
Label Height – here you set the height for the label (in pixels or percentage)
Padding X / Padding Y – internal space inside the label
Opacity – transparency of the entire label
Layer order – order of the element (used in cases where several labels or other elements are displayed on the product card)
Transformation
Scale – Proportional label increase
Rotate – here we can rotate the label
Skew / Skew Y – Label skew in both directions
Positioning
This block configures the placement of the label on the product image. By default, the manual object dragging mode is activated.
Manual positioning
Position – here you choose the starting position of the label in relation to the product image
Offset Y / Offset X – additional properties for label positioning
General Border Styles
Border Color – here you set the color for the label frame
Radius – here you set the general rounding for the label
Width – thickness of the frame
Style – here you can choose a style for the frame
Custom Borders – in this mode you can separately style each side of the frame
Label Shadow
Shadow Color – here you set the color for the shadow
X / Y – here you set the shadow positioning
Dispersion – the density of the shadow
Opacity – here we set the opacity for the shadow
Label Icon Styles
Label Icon – here you can add an icon that will be placed in the inside of the label, next to the text you write
Icon width – here you set the icon size
Margin Top – here you set the icon position
Before text / After text – here you choose the placement of the label in relation to the text
Label Tooltip Text – This is a text tooltip that appears when you hover over a label. It is not a mandatory element and will appear when the required text is written.
Tooltip text – a field for entering the text of a hint
Text Align – you can align the text on the left, right and center
Font Size – here we specify the text size (rem, em)
Font Weight – here we specify the text weight
Style – here we specify the text style (normal or italic)
Color – here we specify the text color
Background – here you set the background color for the tooltip
Opacity – here you set the opacity color for the tooltip
Width – here you set the width color for the tooltip, height is set automatically
Padding – the total internal space that is applied around the perimeter
Border Color – Border Color – here we set the color for the frame
Border Width – here we specify the thickness of the frame
Border Style – here we specify the frame style
Border Radius – here we set the radius for the tooltip
Shadow X / Shadow Y – the position of the shadow
Shadow Dispersion – the density of the shadow
Shadow Opacity – here you set the transparency for the shadow
Shadow Color – here you set the color for the shadow
Pseudo Elements – here you can set and customize decorative elements for the label
Use your own label
Video instruction Creating custom label
#
Bulk manager and library of elements #
The Bulk Manager is used to assign labels, timers, and custom blocks to multiple products at once.
You can use:
- Categories
- Tags
- Include or exclude specific products
WooCommerce Categories – the element (label, timer, custom block) will be displayed on all products within this category.
WooCommerce Tags – the element (label, timer, custom block) will be displayed on all products with this tag.
Include products – adding the element (label, timer, custom block) to a specific product.
Exclude products – excludes the element from these products (the element will not be displayed on these products).
#
Library of labels #
Library of labels allows to create labels for the custom cards and assign them to multiple products at once.
You can read more details about creating labels here
Auxiliary functions of the plugin #
Disabling Default WooCommerce Labels
Most themes developed for WooCommerce display the default label. To disable these default labels, use this feature.
Important! ‘Disable WC Labels’ option may not work, it depends on the theme.
Enabling permission to use SVG files
By default, WordPress does not support SVG file format. Here, you can enable support for these files.
