QODE Badges for WooCommerce


1. Getting Started

Hi, and welcome to the QODE Badges for WooCommerce User Guide. The User Guide covers all the information needed to use the QODE Badges for WooCommerce plugin with your theme to build an amazing eCommerce website.

If you need any additional assistance while using our plugin, you can always submit a topic to the support forum at wordpress.org/support/plugin/qode-badges-for-woocommerce and our support team will be glad to help you out. You can also send us an email at [email protected]

You can navigate through different sections of the User Guide by clicking on the links in the menu to the left of your screen. You will also notice that we have highlighted certain parts of the text throughout the User Guide, such as important pieces of information and useful tips.

This user guide covers the full set of options that the plugin provides, including both its Free and Premium versions. 

The QODE Badges for WooCommerce is a plugin developed to let you highlight sales, promotions, and key product features by displaying practical, easily adjustable predefined or custom product badges over product images or beneath them. 

The plugin is designed to work in tandem with the free WooCommerce plugin, so in order to ensure proper plugin functioning, please make sure you have installed and activated your copy of the WooCommerce plugin. 

Installing the QODE Badges for WooCommerce plugin

First off, here's a list of minimum requirements as well as recommended hosting parameters for running QODE Badges for WooCommerce plugin: 

Minimum Requirements

Recommended Hosting Parameters

There are two ways you can go about installing the QODE Badges for WooCommerce plugin: 

Installing From Your WordPress Dashboard

  1. Navigate to your WordPress Dashboard -> Plugins -> Add New
  2. Search for QODE Badges for WooCommerce
  3. Install and Activate Qode Badges from your Plugins page.

Installing Directly From wordpress.org

  1. Locate and download QODE Badges for WooCommerce on wordpress.org
  2. Upload the qode-badges-for-woocommerce directory to your ‘/wp-content/plugins/’ directory, using your preferred method (ftp, sftp, scp, etc…)
  3. Install and Activate QODE Badges for WooCommerce from your Plugins page.

In the following sections of the User Guide you'll find a comprehensive overview of all the settings available in the plugin's QODE Plugins for WooCommerce section of your WordPress admin panel once you have installed and activated the QODE Badges for WooCommerces plugin. 

2. Global

In the Global section of the plugin options you are presented with options for making general adjustments to the plugin functionalities. 

To access these settings, simply navigate to Qode Plugins for WooCommerce > Badges > Global.

First off, this is where you can choose whether you wish to hide the default WooCommerce Sale Badge by default, and you can choose if you wish to display badges in widgets. In addition to this, you can also hide badges for users accessing your website from mobile devices.  

Next up, you can choose how you wish to replace special codes for product variations and grouped product types; you can either show maximum discount for all items, or minimum discount for all items. 

After this, you'll get presented with options for inputting lists of actions for rendering On Image badges to, as well as the Below Image badges. 

Similarly, you can also input lists of actions for removing the rendering of On Image and Below Image badges to. 

The last option found here lets you enable badge rendering through JS on default pages. You can enable this option to fix any possible issues with badge rendering on default pages. 

3. All Badges

This section provides you with a comprehensive overview of all previously created badges, including their titles, types, their appearance previews, as well as dates of publication.

Additionally, you can look up specific previously created badges by typing their name in the SEARCH BADGES field found at the top of the list. 

You can also perform bulk edit or move to trash actions for badges in the list, as well as filter badges according to their date of creation. 

Most notably, you can add new badges here, and while doing so, you get presented with a selection of options related to the badges and their appearance. 

To access these settings, simply navigate to Qode Plugins for WooCommerce > Badges > All Badges.

 

To add a new badge, simply click the ADD NEW BADGE button found at the top of the page.

After you've clicked this button, you'll be presented with options for creating your badge.

On the right side of the screen you'll be presented with a Badge Preview field, where you'll be able to see how the badge you are currently setting up looks in real time. 

