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
 * @community     https://businessbloomer.com/club/
 */

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 custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

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

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

  1. I used the Woocommerce bubble so it shows up on the product card like this https://imgur.com/a/OfKbdWX (the badge is about new product and sale) I wonder if any way to customize these bubbles’ badges (change the place with CSS and add animation). I’m pretty new to WordPress recently so hope you can help!

    1. Custom CSS would do – unfortunately CSS is strictly based on your custom setup so I can’t share it here

  2. Thanks so much for this snippet. It’s working great for me except for one instance – when variations are being displayed as single products through a custom loop. It can see that it pulls the date correctly, but it doesn’t seem to do the next step, the conditional calculation. Do you have an idea of why that one part might not be “firing”. I’m happy to PM you with a link to see the behavior.

    1. Hey Dawn! Makes sense, the date belongs to the “parent” product and not the single variation, so the code will require some modification. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  3. 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!

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

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

  6. Still Works

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

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

  9. 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!

  10. 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!

  11. 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!

  12. 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!

  13. 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!

  14. 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();
  15. 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!

  16. 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!

  17. 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!

  18. 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 πŸ™‚

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

  20. 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!

  21. 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? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. 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 the Business Bloomer Club to get quick WooCommerce support. Thank you!

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