Currrently Woocommerce has only two default badges. One of them is “Sale” badge and another one is “Out of stock” badge. Therefore, in this post I‘m going to show you how to add a “New” badge on the Woocommerce Recent products. So, if you want to show this badge for products that are added in the last 30 days then take a closer look.
How to Display “NEW” Badge on Woocommerce Recent Products
Step 1: Install Code snippets plugin (optional)
Code Snippets plugin is a free plugin which allows your to run PHP/HTML/CSS/JavaScript code snippets on your site without the need to modify functions.php. The plugin can be found here.
If you are comfortable editing your theme’s function.php file then you can paste the code there.
Step 2: Copy the code to the Code snippets code box
Now grab the code here below and paste it to the code snippets code box and press on Save and activate button.
// New badge for recent products
add_action( 'woocommerce_before_shop_loop_item_title', 'new_badge', 3 );
function new_badge() {
global $product;
$newness_days = 30; // Number of days the badge is shown
$created = strtotime( $product->get_date_created() );
if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
echo '<span class="new-badge onsale">' . esc_html__( 'NEW', 'woocommerce' ) . '</span>';
}
}Step 3: Stylize your “New” badge with additional CSS
Go to the Appearance >> Cutomizer >> Additional CSS and paste the CSS code prvided below. If you like the ribbon style (see the screenshot) then paste this code.
Ribbon style
/* RIBBON STYLE */
.woocommerce ul.products li.product .new-badge.onsale {
background: #ffcc00;
top: .5em;
z-index: 10;
right: auto;
color: #000;
font-weight: 700;
text-transform: uppercase;
font-size: 0.9em;
border-radius: 0px;
min-width: 60px;
padding-left: 19px !important;
}
span.new-badge.onsale:after {
border: 5px solid #ffcc00;
border-color: transparent transparent #ffcc00 #ffcc00;
border-width: 9px 6px;
position: absolute;
right: -10px;
bottom: 0;
content: '';
}
span.new-badge.onsale:before {
border: 5px solid #ffcc00;
border-color: #ffcc00 transparent transparent #ffcc00;
border-width: 9px 6px;
position: absolute;
right: -10px;
top: 0;
content: '';
}
span.new-badge.onsale {
min-width: 60px;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}Circle style
If you prefer circle style then grab the CSS code here below.
/* CIRCLE STYLE */
.woocommerce ul.products li.product .new-badge.onsale {
background: #ffcc00;
right: auto;
color: #000;
font-weight: 700;
text-transform: uppercase;
font-size: 0.9em;
border-radius: 0px;
border-radius: 999px;
min-width: 3em;
min-height: 3em;
line-height: 3em;
padding: 0;
position: absolute;
text-align: center;
top: .5em;
left: .5em;
}How to Display “NEW” Badge on Woocommerce Single product page?
This code here below should add “New” badge below product title. If you need it to be on the product image then you need to customize it by yourself using proper hooks from the visual hook guide here.
// New badge for recent products on single product page
add_action( 'woocommerce_single_product_summary', 'new_badge_single_product', 7 );
function new_badge_single_product() {
global $product;
$newness_days = 30; // Number of days the badge is shown
$created = strtotime( $product->get_date_created() );
if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) < $created ) {
echo '<span class="itsnew">' . esc_html__( 'NEW', 'woocommerce' ) . '</span>';
}
}It uses class “itsnew” and you can customize it by adding something like this inside Additional CSS:
.itsnew {
background: #f37b21;
padding: 5px 10px;
font-size: 12px;
font-weight: 700;
color: #fff;
}
