WooCommerce: Display “New!” Badge on Recent Products

We already have a nice “Sale!” badge by default with WooCommerce – this shows on the Shop page once certain conditions are met.

Now, what if we wanted to show a “New!” badge for products published in the last 30 days? This would certainly grab the customer attention, and also communicate the fact your shop is constantly updating with new products and content (well, good for Google too, right?).

Well, here’s a simple snippet for you; simply copy/paste into your functions.php and magically a “New!” badge will show (note: CSS is not provided, you’ll need to adjust it based on your current theme and custom styles).

Show a “NEW” badge on recent products

PHP Snippet: Display “NEW!” Badge on New WooCommerce Items @ WooCommerce Shop

The snippet is very easy. It gets the product “created” date, and compares this with the current time minus the “newness days” (you can change this to 60 or whatever number of days).

If such product creation date is within the “this product is new” date range, then a “NEW!” badge will show, in the position defined by “woocommerce_before_shop_loop_item_title” (other possible positions here, in my visual hook guide).

/**
 * @snippet       "New" badge @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'woocommerce_before_shop_loop_item_title', 'bbloomer_new_badge_shop_page', 3 );

function bbloomer_new_badge_shop_page() {
   global $product;
   $newness_days = 30;
   $created = strtotime( $product->get_date_created() );
   if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
      echo '<span class="itsnew onsale">' . esc_html__( 'New!', 'woocommerce' ) . '</span>';
   }
}

Where to add custom code?

You should place PHP snippets at the bottom of your child theme functions.php file and CSS at the bottom of its style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my guide "Should I Add Custom Code Via WP Editor, FTP or Code Snippets?" and my video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything went as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting.

If you think this code saved you time & money, feel free to join 17,000+ WooCommerce Weekly subscribers for blog post updates and 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance!

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

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.

43 thoughts on “WooCommerce: Display “New!” Badge on Recent Products

  1. Ciao Rodolfo,

    The comment in the snippet is wrong, I think it refers to another snippet:

    * @snippet Add Inline Field Error Notifications @ WooCommerce Checkout

    Cheers!

  2. Hey there. Alawys great little snippets here! πŸ™‚ One question. The badge does not appear on the single product page like the default onsale one. Looking at the code I do not see it being restricted to the shop/archive page or is shop (woocommerce_before_”SHOP”_loop_item_title) the restriction?

    1. Exactly, woocommerce_before_shop_loop_item_title only triggers on the shop page. You’ll need additional / different code to also make it show on the single product page – take a look at all the available hooks here

  3. I switched from Astra to Blocksy theme and now this is no longer working. Any ideas?

    1. Possibly the new theme overrides WooCommerce, so code needs to be adjusted

  4. Still Works

  5. Works great. Thank you very much for the code…

  6. Hi Sir

    I sometimes need small task dont for our company, would you perhaps send me a mail?

    Best regards
    Roland Nielsen

    1. Hi Roland, thanks so much for your comment! If you’d like to get a quote, feel free to contact me here.

  7. THis is a great code but however I am having trouble to adapt it to show on featured products. I would like to instead of showing it on most recent products, show it as it is on featured products. I am sure this is very easy to do but I can’t wrap my head around it. Probably because I don’t know PHP

    1. Andrei, 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!

  8. Great work as always! πŸ™‚ I am showing some of my products (ex. popular products) both on the home and shop page. Is there a way of showing badges also on the homepage product images?

    1. Hi Aristotelis, 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!

  9. How can i show a budget only in products available on stock?

    1. Hello Ana, 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. Hi,

    Just a quick question, i use your badge hook works great. Now i want to display a category “New Products” where i want to display all products filtered by the same criteria like the badge. Let’s call it a dynamic category, any ideas or best practices where to start?

    1. Hi Paul, 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. Is there a way to display new products as a shop page and menu item?

    1. Hi Roman, 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. If I would like to put the ‘new’ tab on all posts that were published in the last month. That way, I’m able to manipulate the products where this is showed.

    Is that custom work?
    I have been looking for the $product->get_date_published() but it’s clear this is beyond my comprehension.

    1. Hi Anne! Try with:

      $product->get_date_modified();
  13. Is there a way to restrict the badge to only appear based on a product category instead of the created date?

    1. Hi Dylan, 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!

  14. Worked like a charm sir, thank you. A nice new addition to our store though we were googling for completely different thing haha

    1. LOL!

  15. Thanks, your code is working on my site. However the ‘New’ badge shows above the product image. Is it possible to move it below next to the ‘Sale’ badge? Thanks is advance.

    1. Hi Andy – you’ll need to add custom CSS for that πŸ™‚

      1. I wanted the same thing and solved it with css in the child theme
        Thank you very much R.M.! … “smart man is the one who shares a little with others”

        1. Great!

  16. Added the snippet and then changed the product’s published date from Dec 2018 to Apr 24 2019 so it would fall in the 30-day setting. Looked lovely yesterday but today the badge has changed from “New” to “Sold out” on my category page. I have removed the snippet, changed the date back, put the snippet back in (hoping that would ‘clear’ the badge) but to no avail. No other changes made to the product itself. We’re not managing inventory. At this point I just want to get the badge off.

    Help!!

    1. Okay — so — I tricked the product back into submission. πŸ™‚ I changed the variation prices to show a ‘sale’ (upped the regular price and enter the correct price as a ‘sale’ price). Badge changed to ‘Sale!’ Then I changed the variation prices back to the correct regular price and removed the sale price.

      Now I have ‘New!’ badge back on my desired product. Let’s see what tomorrow brings, and if it mysteriously attaches the ‘Sold Out’ badge. In which case I’ll cry, because it will be Saturday, and I don’t want to deal with this on the weekend. πŸ˜‰

      1. Ah! Hope you sorted that out πŸ™‚

  17. i want my new badge remove after 3 days how can do this ??

    1. Hello Md, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  18. This Snippet suffers from the same fatal flaw as the other badge plugins. It only shows on the actual product. It does not show on the category or subcategory page that the product is in.

    1. Hey there, thanks for your comment! Actually that’s not right, this snippet will work on the shop, category and subcategory pages and anywhere there is a “loop” of products (like in a shortcode). If it doesn’t work for you is because your theme or other plugins are heavily customizing WooCommerce and the hook I used won’t work for you. You’ll need to readapt the snippet to make it work. Hope this helps!

      1. Thanks! It works well to my web. However, if I want to add a “NEW” badge also shows above on category or subcategory image (the new product is in this category), how to write the code?

        1. Hi Amber, 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!

  19. I added the code to functions.php but nothing’s showing up on the category or product pages for items I added in the past 2 weeks. In this category there are quite a few new wood items that I’d like the New bubble added. https://rusticartistry.com/product-category/accessories/kitchen-and-dining-accessories/wood-bowls-and-platters/

    1. Hello Carole, thanks for your comment! It could be your theme is heavily customized (in regard to WooCommerce) and therefore the “woocommerce_before_shop_loop_item_title” hook does not trigger. In fact, your sale badge is also different from the default one if I look at the code. You’ll probably need to adapt this snippet based on your theme coding πŸ™‚ Hope this helps

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

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