The first option when adding a new badge lets you input a title for the badge. 

Following this, you can choose a badge type you wish to add. You can choose between textual, image, HTML, SVG, and Timer badge types. 

Depending on the type of the badge you wish to add, the specific options found below may differ. 

 

Textual Badge

Textual Settings

First off, you have the option to add the textual content you wish to display using either Visual or Text input fields. 

You can also set a color for the text, adjust the text alignment, pick a text flip type you wish to use, adjust the degree of text rotation within the badge, and you can optionally display an icon inside the badge. 

In the event that you enable displaying the textual badge icon, you can input a path for the SVG you wish to use, adjust the icon stroke color, fill color, size in pixels, choose where you wish to position the icon relative to badge text, and adjust the size for the icon gap. 

 

Position Settings

Here you can choose whether the new badge will be displayed On Image or Below Image. 

If you select the On Image badge display type, you can fine-tune the vertical and horizontal position for the badge. You can choose between three placements each for both horizontal and vertical positions. In addition to this, you can input values for both vertical and horizontal badge offsets. 

If you pick the Below Image badge type, you can adjust the margins for the badge. 

For both badge types you have options for choosing a badge flip style, the degree of rotation, opacity, and finally you can input a value for the badge Z index. 

 

Size Settings

This is where you can configure the badge width, height, as well as padding. You can perform the same for badge size on devices with screens smaller than 880px. 

 

Color Settings 

Here you can set a background color for the badge. 

Additionally, you can enable gradient color for badges. In the event that you do so, you can set a gradient end color, gradient start color, as well as end gradient percent and gradient degree. 

 

Border Settings
 

This set of options allows you to adjust badge borders. You can set a border color, width, pick a border style, and input values for border radius here. 

 

Box Shadow Settings  

Here you can make adjustments to the badge box shadow. You have the option to set the box shadow color, X offset, Y offset, blur, as well as spread. 

 

Animation Settings

The final set of options found here lets you choose an animation style for the badge. There are five animation styles to choose from; shake, horizontal shake, vertical shake, flash, and swing. 

In addition to this, you can configure the animation duration and start delay in milliseconds, as well as pick a repeat style for the badge animation. 

 

Image Badge

Image Settings 
 

First off, here you can choose whether you wish to use one of the predefined badges that come with the plugin, or use a custom badge of your own. 

 

Position Settings

Here you can choose whether the new badge will be displayed On Image or Below Image. 

If you select the On Image badge display type, you can fine-tune the vertical and horizontal position for the badge. You can choose between three placements each for both horizontal and vertical positions. In addition to this, you can input values for both vertical and horizontal badge offsets. 

If you pick the Below Image badge type, you can adjust the margins for the badge. 

For both badge types you have options for choosing a badge flip style, the degree of rotation, opacity, and finally you can input a value for the badge Z index. 

 

Size Settings

This is where you can configure the badge width, height, as well as padding. You can perform the same for badge size on devices with screens smaller than 880px. 

 

Color Settings

Here you can set a background color for the badge. 

Additionally, you can enable gradient color for badges. In the event that you do so, you can set a gradient end color, gradient start color, as well as end gradient percent and gradient degree. 

 

Border Settings

This set of options allows you to adjust badge borders. You can set a border color, width, pick a border style, and input values for border radius here. 

 

Box Shadow Settings

Here you can make adjustments to the badge box shadow. You have the option to set the box shadow color, X offset, Y offset, blur, as well as spread. 

 

Animation Settings

The final set of options found here lets you choose an animation style for the badge. There are five animation styles to choose from; shake, horizontal shake, vertical shake, flash, and swing. 

In addition to this, you can configure the animation duration and start delay in milliseconds, as well as pick a repeat style for the badge animation. 

 

HTML Badge

Html Settings

Here you can choose a HTML template you wish to use for your badge. 

 

Textual Settings

