View Product Page

Update to version 2.0

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.

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.Create a new badge

Now choose the badge type from text, image, CSS, and advanced.

Choose the badge type

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.

Badge list

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.

Badge list options

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.

Create a text badge

Now you can start setting all the available options through the built-in editor:

Text badge creation

  • 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;

Text badge options

Text badge options

  • 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;

Flip-mirror text optionBadge position

Text badge px 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 %.

Text badge fixed position

  • 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

  • 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 preview

 

Text badge on frontend

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.

Create an image badge

The plugin includes a library with ready-to-use badges as well as the possibility to upload custom images.

Badge library

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.

Custom image

In addition to the images available in the Library tab, you can also download extra badges from Get more badges.

Extra 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.

NOTE: You can download and use extra badges only if you have activated a valid license key. You can enter the key in YITH License activation.

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

Image badge px 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 %.

Image badge fixed position

  • 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

  • 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 preview

Image badge on frontend

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.

Create a CSS badge

Choose the image for your badge from those available in the library or extra badges.

Choose CSS badge image

You can download extra badges from Get more badges.

CSS extra 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.

NOTE: You can download and use extra badges only if you have activated a valid license key. You can enter the key in YITH License activation.

Now you can start setting all the available options through the built-in editor:

.CSS badge optionsCSS badge options

  • 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

CSS badge px 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 %.

CSS badge fixed position

  • 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

  • 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 preview

CSS badge on frontend

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.

Create an advanced badge

Choose the image for your badge from those available in the library or extra badges.

Choose advanced badge image

You can also download extra badges from Get more badges.

Advanced extra 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.

NOTE: You can download and use extra badges only if you have activated a valid license key. You can enter the key in YITH License activation.

 

For almost all these badges you can choose whether to show a percent or a fixed price discount:

Show amount or percentage discountThis 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.

No option for badges with saving amount

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:

Product with advanced badge

 

Other options are:

Advanced badge options

  • 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

Advanced badge px 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 %.

Advanced badge fixed position

  • 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

  • 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 preview

Advanced badge on frontend

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.

Rotation option

Flip Text

You can flip the text vertically, as a mirror image, horizontally, or both.

Example 1

Flip text option

Example 2

Flip text example

 

 

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.

WPML compatibility

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:

Badge rule list

All the created badge rules will show in the tab Badge rules of the plugin panel.

Badge rule list

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 rule list options

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.

Create products badge rules

Now you can start configuring the options to create your rule to automatically apply badges to your products.

How to create a badge rule

  • 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 rule options

  • 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.

Badges on recent productsRecent product

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.

Low-stock product badgesLow stock product

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.

Users

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”.

Assign badge from product edit page

You can also schedule when the badge will show by specifying the start and end date.

Schedule badge

You can also assign and remove the badge(s) from the product quick edit as shown below.

Badges in quick edit

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.