If you are already using YITH Badge Management, when updating to version 2.0, all the badges you have created will be automatically created in background. This action requires a few minutes after which your badges will show in the tab Badges and Badge rules. During the creation of the rules, the list will be empty but you will be able to create a new rule if needed.
Premium version settings
Configure badge
To create a new badge to apply to the products of your shop, click on the button “Create badge” that you find in the “Badges” tab of the plugin panel.
Now choose the badge type from text, image, CSS, and advanced.
We’ll analyze the different badge types in the following sections:
Badge list
All the badges created will show in the tab Badges of the plugin panel.
For each badge, you can decide to enable/disable it, edit it, clone it or delete it.
From the same section, you can also search badges through the related field and apply bulk actions to enable, disable, and delete your badges.
Text badge
This type of badge is entirely formed of a text label, for which you can customize colors, size, width, height, position, and more.
To create your text badge, start by entering a name to identify it (N.B. this is a required field) then select Text from the dropdown in Badge type.
Now you can start setting all the available options through the built-in editor:
- Text: here, you can customize the text style (font, size, color, alignment, etc.);
- Background color: choose the color of the text background;
- Size (px): select height and width of the badge;
- Padding: set the badge content padding (top, right, bottom, left) in px or %;
- Border radius: set the badge border radius (top-left, top-right, bottom-right, bottom-left) in px or %;
- Opacity (%): set the percentage of opacity for the badge. Min. 0 = transparent; max 100 = solid color;
- Rotation: select the values to rotate the badge;
- Flip/Mirror text: enable if you want to apply a mirror effect on the text. If enabled, you can choose how to flip it as shown below;
Badge position
- Set position: choose how to set the badge position in the product image from in px or % and fixed. By selecting in px or %, you will have the following options:
- Anchor Point: select the anchor point for the badge (top left, top right, bottom, left, bottom right). E.g. in the image above, we have selected bottom right;
- Position: based on the selected anchor point, the position will automatically show two options (in this case bottom and right) and their values. Adjust them according to your needs in px or %;
- Margin: based on the selected anchor point, the margin will automatically show two options (in this case bottom and right) and their values. Adjust them according to your needs in px or %.
- Set position: choose how to set the badge position in the product image from in px or % and fixed. By selecting fixed, you will have the following options:
- Position: choose the badge position from top, middle or bottom. E.g. in the image above, we have selected bottom;
- Alignment: choose the badge alignment from left, center or right. E.g. in the image above, we have selected right;
- Margin: based on the previous selections, the margin will automatically show two options (in this case bottom and right) and their values. Adjust them according to your needs in px or %.
- Scale on mobile: insert the value to scale the badge on mobile devices. Default value: 1.
Preview
Any of the above option settings will reflect in the preview box on the right so you will be able to see in real-time the badge you are creating and apply any necessary adjustments. To move the badge above the product image, you can use drag and drop. When applying this action, the position will be automatically set to in px or % and the values will update based on where you’re moving the badge.
Text badge on frontend
Image badge
Image badges give you the opportunity to choose among a series of ready badges or to upload a customized one.
To create your image badge, start by entering a name to identify it (N.B. this is a required field) then select Image from the dropdown in Badge type.
The plugin includes a library with ready-to-use badges as well as the possibility to upload custom images.
When using a custom image, you can set the badge width through the related option Width (px). For custom images, we recommend using vector graphics format.
In addition to the images available in the Library tab, you can also download extra badges from Get more badges.
Here, you can either download them all or only those you want to use through the related buttons that will add the badges to your library.
Other options are:
- Opacity (%): set the percentage of opacity for the badge. Min. 0 = transparent; max 100 = solid color;
- Rotation: select the values to rotate the badge;
Badge position
- Set Position: choose how to set the badge position in the product image from in px or % and fixed. By selecting in px or %, you will have the following options:
- Anchor Point: select the anchor point for the badge (top left, top right, bottom, left, bottom right). E.g. in the image above, we have selected top right;
- Position: based on the selected anchor point, the position will automatically show two options (in this case top and right) and their values. Adjust them according to your needs in px or %;
- Margin: based on the selected anchor point, the margin will automatically show two options (in this case top and right) and their values. Adjust them according to your needs in px or %.
- Set position: choose how to set the badge position in the product image from in px or % and fixed. By selecting fixed, you will have the following options:
- Position: choose the badge position from top, middle or bottom. E.g. in the image above, we have selected top;
- Alignment: choose the badge alignment from left, center or right. E.g. in the image above, we have selected right;
- Margin: based on the previous selections, the margin will automatically show two options (in this case top and right) and their values. Adjust them according to your needs in px or %.
- Scale on mobile: insert the value to scale the badge on mobile devices. Default value: 1.
Preview
Any of the above option settings will reflect in the preview box on the right so you will be able to see in real-time the badge you are creating and apply any necessary adjustments. To move the badge above the product image, you can use drag and drop. When applying this action, the position will be automatically set to in px or % and the values will update based on where you’re moving the badge.
Image badge on frontend
CSS badge
To create your CSS badge, start by entering a name to identify it (N.B. this is a required field) then select CSS from the dropdown in Badge type.
Choose the image for your badge from those available in the library or extra badges.
You can download extra badges from Get more badges.
Here, you can either download them all or only those you want to use through the related buttons that will add the badges to your library.
Now you can start setting all the available options through the built-in editor:
- Text: here, you can customize the text style (font, size, color, alignment, etc.) as you like;
- Background color: choose the color of the badge background;
- Opacity (%): set the percentage of opacity for the badge. Min. 0 = transparent; max 100 = solid color;
- Rotation: select the values to rotate the badge;
- Flip/Mirror text: enable if you want to apply a mirror effect on the text. If enabled, you can choose how to flip it through the option Flip orientation;
Badge position
- Set position: choose how to set the badge position in the product image from in px or % and fixed. By selecting in px or %, you will have the following options:
- Anchor Point: select the anchor point for the badge (top left, top right, bottom, left, bottom right). E.g. in the image above, we have selected top right;
- Position: based on the selected anchor point, the position will automatically show two options (in this case top and right) and their values. Adjust them according to your needs in px or %;
- Margin: based on the selected anchor point, the margin will automatically show two options (in this case top and right) and their values. Adjust them according to your needs in px or %.
- Set position: choose how to set the badge position in the product image from in px or % and fixed. By selecting fixed, you will have the following options:
- Position: choose the badge position from top, middle or bottom. E.g. in the image above, we have selected top;
- Alignment: choose the badge alignment from left, center or right. E.g. in the image above, we have selected right;
- Margin: based on the previous selections, the margin will automatically show two options (in this case top and right) and their values. Adjust them according to your needs in px or %.
- Scale on mobile: insert the value to scale the badge on mobile devices. Default value: 1.
Preview
Any of the above option settings will reflect in the preview box on the right so you will be able to see in real-time the badge you are creating and apply any necessary adjustments. To move the badge above the product image, you can use drag and drop. When applying this action, the position will be automatically set to in px or % and the values will update based on where you’re moving the badge.
CSS badge on frontend
Advanced badge
Advanced badges can be used only for on-sale products and the shown discount percentage or amount is automatically retrieved from values entered for regular price and sale price in the edit product page.
To create your advanced badge, start by entering a name to identify it (N.B. this is a required field) then select Advanced from the dropdown in Badge type.
Choose the image for your badge from those available in the library or extra badges.
You can also download extra badges from Get more badges.
Here, you can either download them all or only those you want to use through the related buttons that will add the badges to your library.
For almost all these badges you can choose whether to show a percent or a fixed price discount:
This option is not available on those badges where you can show both the percentage discount and the saving amount, as you can see in the following example.
Let’s make an example. We’ll set a “regular price” of €10 and a “sale price” of €3 for one of our products. The discount percentage will be 70% and the discounted sum €7. This is what the badge will look like:
Other options are:
- Background color: choose the color of the badge background;
- Text color: choose the color of the badge text;
- Opacity (%): set the percentage of opacity for the badge. Min. 0 = transparent; max 100 = solid color;
- Rotation: select the values to rotate the badge;
- Flip/Mirror text: enable if you want to apply a mirror effect on the text. If enabled, you can choose how to flip it through the option Flip orientation;
Badge position
- Set Position: choose how to set the badge position in the product image from in px or % and fixed. By selecting in px or %, you will have the following options:
- Anchor Point: select the anchor point for the badge (top left, top right, bottom, left, bottom right). E.g. in the image above, we have selected top left;
- Position: based on the selected anchor point, the position will automatically show two options (in this case top and left) and their values. Adjust them according to your needs in px or %;
- Margin: based on the selected anchor point, the margin will automatically show two options (in this case top and left) and their values. Adjust them according to your needs in px or %.
- Set position: choose how to set the badge position in the product image from in px or % and fixed. By selecting fixed, you will have the following options:
- Position: choose the badge position from top, middle or bottom. E.g. in the image above, we have selected middle;
- Alignment: choose the badge alignment from left, center or right. E.g. in the image above, we have selected right;
- Margin: based on the previous selections, the margin will automatically show two options (in this case middle and right) and their values. Adjust them according to your needs in px or %.
- Scale on mobile: insert the value to scale the badge on mobile devices. Default value: 1.
Preview
Any of the above option settings will reflect in the preview box on the right so you will be able to see in real-time the badge you are creating and apply any necessary adjustments. To move the badge above the product image, you can use drag and drop. When applying this action, the position will be automatically set to in px or % and the values will update based on where you’re moving the badge.
Advanced badge on frontend
Rotate and flip text
Rotation
With the rotation option, you can rotate the image like a 3D object. You can rotate it using the three main axes X, Y, and Z. You can either choose to use numbers or´ the slider as shown in the image below.
Flip Text
You can flip the text vertically, as a mirror image, horizontally, or both.
Example 1
Example 2
WPML
This plugin is 100% compatible with WPML.
This means you will be able to get different badges on the same product, according to the language the users are using.
To create a different copy of the badge for one of the languages configured using WPML, access the badge edit page, select the language and click on the “duplicate” button.
From the edit page of the translated badge, you will be able to configure/edit the badge as you usually would.
You can apply the badge to the translated copy of the product by selecting the parent badge both from the product edit page or when creating the badge rules.
How to apply a badge
The plugin allows to automatically assign badges by creating rules that will apply to:
- all products or those with specific conditions such as featured products, with low stock, most recent, etc. ;
- products of a specific category;
- products with specific tags;
- product with specific shipping classes.
Badge rule list
All the created badge rules will show in the tab Badge rules of the plugin panel.
For each badge rule, you can decide to enable/disable it, edit it, clone it or delete it.
From the same section, you can also search badge rules through the related field and apply bulk actions to enable, disable, and delete them.
Badge rules for products
How to create a product badge rule
Go to the tab Badge rules, click on Add badge rule and select the rule type Products badge.
Now you can start configuring the options to create your rule to automatically apply badges to your products.
- Rule name: give a name to the rule you are creating to identify it among the others;
- Active rule: choose whether the rule will be enabled or disabled. This can be changed in the Badge rules list;
- Assign a badge to: select the products to which the rule will apply: all products, only recent products, on-sale, featured, in-stock, out-of-stock or low-stock products, back-order products;
- Exclude products: enable if you want to exclude one or more products from this rule;
- Excluded products: add the products you want to be excluded from the badge rule;
- Badge to assign: select the badge that will be assigned to products of this rule;
-
Schedule rule from: define the start and end date to show the badge.
Recent products badge
To show the badges on recent products only, select Only recent products and enter the number of days to be taken into account to apply the badge. E.g. by inserting the value 5 in Assign badge to product newer than the badge will apply only to products published in the last 5 days.
Low stock products badge
To show the badges only on products with low stock, select Low stock products and enter the quantity to be taken into account to apply the badge. E.g. by inserting the value 3 in Low stock quantity the badge will apply only to products with a stock equal to 3 or lower.
Users
When creating the rule, you will be able to decide the users and/or user roles to whom the badges will be visible. Through the option Show badge to choose whether the badge will be shown to all users or specific users only. Add users and/or user roles in the dedicated fields as shown below.
Assign badges manually
To assign a badge to a specific product of the shop, go to its editing page and add one or more badges you have created from the metabox “Product Badge”.
You can also schedule when the badge will show by specifying the start and end date.
You can also assign and remove the badge(s) from the product quick edit as shown below.
In case you want to hide the badge on the product detail page, enable the option Hide badges in single product pages that you find in the plugin General settings.