[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/uncategorized\/how-to-add-product-badges-in-woocommerce-quick-and-easy\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/uncategorized\/how-to-add-product-badges-in-woocommerce-quick-and-easy\/","headline":"How to Add Product Badges in WooCommerce (Quick and Easy)","name":"How to Add Product Badges in WooCommerce (Quick and Easy)","description":"Have you ever wondered if you could replace WooCommerce\u2019s basic sale badge with something more eye-catching (and slightly less boring)? This is a common question ... Leer m\u00e1s<\/a>","datePublished":"2025-02-17","dateModified":"2025-02-17","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2025\/02\/add-product-badges-in-woocommerce-og.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2025\/02\/add-product-badges-in-woocommerce-og.png","height":1080,"width":1920},"url":"https:\/\/xn--adrimadiseo-beb.com\/uncategorized\/how-to-add-product-badges-in-woocommerce-quick-and-easy\/","about":["Uncategorized"],"wordCount":2882,"articleBody":"Have you ever wondered if you could replace WooCommerce\u2019s basic sale badge with something more eye-catching (and slightly less boring)?This is a common question we get from our readers, and we\u2019re happy to tell you that the answer is yes. You absolutely can! Custom product badges are a fantastic way to highlight special items in your online store. They\u2019re helpful whether you want to showcase new arrivals, mark items on sale, or draw attention to limited-time offers.In this post, we\u2019ll show you two simple ways to add custom product badges to your WooCommerce store. You can either use a powerful plugin or add some simple code.Don\u2019t worry. We\u2019ll walk you through each option step by step!\u261d Important Note: To follow this tutorial, you will need to have a fully functional WooCommerce store. If you haven\u2019t set yours up yet (or you are still in the process), check out our ultimate WooCommerce guide for beginners.What Are WooCommerce Product Badges?Have you ever noticed those little \u2018Sale\u2019 or \u2018New\u2019 labels that show up on products while shopping online?Those are product badges, and they\u2019re incredibly useful for making certain items stand out in your online store.Think of them as virtual stickers that draw your customers\u2019 attention to important product details like sales, new arrivals, or limited-time offers.We\u2019ve seen store owners use product badges in really creative ways to showcase special deals, highlight bestsellers, or mark items that are running low on stock. Now, if you\u2019re already using WooCommerce, you might have noticed it comes with a basic sale badge feature that automatically appears when you reduce a product\u2019s price.While the WooCommerce sale badge works fine for simple needs, let\u2019s be honest \u2013 it\u2019s pretty limited in terms of what you can do with it. You can\u2019t easily change how the badge looks, add new badge types, or control exactly where they appear on your product images.Meanwhile, custom product badges allow you to show your brand\u2019s personality more. Most importantly, though, original badges can more effectively draw attention to special products.That way, you can drive more sales in your online store. \ud83d\udcb0In this guide, we\u2019ll walk you through 2 proven methods to add and customize product badges in WooCommerce. Both approaches will give you complete control over how they look and work.You can use the quick links below to skip to your preferred method:Method 1: Use YITH WooCommerce Badge Management (More Customizable)Let\u2019s start with our favorite tool for adding custom product badges to your WooCommerce store. We recommend using YITH WooCommerce Badge Management because it makes it super easy to add and customize product badges in your online store. Plus, we\u2019ve tested many YITH plugins over the years, like the ones for adding subscriptions and product videos, and they always work great for our users.Want to show a special badge during the holidays? Or maybe display how much money customers will save? This plugin can do all that. You can even set badges to show up at certain times and hide them later.You can start with either the free or premium version of the plugin. The free version is perfect if you just want to add simple text or image badges to your products. In this guide, we\u2019ll show you how to use the premium version, but most steps will work the same way for both. Just remember that some cool features, like badges that automatically show discount amounts, only come with the premium version.\u270c Note: The premium version costs $79.99 per year if you want all the features. While this might seem like a lot, we think it\u2019s worth it because you get so many ways to customize your product badges and make them look exactly how you want them.Ready to start? First, you\u2019ll need to purchase the plugin from YITH\u2019s website.Then log in to your YITH account, go to the \u2018Licenses & Downloads\u2019 tab, and click on the \u2018Download Plugin\u2019 button to download the file.Here\u2019s a tip: don\u2019t close this page after downloading because you\u2019ll need the license key that\u2019s shown there.Next, go to your WordPress dashboard and install the plugin. For more information, we have a step-by-step guide on how to install a WordPress plugin. When it\u2019s active, you\u2019ll see a setup screen asking for your YITH email and license key. Just copy these from the YITH website and click \u2018Activate license.\u2019Once you see the message saying your license is active, you\u2019re all set! Now, click \u2018Go to plugin dashboard,\u2019 and you can start creating your first custom badge.Step 1: Hide the Default WooCommerce Sale BadgeFirst, we need to hide WooCommerce\u2019s built-in sale badge so it doesn\u2019t clash with our custom product badges.\u00a0The process is really simple. Go to your WordPress dashboard and click on YITH \u00bb Badge Management. Then, navigate to the \u2018General Settings\u2019 tab.Here, you\u2019ll find an option that says \u2018Hide WooCommerce \u201cOn sale\u201d badge.\u2019 Go ahead and turn that on. Then, under \u2018Hide \u201cOn sale\u201d on:\u2019, select \u2018All products\u2019 to make sure the default badge doesn\u2019t show up anywhere in your store.While you\u2019re in the settings, you might notice some other helpful options. You can choose to hide your custom badges in certain places, like the sidebar or single product pages.This is great if you want to keep your store looking clean and organized. For example, if your mobile site feels too crowded, you can hide badges there, too.Don\u2019t forget to click the \u2018Save Options\u2019 button at the bottom of the page when you\u2019re done.Step 2: Create Your Custom BadgeNow comes the fun part: creating your first custom product badge in WooCommerce! Head over to the \u2018Badges\u2019 tab and click the \u2018Create Badge\u2019 button to get started.The plugin gives you 4 different types of badges to choose from: text badge, image badge, CSS badge, or advanced badge for sales products. Each type lets you create unique ways to highlight your products. For example, if you want to mark products as \u201cNew Arrival\u201d or \u201cVegan Friendly,\u201d the first three options work great. But here\u2019s a tip: if you\u2019re creating discount badges, we strongly recommend using the advanced option, which automatically updates based on your product\u2019s price changes.After picking your badge type, give it a name that helps you remember what it\u2019s for. If you\u2019ve chosen an image, CSS, or advanced badge, you\u2019ll see a whole collection of pre-made badge designs right in the plugin. You can pick whichever one you like. These ready-to-use badges save you time, and you can still customize them to match the style of your WooCommerce pages.This plugin really shines in its customization options. Depending on which badge type you picked, you can adjust all sorts of settings to make your badge look perfect on your product images.Want to change the color? Easy. Need to adjust how transparent it is? No problem. You can even rotate the badge or move it around on your products until it\u2019s in just the right spot.For our example, we made the badge really pop by changing its color to red and placing it in the top right corner of the product image. These small tweaks can make a big difference in how effectively your badges get people\u2019s attention.When you\u2019re happy with how everything looks, just click \u2018Save badge\u2019 to finish up.Step 3: Create a Rule to Display Your BadgeNow that we\u2019ve created our custom badge, let\u2019s tell WooCommerce exactly where and when to show it. Head over to the \u2018Badge Rules\u2019 tab and click \u2018Set Rule.\u2019Think of rules as instructions that tell your badges when to appear on your product images.The plugin gives you 4 main ways to control where your badges show up: products badge, category badge, tag badge, and shipping class badge. You can choose the \u2018Products badge\u2019 rule to add badges to certain items or the \u2018Category badge\u2019 rule to cover entire product categories.Meanwhile, the tag badge rule shows badges on products sharing the same WooCommerce tag, and the shipping class badge rule displays badges based on shipping options.Each rule targets different product aspects, but they all work in a similar way. So, you just need to pick what works best for your needs.Let\u2019s use the products badge rule for this example since it\u2019s the most common choice.Next, give your rule a straightforward name so you can find it easily later.Then, look for the \u2018Show badge in:\u2019 setting. This is where you decide which products get your badge. You can choose to show it on all products, recent additions, items on sale, featured popular products, or even just products that are in stock.Let\u2019s say you\u2019re creating a rule for sale items. If you select \u2018On sale products,\u2019 then your badge will automatically appear whenever you mark a product as being on sale. It\u2019s that simple!But some options come with more settings for you to configure. For example, if you pick \u2018Only recent Products,\u2019 you can set badges to appear on items added within the last few days (like 7, 14, or 30 days). This makes it super easy to automatically highlight new arrivals in your store without manually adding badges to each product.Sometimes, you might want to keep certain products badge-free. That\u2019s where the \u2018Exclude products\u2019 setting comes in handy.Just enable this setting and type in the names of any products you don\u2019t want to show the badge for. These items will stay badge-free even if they match your other rules.Next, select which badge design you want to use in the \u2018Badge to assign\u2019 dropdown. Now, here\u2019s where it gets really flexible. You can schedule when your badges appear and choose who gets to see them.The \u2018Schedule rule\u2019 option is perfect for limited-time deals.When you enable it, the plugin will ask you to set start and end dates for your badges.And if you want to show special badges to certain customers, like displaying a \u201cVIP Discount\u201d badge only to the most loyal customers, you can do that, too.To do this, just select \u2018Only specific users or user roles\u2019 in the \u2018Show badge to\u2019 setting. Then, type in your preferred user roles or individual usernames below it.When everything looks right, just click \u2018Save Rule,\u2019 and you\u2019re all set! Feel free to visit your store\u2019s front end to see your new product badges in action. If you\u2019re using the advanced badge type for sale items, you\u2019ll see it displaying both the discount percentage and the actual money saved, helping customers quickly spot the best deals.\ud83d\udca1 Related Post: Looking for more cool tools and strategies to improve your WooCommerce store? Check out our list of the best WooCommerce plugins.Method 2: Use Custom Code (Free and Simple)If you don\u2019t need the advanced options from the first method, or if you\u2019re looking for a completely free option, then we have a simple code method that won\u2019t cost you anything.And if you\u2019re not comfortable with code, don\u2019t worry! We\u2019ll be using the WPCode plugin to make this super easy and safe. It allows you to add custom code snippets in WordPress without being a developer or risking breaking your website. We\u2019ll use the free version of WPCode for this tutorial because it works perfectly for our needs. That said, there\u2019s a premium version with cool features like AI code generation and testing mode.For more information, just check out our in-depth WPCode review.First, you need to install the WordPress plugin in your admin area. Then, go to Code Snippets \u00bb + Add Snippet. Hover over the \u2018Add Your Custom Code (New Snippet)\u2019 section and then click on the \u2018+ Add Custom Snippet\u2019 button.Next, choose \u2018PHP Snippet\u2019 when asked about the code type.This tells WordPress what type of code we\u2019re using.Now, you have to give your snippet a name that helps you remember what it does.Since this code will remove the default WooCommerce sale badge and add both new product badges and dynamic discount badges, you might call it something like \u201cCustom WooCommerce Badges.\u201dOnce that\u2019s done, paste the code snippet we\u2019ve provided below in the \u2018Code Preview\u2019 box. This code does something really cool. It automatically calculates discount percentages and shows them on the sales badge. Plus, it adds a \u201cNew\u201d badge to products added in the last 7 days.\/\/ Remove default WooCommerce sale flash badgeremove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );\/\/ Add custom badges to productsadd_action( 'woocommerce_before_shop_loop_item_title', 'add_custom_product_badges', 10 );function add_custom_product_badges() { global $product; \/\/ Initialize a variable to track whether a badge has been displayed $badge_displayed = false; \/\/ For products with any amount of discount percentage (1% or more) if ( $product->is_on_sale() ) { \/\/ Get regular and sale prices $regular_price = floatval( $product->get_regular_price() ); $sale_price = floatval( $product->get_sale_price() ); \/\/ Handle variable products if ( $product->is_type('variable') ) { \/\/ Get variation prices $regular_price = floatval( $product->get_variation_regular_price( 'max', true ) ); $sale_price = floatval( $product->get_variation_sale_price( 'min', true ) ); } \/\/ Calculate discount percentage if regular price is valid if ( $regular_price > 0 ) { $discount_percentage = ( ( $regular_price - $sale_price ) \/ $regular_price ) * 100; \/\/ Display badge if discount is 1% or more if ( $discount_percentage >= 1 ) { echo '<span class=\"product-badge sale-product\">' . round( $discount_percentage ) . '% off!<\/span>'; $badge_displayed = true; \/\/ Badge has been displayed } } } \/\/ Only show the \"New\" badge if no other badge has been displayed if ( ! $badge_displayed ) { \/\/ For \"New\" products added in the last 7 days $post_date = get_the_time( 'Y-m-d', $product->get_id() ); $post_stamp = strtotime( $post_date ); $newness = 7; \/\/ Number of days the product is considered new \/\/ Check if the product is new if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $post_stamp ) { echo '<span class=\"product-badge new-product\">New<\/span>'; $badge_displayed = true; } }}Want to adjust how long a product is considered \u201cnew\u201d? Just look for the line where it says $newness = 7 in the code. You can change that number 7 to however many days you want, like 14 for two weeks or 30 for a month.To finish up, click the \u2018Inactive\u2019 button until it changes to \u2018Active,\u2019 then hit \u2018Save Snippet.\u2019Next, we need to style our badges to make them look great on your products. Let\u2019s add some CSS to adjust their appearance. To add a new snippet, follow the same steps as before, but this time, choose \u2018CSS Snippet\u2019 when asked.Name your snippet something descriptive, like \u201cProduct Badge Styles.\u201d This will help you find it easily if you need to make changes later.Here\u2019s the CSS code that will make your badges look professional. Just paste this into the \u2018Code Preview\u2019 box:\/* Common styles for all product badges *\/.product-badge { position: absolute; top: -10px; \/* Position at the top edge *\/ right: -10px; \/* Position at the right edge *\/ padding: 12px 16px; border-radius: 50%; color: #ffffff; font-size: 16px; font-weight: bold; z-index: 99; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}\/* Styles for the \"New\" badge *\/.new-product { background-color: #4CAF50; \/* Green background *\/}\/* Styles for the \"Sale\" badge *\/.sale-product { background-color: #FF0000; \/* Red background *\/}Let\u2019s break down what you can customize in this code. Want your badges in a different spot? To do this, you can change the top and right values. For example, changing top: -10px to top: 10px will move the badge down.Don\u2019t like the colors? It\u2019s super easy to change them. Just find the background-color lines and replace the color codes.For instance, if you want a blue sale badge instead of a red one, change #FF0000 to #0000FF. You can also make the badges bigger or smaller by adjusting the font-size value.Want to learn more about tweaking these styles? Check out our beginner-friendly guide on CSS in WordPress.Once you\u2019re done, just click the \u2018Inactive\u2019 button to make it \u2018Active,\u2019 then hit \u2018Save Snippet.\u2019That\u2019s it!Your badges should now appear on your product images. Here\u2019s an example of what ours looks like using our CSS code:Discover More WooCommerce Tips and TricksNow that you know how to display product badges in WooCommerce, you might want to explore other ways to improve your online store. Here are some helpful guides we recommend:We hope this article has helped you learn how to add product badges in WooCommerce. You may also want to check out our expert picks of the best WooCommerce product grid plugins and our guide on how to speed up WooCommerce performance. If you liked this article, then please subscribe to our\u00a0YouTube Channel\u00a0for WordPress video tutorials. You can also find us on\u00a0Twitter\u00a0and Facebook. "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Uncategorized","item":"https:\/\/xn--adrimadiseo-beb.com\/uncategorized\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"How to Add Product Badges in WooCommerce (Quick and Easy)","item":"https:\/\/xn--adrimadiseo-beb.com\/uncategorized\/how-to-add-product-badges-in-woocommerce-quick-and-easy\/#breadcrumbitem"}]}]