WooCommerce: Add New Product Badge or Label to Your Shop

Looking to add a “new” product badge or label to your WooCommerce store? In this article we’ll explore the best way to do it with only a simple code snippet.

You’ll learn how to add a custom badge, or any other content you might want, both within your Shop pages (such as your main product catalog page and your category / tag pages), and also inside your single product pages.

The best way to add custom code snippets (be it PHP code, HTML, CSS or JavaScript) is by using the Code Snippets plugin (guide here).

This will make it easy to follow this guide (and others), and also to maintain your code over time.

Code Snippet (PHP): Add “New” badge or label to your WooCommerce Shop and/or single product pages

The snippet does 2 simple things: it calculates the difference between the present time and the time when the article was published.

And if that difference is, let’s say, less than 30 days, the product is considered “new” and the desired content (our “new” badge) is added to it.

Here’s the PHP code.

/*	Snippet		Adds "New" Label to Recent Products (inside Single Product and Archive pages)
*	Source		http://woolearnr.com/woocommerce-add-new-product-badge-or-label
*	Tested		WP 5.8.0 & WC 5.6.0
*/

// Remove the following line if you don't want to add the "new" badge to your Shop pages
add_action( 'woocommerce_before_shop_loop_item', 'woolearnr_single_product_labels', 3 );
// Remove the following line if you don't want to add the "new" badge to your Product pages
add_filter( 'woocommerce_single_product_summary', 'woolearnr_single_product_labels', 10 );

function woolearnr_single_product_labels() {

	if ( is_product() || is_shop() ) {
		$diff = time() - get_the_time('U');
		if( 30 * DAY_IN_SECONDS >= $diff ) {
			echo "
				<div class='woolearnr-labels-container'>
					<span class='woolearnr-green-label'>new in</span>
				</div>
			";
		}
	}

}

As the comments inside the code suggest, you can edit 30 * DAY_IN_SECONDS and replace it with the desired timeframe for a product to be considered newly added.

You can use things like 7 * DAY_IN_SECONDS for 7 days, or 36 * HOUR_IN_SECONDS for 36 hours.

You should also change the “new in” text on line 20 if desired, to whatever text you’d like displayed on your “New” product badge.

Code Snippet (CSS): Let’s style our “new product” badge!

/* "New in" label styling for single product page
First, remove margin-bottom from price */
.summary.entry-summary p.price {
	margin-bottom: 0;
} 

/* Give the margin-bottom to the newly inserted label(s) (their container div) instead */
.woolearnr-labels-container {
	margin: 0 0 25px 0;
}

/* Style the green label itself */
.woolearnr-green-label {
	display: inline-block;
	background-color: green;
	margin: 5px 5px 0 0;
	color: #fff;
	padding: 7px 12px;
	font-size: 0.7em;
	font-weight: 600;
	border-radius: 10px;
	vertical-align: middle;
}



/* Additions for archive pages: container margins and make position absolute (overlap on top of product photo), remove border radius and adjust padding */
.post-type-archive-product .woolearnr-labels-container {
	margin: 0;
}

.post-type-archive-product .woolearnr-green-label {
	position: absolute;
	z-index: 5;
	margin: 0;
	border-radius: 0;
	padding: 5px 10px;
}

/* Optional - for my theme, in the Archive (Shop) pages I wanted to have the "new in" and the "SALE" badges have the same height */
.woocommerce ul.products li.product .onsale,
.post-type-archive-product .woolearnr-green-label {
	height: 30px;
}

And here is our final result on the Single Product page:

Then on the Shop pages (your main shop and the product archives such as Categories and Tag pages):

That’s it for now! Enjoy, and see you in the next guide!