- Install and activate the extension
- In your WordPress dashboard go to Products > Badges
- Click Add New to create a new product badge
- Choose the options you require (see descriptions below) and once done save your badge
- The product badge(s) will now display around your store based on your badge display options
Please see this FAQ.
There are a number of different badge types:
Allows you to select from all the pre-made badges we have included in the extension, upon selecting this option you can also filter the pre-made badges using the filter fields at the bottom left.
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.
Allows you to create badge with a countdown timer and your own text prefix/suffix and set various styling options.
Allows you to create a badge with your own text and set various styling options.
Allows you to insert your own code for a badge, this option requires coding knowledge.
The position options allow you to place the badge at the top left, top right, bottom left or bottom right of your product images.
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.
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.
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 all standard WooCommerce product blocks (except the “All Products” block as this does not include a filter for customisation by WooCommerce extensions).
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 or individual products.
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 attribute order assigned is not taken into account.
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 find more details about what this setting does under the setting before enabling it)
If this does not solve the issue read on:
This extensions uses the actions and filters which are included within WooCommerce by standard:
- woocommerce_before_shop_loop_item (action)
- woocommerce_blocks_product_grid_item_html (filter)
- woocommerce_single_product_image_thumbnail_html (filter)
These are used and provided by WooCommerce to allow itself and any WooCommerce extension to customise product display.
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:
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.
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.
We remove existing “on sale” badges from WooCommerce – see above question, however your theme may add it’s own custom “on sale” badges (and sometimes some others) to products, if you have these we recommend hiding them with CSS or looking for an option to disable them within your theme and recreating sale badges using our extension to avoid clashes, see the above question for further details on how to setup a sale badge with this extension.
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. When adding a badge you will notice an “Order” field – see the attributes information for further details, the higher the number you enter the higher priority it has for display over other badges. If you have multiple badges per product this order will be ignored and multiple badges will be displayed.
Badges will appear on products in all standard WooCommerce product blocks except the “All Products” block as this does not include a filter for customisation by WooCommerce extensions, see the visibility information above for further details. Note that to see badges within product blocks you need to set the badge visibility to all or product loops.
Ensure you have selected the “Badge > Image custom” option from the Badge section when editing your badge, this must be selected for your uploaded badge image to be used.
Some themes may add a box with the product title and buy buttons and overlay this over the bottom of the product image, in this scenario that box may overlap your bottom left/right badges, discuss this with your theme developer and they may provide you with some code to prioritise the badges above the box they have added – or use the top left/right positions instead. Below is an example of a badge being covered due to a box overlapping the product image added by a theme:
Yes, we periodically add more pre-made badges to the extension, therefore you should keep the extension updated to ensure you receive all the latest badges we’ve added.
You can upload a custom badge image in any image file format which WordPress currently supports via it’s default media uploader.
Enable the Multiple badges per product setting in WooCommerce > Settings > Products > Product badges.