Here you have the option to add the textual content you wish to display in your badge using either Visual or Text input fields. 

You can also set a color for the text, adjust the text alignment, pick a text flip type you wish to use, as well as adjust the degree of text rotation within the badge. 

 

Position Settings

Here you can choose whether the new badge will be displayed On Image or Below Image. 

If you select the On Image badge display type, you can fine-tune the vertical and horizontal position for the badge. You can choose between three placements each for both horizontal and vertical positions. In addition to this, you can input values for both vertical and horizontal badge offsets. 

If you pick the Below Image badge type, you can adjust the margins for the badge. 

For both badge types you have options for choosing a badge flip style, the degree of rotation, opacity, and finally you can input a value for the badge Z index. 

 

Size Settings

This is where you can configure the badge width, height, as well as padding. You can perform the same for badge size on devices with screens smaller than 880px. 

 

Color Settings

Here you can set a background color for the badge. 

Additionally, you can enable gradient color for badges. In the event that you do so, you can set a gradient end color, gradient start color, as well as end gradient percent and gradient degree. 

 

Animation Settings

The final set of options found here lets you choose an animation style for the badge. There are five animation styles to choose from; shake, horizontal shake, vertical shake, flash, and swing. 

In addition to this, you can configure the animation duration and start delay in milliseconds, as well as pick a repeat style for the badge animation. 

 

SVG Badge

SVG Settings

Here you can choose a SVG template you wish to use for your badge. 

In addition to this, you can set a SVG color you wish to use. 

 

Textual Settings

Here you have the option to add the textual content you wish to display in your badge using either Visual or Text input fields. 

You can also set a color for the text, adjust the text alignment, pick a text flip type you wish to use, as well as adjust the degree of text rotation within the badge. 

 

Position Settings

Here you can choose whether the new badge will be displayed On Image or Below Image. 

If you select the On Image badge display type, you can fine-tune the vertical and horizontal position for the badge. You can choose between three placements each for both horizontal and vertical positions. In addition to this, you can input values for both vertical and horizontal badge offsets. 

If you pick the Below Image badge type, you can adjust the margins for the badge. 

For both badge types you have options for choosing a badge flip style, the degree of rotation, opacity, and finally you can input a value for the badge Z index. 

 

Size Settings

This is where you can configure the badge width and padding. You can perform the same for badge size on devices with screens smaller than 880px. 

 

Animation Settings

The final set of options found here lets you choose an animation style for the badge. There are five animation styles to choose from; shake, horizontal shake, vertical shake, flash, and swing. 

In addition to this, you can configure the animation duration and start delay in milliseconds, as well as pick a repeat style for the badge animation. 

 

Timer Badge

Timer Settings

The first option found here lets you choose between using Custom Date and Sale End Date for your badge timer. 

If you select the Timer by Sale End Date, you get presented with a number of fields for inputting different labels for the timer. These include singular and plural labels for timer day, hour, minute, and second. 

In the event that you opt for using Timer by Custom Date, you can input the date you wish the timer to count down to, in addition to being able to input singular and plural labels for timer day, hour, minute, and second. 

Regardless of the type of the timer you select, here you can pick the timer badge orientation, adjust the size of the space between units within the timer, and configure the minimum width for timer segments. 

 

Digits Style

The set of options found here let you make adjustments to timer digits and their appearance. 

First off, you can set the digit color, font size, font weight, pick a font style, and choose whether you wish to display labels in the timer. 

 

Labels Style

If you enable showing labels inside the timer badge, you can also set a color for the label, as well as set a font size, font weight, and pick a font style for the label text. 

 

Separator Style

Here you can adjust the timer separator and its appearance. 

You have the option to pick from three characters you'd like to use for the timer separator, set the separator color, font size, vertical offset, and input a value for the size of the gap between the badge text and badge date. 

 

Textual Settings

Here you have the option to add the textual content you wish to display in your badge using either Visual or Text input fields. 

