Posted on

WooCommerce: How to Display Custom Product Badges (e.g. %OFF, NEW, FREE)?

You would know by now ecommerce customers buy products for different reasons. Your store products might be cheaper than your competitors, maybe you offer better shipping rates, possibly you restock products more quickly than anyone else – or simply you’ve got a great product people keep buying.

One way to display your product features and benefits on the Shop page is by using “product badges”, a series of display messages that are able to communicate with the user immediately.

You’re probably already familiar with the “SALE!” badge that WooCommerce gives us by default. What if you wanted to show the exact percentage amount of that offer?

You’re also aware of the “Featured” option for WooCommerce products. Yes, they show in the “Featured” product shortcode, but what if you wanted the shop to display these special products in a different way, i.e. by using a special badge?

Well, there are millions of examples on how you could improve your products page (and single product page) by making the most of product badges. Thankfully there are snippets and plugins that can help you with that.

A little investment might mean better click-through rates and therefore higher conversion rates!

1. WooCommerce “Product Badges” PHP Snippets

Clients hire me as a WooCommerce freelancer to achieve things plugins can’t, or maybe to avoid using yet another bloated plugin.

Having said that, the majority of WooCommerce Store Managers like plugins and dislike coding – if that’s your case feel free to jump to section 2 🙂

WooCommerce: Display a Custom Product Text Badge @ Shop Page

WooCommerce hooks allow you to achieve pretty much anything on the “Shop” page (also called “products page” or “archive page”). For this reason, take a look at my WooCommerce “Shop Page” Visual Hook Guide: https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/ – this will give you an idea of how the following snippets are coded and what “hooks” are used to display additional content on the archive pages.

Once you’ve done that, you can take a look at these Business Bloomer snippets (the links should be self-explanatory):

If you like coding a little, test them out and enjoy 🙂

2. WooCommerce “Product Badges” Plugins (FREE)

As already mentioned you can use a plugin to create product badges, in alternative to PHP coding.

By doing a simple search on Google and by picking just the reliable products from the WP Repository (I usually look at current installations, responsiveness of support, last update date and overall developer quality), there aren’t many available. Most of them haven’t been updated in years.

The last one standing is the YITH WooCommerce Badge Management, which gives you several options for you to try. The features worth a mention are:

  • you can create unlimited text badges and position them where you like
  • you can assign badges on a per-product basis

Pretty simple, straight to the point… might do the trick for you. But if you need something more advanced, a little investment is required.

3. WooCommerce “Product Badges” Plugins (PREMIUM)

There are several premium choices in regard to product badges – however I don’t usually rely on Codecanyon as their plugins are often discontinued.

If I had to pick two reliable providers, I’d definitely choose either YITH (they specialize in WooCommerce plugins) or the WooCommerce.com marketplace itself. We’ve seen in previous posts how much I trust both suppliers, their big teams and their responsive support – so we’ll concentrate on them.

The first product is the YITH WooCommerce Badge Management plugin. We’ve already introduced its free plugin in the previous section, so let’s take a look at this premium version settings and functionalities. The biggest features are:

  • you can create unlimited CSS-based, image-based or advanced badges and position them wherever you like, thanks to drag&drop anchoring
  • you can automatically assign badges to new (you define what “new” means in days), on sale, featured, low in stock, out of stock products
  • you can assign a custom badge on a per-category, per-product, per-shipping-class basis
  • you can hide badges in the sidebar
  • you can assign custom badges to variable products
  • you can schedule when to hide/show the badge
  • you have a neat badge designer, or can upload a custom image
  • there are 16 ready-to-go image badges
  • and much more…

Here are a few screenshots (click on any image to open lightbox):

The other plugin worth a mention, this time from WooCommerce.com, is the WooCommerce Advanced Product Labels, very similar to YITH in regard to functionalities and outcomes.

Same as YITH, this label management plugin can target single products, categories, products on sale, bestsellers, product newness, price, stock status, shipping class, tags, but also total sales and product types.

The screenshots available online are not many, so hopefully the following are sufficient to compare the two premium products (click on any image to open lightbox):

Good luck with your badge management 🙂

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

2 thoughts on “WooCommerce: How to Display Custom Product Badges (e.g. %OFF, NEW, FREE)?

  1. Mr.Rodolfo,

    I have a question – how to put a PRICE to the badge instead of sales, discounts etc.?

    1. Hello Andrey, thanks for your comment! If you want to do that via a snippet, that’s custom work – sorry. Otherwise if you wish to use a plugin, tryy asking the plugin developers, they should be able to help 🙂

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.