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 WooCommerce.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
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.
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.
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.
- 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.
- Out of stock
- On backorder
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.
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 extensions uses the actions and filters which are included within WooCommerce by standard:
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.
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.
Do badges appear on products in WooCommerce product blocks?↑ Back to top
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.
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 30 day 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 30 day 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 30 day 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.