You can also set a color for the text, adjust the text alignment, pick a text flip type you wish to use, as well as adjust the degree of text rotation within the badge. 

Finally, you can choose whether you wish to hide the timer badge on screens smaller than 680px. 

 

Position Settings

Here you can choose whether the new badge will be displayed On Image or Below Image. 

If you select the On Image badge display type, you can fine-tune the vertical and horizontal position for the badge. You can choose between three placements each for both horizontal and vertical positions. In addition to this, you can input values for both vertical and horizontal badge offsets. 

If you pick the Below Image badge type, you can adjust the margins for the badge. 

For both badge types you have options for choosing a badge flip style, the degree of rotation, opacity, and finally you can input a value for the badge Z index. 

 

Size Settings

This is where you can configure the badge padding, and you can perform the same for devices with screens smaller than 880px. 

 

Color Settings

Here you can set a background color for the badge. 

Additionally, you can enable gradient color for badges. In the event that you do so, you can set a gradient end color, gradient start color, as well as end gradient percent and gradient degree. 

 

Border Settings

This set of options allows you to adjust badge borders. You can set a border color, width, pick a border style, and input values for border radius here. 

 

Box Shadow Settings

Here you can make adjustments to the badge box shadow. You have the option to set the box shadow color, X offset, Y offset, blur, as well as spread. 

 

Animation Settings

The final set of options found here lets you choose an animation style for the badge. There are five animation styles to choose from; shake, horizontal shake, vertical shake, flash, and swing. 

In addition to this, you can configure the animation duration and start delay in milliseconds, as well as pick a repeat style for the badge animation. 

4. All Badge Rules

This section provides you with a comprehensive overview of all previously created badge rules, including their titles and dates of publication.

Additionally, you can look up specific previously created badge rules by typing their name in the SEARCH BADGE RULES field found at the top of the list.

 

You can also perform bulk edit or move to trash actions for badge rules in the list, as well as filter badge rules according to their date of creation. 

This is also where you can add new badge rules, and while doing so, you get presented with a selection of options for setting up various badge rules. 

To access these settings, simply navigate to Qode Plugins for WooCommerce > Badges > All Badge Rules.

 

To add a new badge rule, simply click the ADD NEW BADGE RULE button found at the top of the page.

After you've clicked this button, you'll be presented with options for creating your badge rule.

 

First off, here you can choose the specific previously created badge or badges you wish to add the rule to. 

Following this, you can choose whether you wish to group position the badges affected by the rule.

In the event that you choose to do so, you can choose whether the badges encompassed by this rule will be displayed On Image or Below Image. 

If you select the On Image badge display type, you can fine-tune the vertical and horizontal position for the badge. You can choose between three placements each for both horizontal and vertical positions. In addition to this, you can input values for both vertical and horizontal badge offsets. 

If you pick the Below Image badge type, you can adjust the margins for the badge. 

Regardless of the badge positioning type you select, you can choose how you wish the badge stacking to be performed (horizontal or vertical) for both regular responsive settings and devices with screens below 680px. 

You can perform the same when it comes to badge alignment as well as the size of the gap between badges themselves. 

The final badge group positioninig option lets you input a value for the badge Z index. 

Following these settings, you can choose where you wish to display the badge affected by this rule. The badge can be either shown on all products, on sale products, in stock products, out of stock products, and low stock products. 

After this, you can select specific products you wish to omit the badge from. 

Similarly, you can select specific products you wish to display the badge on regardless of any other conditions you may have set up. 

Additionally, you can choose to show the badges on products visible on shop and search pages, shop pages only, search pages only, or hidden products. 

The option that follows lets you turn on badge scheduling, which lets you input a start and end date for badge appearance.

 

The final option found here allows you to choose which users you wish to display the badges affected by the rule to. 

You can display the badges to all users, or you can display the badges to specific user roles or user IDs only.