WooCommerce: Display “NEW” Badge on Recent Products

We already have a nice “SALE” badge by default with WooCommerce (as well as the “OUT OF STOCK”) one. These show on the shop page once certain conditions are met.

Now, what if we wanted to show a “NEW” badge for products added 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?).

So, how do they do it? (Sounds like one of those Discovery Channel shows…)

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

Snippet (PHP): 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       Add Inline Field Error Notifications @ WooCommerce Checkout
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=86570
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @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 this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme 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 free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked 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 on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

11 thoughts on “WooCommerce: Display “NEW” Badge on Recent Products

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

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

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

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

  5. 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: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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.