Product Badges

Installation

↑ Back to top

Download, install and activate the extension.

It is strongly recommended you initially use a staging/development environment and test the extension before use on a production website.

If you haven’t already, connect your store to your Woo.com account. This ensures you get extension update notifications when available.

Quick start guide

↑ Back to top

• Perform the installation steps above
• From the Products menu select Badges
• Create a new badge by clicking Add New
• Set the badge and display options as required
• Save the badge, it will now be displayed throughout your store on products where the display options match

Dashboard

↑ Back to top

Manage all your product badges in the dashboard, this can be accessed via the Products menu by clicking on Badges.

Badges

↑ Back to top

From the badge dashboard above you can add or edit badges. Each badge has several options which can be set to choose/style the badge and where it should display.

Types

↑ Back to top

There are a number of different badge types you can choose from.

• Image library – use one of the pre-made badges
• Image custom – upload a custom badge image
• Countdown – create a badge which counts down to a specific date/time
• Text – create a text badge badge
• Code – use custom code to create a badge

Image libary

Allows you to select from all the pre-made badges included in the extension, upon selecting this option you can also filter the pre-made badges using the filter fields at the bottom left.

Image custom

Allows you to upload your own custom image to use as a badge, when selecting this option use the Badge image custom meta box to upload your image.

Countdown

Allows you to create badge with a countdown timer and your own text prefix/suffix and set various styling options.

Text

Allows you to create a badge with your own text and set various styling options.

Code

Allows you to insert your own code for a badge, this option requires coding knowledge.

Position

↑ Back to top

The position options allow you to place the badge in a specific location.

• Top left
• Top right
• Bottom left
• Bottom right

Offset

↑ Back to top

By default badges are displayed at the edge of the image, you may wish to use the offset option to add a gap between the edge of the product image and the badge. Enter the offset size in pixels e.g. 10 would add a 10px gap between the badge on the edge of the image.

Size

↑ Back to top

You can control the size of your badge by entering a width in pixels, the height is automatically calculated from the width ensuring the proportions of the badge remain consistent. All our pre-made badges are in SVG format and can be resized to any size without losing quality.

Visibility

↑ Back to top

Select where the badges should appear in your store. Product pages are individual product pages, product loops are the display of products on the shop, category and search pages in addition to areas such as related products and standard WooCommerce product blocks.

• All
• Product pages
• Product loops

Products

↑ Back to top

Select which products the badge should be assigned to. You can choose it to be assigned to all products, just sale products, non-sale products, out of stock products, on backorder products, featured products or even all products within specific categories, that have specific tags or just manually select specific products.

• All
• Sale
• Non-sale
• Out of stock
• On backorder
• Featured
• Specific

Order

↑ Back to top

By default only one badge will display on a product even if multiple badges are assigned to it. To prioritse which badge should be displayed you use the Order option. Badges are displayed in priority order, the higher the number you enter the higher priority it has for display over other badges.

If you would like multiple badges to be displayed where assigned on products you can enable this using the option in WooCommerce > Settings > Products > Product badges. Note: when multiple badges per product is enabled the order assigned is not taken into account.

Settings

↑ Back to top

There are some global settings which you can configured if required including compatibility mode and enabling multiple badges per product. These can be found in WooCommerce > Settings > Products > Product badges.

Screen sizes

↑ Back to top

• Frontend: Where elements may be displayed they will fit within the screen width
• Backend: Where interfaces may be displayed it is recommended to use a desktop computer with a resolution of 1920×1080 or higher. For lower resolutions any interfaces will attempt to fit within the screen width but some elements may be close together and/or larger than the screen width

FAQs

↑ Back to top

My badges/product images are not displaying correctly?

↑ Back to top

Firstly ensure the display settings are set correctly and ensure you have cleared all caches (both website cache and in your web browser).

If that does not fix the issue try enabling Compatibility mode via WooCommerce > Settings > Products > Product badges. You can view details about what this setting does under the setting before enabling it.

If this does not solve the issue:

This extension uses the actions and filters which are included within WooCommerce:

• woocommerce_before_shop_loop_item (action hook)
• woocommerce_blocks_product_grid_item_html (filter hook)
• woocommerce_single_product_image_thumbnail_html (filter hook)

These are used and provided by WooCommerce to allow itself and any WooCommerce extension to customize the design of products.

