Posted on

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 @
 * @sourcecode
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 * @donate $9

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 code?

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 delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

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?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

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: Display “NEW” Badge on Recent Products

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

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