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).
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>';
}
}
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!
Custom CSS would do – unfortunately CSS is strictly based on your custom setup so I can’t share it here
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.
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!
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!
Thanks a mill!
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?
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
I switched from Astra to Blocksy theme and now this is no longer working. Any ideas?
Possibly the new theme overrides WooCommerce, so code needs to be adjusted
Still Works
Thank you!
Works great. Thank you very much for the code…
Cool
Hi Sir
I sometimes need small task dont for our company, would you perhaps send me a mail?
Best regards
Roland Nielsen
Hi Roland, thanks so much for your comment! If you’d like to get a quote, feel free to contact me here.
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
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!
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?
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!
How can i show a budget only in products available on stock?
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!
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?
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!
Is there a way to display new products as a shop page and menu item?
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!
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.
Hi Anne! Try with:
Is there a way to restrict the badge to only appear based on a product category instead of the created date?
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!
Worked like a charm sir, thank you. A nice new addition to our store though we were googling for completely different thing haha
LOL!
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.
Hi Andy – you’ll need to add custom CSS for that ๐
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”
Great!
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!!
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. ๐
Ah! Hope you sorted that out ๐
i want my new badge remove after 3 days how can do this ??
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
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.
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!
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?
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!
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/
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