While the removal of these filters is not recommended it could be that your theme, extension or some custom coding has removed or replaced these actions/filters.

If your badges are not displaying then we recommend first asking your theme provider if the above actions/filters are in use, if they aren’t ask for them to be included within the theme as a whole or provide you with some code or a template override to use these actions/filters to allow badges to display.

If they are in use in the theme then it is recommended you deactivate extensions one by one and check the badge display, if it starts working when a specific extension is disabled then it is very likely that extension has removed the actions/filters – ask the extension developer if the above actions/filters have been removed/replaced and if they can be reinstated to allow badges to display.

If the issue is not with your theme or extensions it is likely some custom coding by your developer has removed/replaced the actions/filters – ask your developer if they can be reinstated to allow badges to display.

It is also worth noting to whoever you contact that this extension uses these standard WooCommerce classes to target elements within the page and therefore should remain intact:

• .products
• .product
• .woocommerce-product-gallery__trigger

These classes are used in WooCommerce by standard and would only ever not be used in the event that they have been removed or replaced by a theme, extension or custom coding.

We have found this badge display issue effects a very low number of stores using this extension, however most developers will reinstate the removed or replaced actions/filters when requested.

My badges do not resize to responsive breakpoints?

↑ Back to top

See the responsive information linked from under the width option when adding/editing a badge.

I want to use custom CSS on badges?

↑ Back to top

Every badge has the class wcpb-product-badges-badge which you can target, if you want to target a specific badge there is also an additional class of wcpb-product-badges-badge-xxx where xxx is the ID of the badge. You can determine the badge ID by editing a badge in the dashboard and looking at the URL, you’ll see the ID directly after ?post=.

Existing sale badges are no longer displayed?

↑ Back to top

Product Badges removes the existing sale badges from your products to ensure they do not clash, however you can create a sales badge to replace it using this extension and under your badge’s display options select the sale products option. This offers the same functionality as you had before but now you have control over your sale badges instead of using the standard badge as styled by your theme.

What happens if I have multiple badges assigned to a product?

↑ Back to top

Where there are multiple product badges assigned to the same products (and multiple badges per product is disabled in settings) then the badges are displayed in priority order based on the order field, the higher the number you enter the higher priority it has for display over other badges. If you have the multiple badges per product setting enabled then this order will be ignored and multiple badges will be displayed on the same product.

My custom badge image is not working?

↑ Back to top

Ensure you have selected the Image custom option when creating/editing a badge, this must be selected for your uploaded badge image to be displayed.

Is it compatible with a specific theme?

↑ Back to top

This extension will generally be compatible with most themes. There may be a small number of themes that are fully or partially incompatible due to clashes in functionality and/or if the theme has removed or adapted core WooCommerce functionality. If you would like to know if a specific theme will be compatible before purchase then please contact us and we can advise, it may not be possible for us to determine this e.g. if the theme requires a license and/or several configuration steps. In this scenario you are welcome to purchase and test this extension with the theme and if there is a a compatibility issue you can take advantage of the refund policy for this extension.

Is it compatible with a specific extension/plugin?

↑ Back to top

This extension will generally be compatible with most extensions/plugins. There may be a small number of extensions/plugins that are fully or partially incompatible due to clashes in functionality and/or if the extension/plugin has removed or adapted core WooCommerce functionality. If you would like to know if a specific extension/plugin will be compatible before purchase then please contact us and we can advise, it may not be possible for us to determine this e.g. if the extension/plugin requires a license and/or several configuration steps. In this scenario you are welcome to purchase and test this extension with the other extension/plugin and if there is a a compatibility issue you can take advantage of the refund policy for this extension.

Is it compatible with a specific page builder?

↑ Back to top

This extension will generally be compatible with most page builders. There may be a small number of page builders that are fully or partially incompatible due to clashes in functionality and/or if the page builder has removed or adapted core WooCommerce functionality. If you would like to know if a specific page builder will be compatible before purchase then please contact us and we can advise, it may not be possible for us to determine this e.g. if the page builder requires a license and/or several configuration steps. In this scenario you are welcome to purchase and test this extension with the page builder and if there is a a compatibility issue you can take advantage of the refund policy for this extension.

Support

↑ Back to top

If you need any further assistance with this extension please contact us. Please note that extension support does not include providing assistance with any custom development requirements as per the WooCommerce Support Policy.