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 ๐Ÿ™‚

Related content

  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages
    I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can […]
  • WooCommerce: Hide Prices on the Shop & Category Pages
    Interesting WooCommerce customization here. A client of mine asked me to hide/remove prices from the shop page and category pages as she wanted to drive more customers to the single product pages (i.e. increasing the click-through rate). As usual, a simple PHP snippet does the trick. I never recommend to use CSS to “hide” prices, […]
  • WooCommerce: How to Remove the “Default Sorting” Dropdown
    If the WooCommerce product sorting functionality (“Default Sorting” dropdown) is a waste of space or you don’t need that select box at all, you may want to remove it. No matter if you prefer custom code or a simple plugin – hiding the product sorting dropdown is a piece of cake. Enjoy!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

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

  1. Hello,
    Is it possible to show the badges from Yith badge managementvaardigheden on the homepage in Woocommerce? Now the show only in the shop en not on the homepage. I use theme Astra pro.

    Kind regardz
    Pascal

    1. Hi Pascal, did you ask YITH suport?

  2. Is it possible to display custom badges on single product pages based on the product’s shipping method? Would love to make it clear to buyers that certain items are pickup only. Cheers.

    1. Hi Nate, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  3. hi rodolfo,
    using your snippet on single and archive and it`s working fine. wondering how to use it on Hand-picked Products WooCommerce Blocks?
    tks in advance

    1. Not sure about Gutenberg, sorry

  4. Hello Sir,
    While this snippet will work, there are things that are missing–which I feel you did not address.

    1.) There will be different Badges for the different products on your Shop. The Custom Badge needed for Product A is diffrent from the Custom Badge needed for Product B.

    How does this code handle the dynamic and changeable nature of the different badges for different products?

    2.) How does the code ensure that these Badges appear both on the Sho Archive Page, and on the Single Product Page as well?

    3.) How does the code enable the shape, colour, size, position and design of how the badge will look?

    Needing to hear from you soon.
    Regards

    1. Hi Cordial, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  5. Unfortunately this plugin does not work with Zakra themes.

    1. Weird. Try contact Zakra devs, it’s in their best interest to get this fixed

  6. Just ads for a few plugins, not really useful. Sorry.

    1. Sorry about that. Section 1 provides free snippets that don’t require a plugin, just to point that out.

  7. The same question:

    Is it possible to Show the Sale Badge in amounts such as โ€œSave $50โ€ โ€œSave $30โ€ instead of showing them in either % or text?

    1. You should ask William ๐Ÿ™‚

  8. Is it possible to Show the Sale Badge in amounts such as “Save $50” “Save $30” instead of showing them in either % or text?

    1. Working now. Thanks

      1. Cool!

  9. My client want to show the sale badge on the shop page for categories that have products on sale.
    There is a way to add the sale badge on the category like it show on product on sale?

    1. Hi Rubb, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  10. There is shortcode or something that i can use if I don’t use the woocommerce official loop?
    I’m using elementor to create the loop

    1. Hello Moshe, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  11. Hi, I m searching a solution to show on the product image in Loop page one attribute. there is some solution?

    1. Hi Edoardo, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  12. Hi Rodolfo Melogli,
    My Client want to Display Custom Product Circled Badge on top right corner but showing “weight” instead e.g 920g.
    how can i do it

    Thanks in advance for your help
    Muhammad

    1. Muhammad, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  13. Plugins suck. Code it man! Code!

    1. Ahah underrated comment!

  14. Hi,

    I am using YITH badges…its work on single product…but the badges are showing in custom product list.
    The custom product list is showing with help of essential grid plugin
    Can you please help how can i show the badges in custom product list.

    1. Hi Kunal, please ask YITH support. Thanks!

  15. 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 ๐Ÿ™‚

Leave a Reply

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