2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. Plugins
  3. WooCommerce
  4. Extensions

Product Badges

Getting started ↑ Back to top

  1. Install and activate the extension
  2. In your WordPress dashboard go to Products > Badges
  3. Click Add New to create a new product badge
  4. Choose the options you require (see descriptions below) and once done save your badge
  5. The product badge(s) will now display around your store based on your badge display options

Badges/product images not displaying? ↑ Back to top

Please see this FAQ.

Badge ↑ Back to top

Types ↑ Back to top

There are a number of different badge types:

Image library

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.

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 at the top left, top right, bottom left or bottom right of your product images.

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.

Display ↑ Back to top

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 all standard WooCommerce product blocks (except the “All Products” block as this does not include a filter for customisation by WooCommerce extensions).

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 or individual products.

Attributes ↑ Back to top

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 attribute order assigned is not taken into account.

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 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:

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

Since installing product badges my original “on sale” badges are no longer displaying? ↑ 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.

My “on sale” badge position clashes with my product badges? ↑ Back to top

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.

What happens if I have more than 1 badge assigned to a product? ↑ Back to top

Where there are multiple product badges assigned to the same products 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.

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.

I have added a custom badge image using the uploader on the right when editing my badge but it doesn’t appear on the site? ↑ Back to top

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.

The bottom left/bottom right position is going outside my product images or is covered? ↑ Back to top

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:

Will you be adding more pre-made badges? ↑ Back to top

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.

Are there any restrictions on the image file format for custom uploaded badge images? ↑ Back to top

You can upload a custom badge image in any image file format which WordPress currently supports via it’s default media uploader.

How do I get multiple badges to display on products instead of one? ↑ Back to top

Enable the Multiple badges per product setting in WooCommerce > Settings > Products > Product badges.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment