How to Remove the “New” Badge on WooCommerce Products: A Beginner’s Guide
So, you’ve added new products to your WooCommerce store, and that shiny “New!” badge is doing its job – attracting attention. Great! But what if you want to control *when* and *how long* that badge appears? Or maybe you just want to get rid of it altogether? No problem! This guide will walk you through several ways to remove the “New” badge on your WooCommerce products, even if you’re not a coding expert.
Let’s dive in!
Why Remove the “New” Badge?
Before we get into the Check out this post: Cant Figure Out How To Update Template Woocommerce “how,” let’s understand the “why.” The “New” badge is a great marketing tool, but it’s not always appropriate:
- Limited-time Promotion: You might only want the badge to appear for a limited time after a product Check out this post: How To Insert More Keywords In WordPress Woocommerce Products is added. Leaving it on indefinitely can dilute its impact. Imagine a supermarket with a “New!” sign on milk that’s been there for a year. People would probably stop believing it!
- Aesthetics: Sometimes, the badge just doesn’t fit with your store’s overall design. A minimalist store, for example, might prefer a cleaner look.
- Inventory Management: Perhaps you’ve restocked a product that was temporarily out of stock. You might not want to label it “New” just because it’s back in stock. It was never ‘new’, just unavailable.
- Enable/Disable Read more about How To Print Shipping Address In Woocommerce the “New” badge.
- Set the number of days a product is considered “New” after publication. (This is the crucial setting for automatic removal!). For example, set it to 30 days. Products older than 30 days won’t have the badge.
- Customize the badge’s text, color, and position.
Understanding your reasoning will help you choose the best method for removing or customizing the badge.
Method 1: Using a WooCommerce Plugin (Easiest)
For non-coders, using a plugin is the easiest and recommended option. Several plugins allow you to manage the “New” badge. They offer simple settings to control the badge’s display duration and appearance.
Example Plugin: “YITH WooCommerce Badge Management” (Free Version)
While many plugins exist, “YITH WooCommerce Badge Management” offers a good free option.
1. Install and Activate the Plugin: Go to your WordPress dashboard, then *Plugins* > *Add New*. Search for “YITH WooCommerce Badge Management” and install/activate it.
2. Configure the Badge Settings: After activation, a YITH menu item appears in your WordPress dashboard. Look for “Badge Management”. Here you’ll find options to:
Reasoning: Plugins provide a user-friendly interface for managing the badge without requiring any coding knowledge. It’s a safe and efficient way for most users.
Method 2: Removing the Badge with Custom Code (For More Control)
If you’re comfortable with a little bit of code, you can remove the badge directly. Important: Back up your website before making any code changes! Incorrect code can break your site.
Here’s the snippet to completely remove the “New” badge. Place this code in your theme’s `functions.php` file or use a code snippets plugin (recommended):
function remove_woocommerce_new_badge() { remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_sale_flash', 10 ); } add_action('after_setup_theme', 'remove_woocommerce_new_badge');
Explanation:
- `remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_show_product_loop_sale_flash’, 10 );`: This line removes the default sale flash (which is often used as the “New” badge) from the product listings (e.g., shop page).
- `remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_show_product_sale_flash’, 10 );`: This removes the sale flash from the single product page.
- `add_action(‘after_setup_theme’, ‘remove_woocommerce_new_badge’);`: This makes sure the code executes after the theme is loaded, ensuring that WooCommerce is ready.
Reasoning: This method provides complete control over the badge removal. It’s a direct and efficient way to remove it from the product listings and single product pages. It’s cleaner than using CSS (which only hides it, not removes it).
Method 3: Customizing the Code to Control Badge Visibility (Advanced)
Want to remove the badge *only* after a certain period? This requires a more advanced approach, but it’s powerful. This example sets a product to NOT show the “Sale” badge after 30 days from publish.
function custom_woocommerce_show_product_loop_sale_flash() { global $product;
// Get the product’s publish date
$post_date = get_the_date( ‘Y-m-d’, $product->get_id() );
$date_now = date( ‘Y-m-d’ );
// Calculate the difference in days
$date1 = new DateTime($post_date);
$date2 = new DateTime($date_now);
$interval = $date1->diff($date2);
$days_passed = $interval->format(‘%a’);
// Set the number of days the product is considered “new”
$new_days = 30;
// Check if the product is new enough
if ( $days_passed < $new_days ) {
echo ‘‘ . esc_html__( ‘New!’, ‘woocommerce’ ) . ‘‘;
}
}
remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_show_product_loop_sale_flash’, 10 );
add_action( ‘woocommerce_before_shop_loop_item_title’, ‘custom_woocommerce_show_product_loop_sale_flash’, 10 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_show_product_sale_flash’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘custom_woocommerce_show_product_loop_sale_flash’, 10 );
Explanation:
1. Get the Product’s Publish Date: The code retrieves the date the product was published.
2. Calculate the Time Difference: It calculates the difference in days between the publish date and the current date.
3. Define the “New” Period: The `$new_days` variable sets how many days a product is considered “New.”
4. Conditional Display: If the product’s age is less than `$new_days`, the “New!” badge is displayed.
5. Replacing the Original Function: We remove the WooCommerce default function and add our custom version.
How to Use:
1. Copy the Code: Copy the above code block.
2. Add to `functions.php` or Code Snippets: Paste the code into your theme’s `functions.php` file *or*, preferably, a code snippets plugin. (Code snippets plugins prevent code changes from being lost when you update your theme).
3. Adjust `$new_days`: Change the value of `$new_days` to the number of days you want the “New” badge to appear.
4. Change Text: Feel free to change “New!” to whatever you like.
Reasoning: This is the most flexible option. You can precisely control the badge’s visibility based on the product’s age. It requires coding knowledge but provides the most customized experience. This is very useful for automating sales badges removal when it is not longer useful.
Important Considerations:
- Caching: If you make changes and don’t see them reflected immediately, clear your website’s cache (and browser cache). Caching can sometimes prevent the changes from showing up right away.
- Theme Updates: If you modify your theme’s `functions.php` file directly, your changes might be overwritten when you update the theme. This is *why* a code snippets plugin is recommended!
- Child Themes: If you’re using a child theme, make sure to add the code to the *child theme’s* `functions.php` file, not the parent theme’s.
Conclusion
Removing or customizing the “New” badge on your WooCommerce products can improve your store’s aesthetics, marketing effectiveness, and user experience. Whether you choose a Learn more about How To Setup Stripe Payment Gateway Woocommerce plugin for simplicity or custom code for advanced control, you can tailor the badge’s appearance to perfectly fit your brand and strategy. Remember to always back up your site and test changes thoroughly! Good luck!
