How to Create “New” label for new WooCommerce products

Using product badges is one of the best ways to effectively draw attention to specific products in your WooCommerce store. If you add a badge to your product page to indicate a sale, a discount, a limited-time offer, or to emphasize any other feature that may help make your products stand out , you can only increase your chances of scoring more sales and conversions.

1. To do this, simply add the following code to the template’s functions.php file:

/**
* Snippet Name:  Adding New Badge on product archive and single product page
* Snippet Author:  wpsnippets.dev
*/
 
// Add a "New" badge to recently added products in WooCommerce archive
  
function wps_add_new_badge($args) {
    global $product;
 
    $days_old = 5; // Number of days to consider a product as "new"
    $product_date = strtotime($product->get_date_created());
    $new_threshold = strtotime("-{$days_old} days");
     
    if ($product_date > $new_threshold) {
        $args['class'] = 'new-product-badge';
    }
    return $args;
}
add_filter('woocommerce_post_class', 'wps_add_new_badge');

2. CSS code:

/* Style for the "New" badge on WooCommerce product archive */
.new-product-badge {
    position: relative;
}
 
.new-product-badge::after {
    content: 'New' !important;
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #ff6347; /* Adjust the background color to your preference */
    color: #fff; /* Adjust the text color to your preference */
    padding: 3px 6px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
}

How do I find and edit the „functions.php“ file?

There are several possibilities:

Option 1: In the WordPress backend

Log in to your WordPress backend as administrator.In the menu item „Design“ you will find the sub-item „Theme file editor“. In the right column, select the file „Theme functions“ (functions.php) and you can insert the code in the editor.

The only problem: You save something in this file of a theme. If the manufacturer of the theme offers an update, in which also this file is updated, then your inserted code in this file is lost.

Option 2: Via FTP

If you don’t have permissions in the wordpress backend, you can also download the file via FTP, edit it and upload it again.

How to do that?
With a FTP client like FileZilla or CyberDuck you can connect to the FTP access data of your hoster. There you will see all files of your WordPress installation. In the folder /wp-content/themes/ you will find the installed themes. Open the folder with the name of your theme and there you will find the file functions.php. You can now download this file, edit it in a code editor of your choice – just add the code mentioned above to the bottom of the file – and then upload it again.

Option 3: Host Control Panel ( Plesk/Cpanel/Directadmin/…)

simply login to your webhost controlo panel and then fire file manager area . In the folder /wp-content/themes/ you will find the installed theme . Open the folder with the name of your theme and there you will find the file functions.php . You can now edit it online.

Leave a Comment

Back to top button

Sign Up for Our Newsletter

Want to be trendy? Subscribe to our blog and be the first to get the hottest news from all over the world!

Our site uses cookies to improve your browsing experience and provide you with personalized content. By continuing to use our site, you agree to our cookie policy.