How to Add Product Badges in WooCommerce (Quick and Easy)

Have you ever ever puzzled if you happen to may exchange WooCommerce’s fundamental sale badge with one thing extra eye-catching (and barely much less boring)?

It is a frequent query we get from our readers, and we’re comfortable to inform you that the reply is sure. You completely can!

Bespoke product badges are a improbable solution to spotlight particular gadgets in your on-line retailer. They’re useful whether or not you wish to showcase new arrivals, mark gadgets on sale, or draw consideration to limited-time presents.

On this put up, we’ll present you two easy methods so as to add customized product badges to your WooCommerce retailer. You possibly can both use a strong plugin or add some easy code.

Don’t fear. We’ll stroll you thru every choice step-by-step!

What Are WooCommerce Product Badges?

Have you ever ever seen these little ‘Sale’ or ‘New’ labels that present up on merchandise whereas buying on-line?

These are product badges, and so they’re extremely helpful for making sure gadgets stand out in your on-line retailer.

Consider them as digital stickers that draw your prospects’ consideration to necessary product particulars like gross sales, new arrivals, or limited-time presents.

We’ve seen retailer house owners use product badges in actually artistic methods to showcase particular offers, spotlight bestsellers, or mark gadgets which are operating low on inventory.

Now, if you happen to’re already utilizing WooCommerce, you might need seen it comes with a fundamental sale badge characteristic that mechanically seems if you scale back a product’s worth.

Whereas the WooCommerce sale badge works high quality for easy wants, let’s be sincere – it’s fairly restricted when it comes to what you are able to do with it.

You possibly can’t simply change how the badge seems, add new badge sorts, or management precisely the place they seem in your product photographs.

In the meantime, customized product badges mean you can present your model’s persona extra. Most significantly, although, authentic badges can extra successfully draw consideration to particular merchandise.

That means, you may drive extra gross sales in your on-line retailer. 💰

On this information, we’ll stroll you thru 2 confirmed strategies so as to add and customise product badges in WooCommerce. Each approaches gives you full management over how they give the impression of being and work.

You need to use the short hyperlinks under to skip to your most popular methodology:

Technique 1: Use YITH WooCommerce Badge Administration (Extra Customizable)

Let’s begin with our favourite instrument for including customized product badges to your WooCommerce retailer.

We suggest utilizing YITH WooCommerce Badge Administration as a result of it makes it tremendous simple so as to add and customise product badges in your on-line retailer.

Plus, we’ve examined many YITH plugins over time, like those for including subscriptions and product movies, and so they all the time work nice for our customers.

Need to present a particular badge in the course of the holidays? Or perhaps show how a lot cash prospects will save? This plugin can do all that. You possibly can even set badges to point out up at sure occasions and conceal them later.

You can begin with both the free or premium model of the plugin. The free model is ideal if you happen to simply wish to add easy textual content or picture badges to your merchandise.

On this information, we’ll present you learn how to use the premium model, however most steps will work the identical means for each. Simply do not forget that some cool options, like badges that mechanically present low cost quantities, solely include the premium model.

Prepared to begin? First, you’ll have to buy the plugin from YITH’s web site.

Then log in to your YITH account, go to the ‘Licenses & Downloads’ tab, and click on on the ‘Obtain Integration’ button to obtain the file.

Right here’s a tip: don’t shut this web page after downloading since you’ll want the license key that’s proven there.

Subsequent, go to your CMS dashboard and set up the plugin. For extra info, we’ve a step-by-step information on learn how to set up a CMS plugin.

When it’s lively, you’ll see a setup display screen asking to your YITH electronic mail and license key. Simply copy these from the YITH web site and click on ‘Enable license.’

When you see the message saying your license is lively, you’re all set!

Now, click on ‘Go to plugin dashboard,’ and you can begin creating your first customized badge.

Step 1: Conceal the Default WooCommerce Sale Badge

First, we have to cover WooCommerce’s built-in sale badge so it doesn’t conflict with our customized product badges. 

The method is absolutely easy. Go to your CMS dashboard and click on on YITH » Badge Administration. Then, navigate to the ‘Common Settings’ tab.

Right here, you’ll discover an choice that claims ‘Conceal WooCommerce “On sale” badge.’ Go forward and switch that on.

Then, underneath ‘Conceal “On sale” on:’, choose ‘All merchandise’ to verify the default badge doesn’t present up wherever in your retailer.

Whilst you’re within the settings, you would possibly discover another useful choices. You possibly can select to cover your customized badges in sure locations, just like the sidebar or single product pages.

That is nice if you wish to maintain your retailer trying clear and arranged. For instance, in case your cellular website feels too crowded, you may cover badges there, too.

Don’t overlook to click on the ‘Save Choices’ button on the backside of the web page if you’re performed.

Step 2: Create Your Bespoke Badge

Now comes the enjoyable half: creating your first customized product badge in WooCommerce!

Head over to the ‘Badges’ tab and click on the ‘Create Badge’ button to get began.

The plugin offers you 4 several types of badges to select from: textual content badge, picture badge, CSS badge, or superior badge for gross sales merchandise.

Every kind permits you to create distinctive methods to spotlight your merchandise. For instance, if you wish to mark merchandise as “New Arrival” or “Vegan Pleasant,” the primary three choices work nice.

However right here’s a tip: if you happen to’re creating low cost badges, we strongly suggest utilizing the superior choice, which mechanically updates based mostly in your product’s worth modifications.

After selecting your badge kind, give it a reputation that helps you bear in mind what it’s for.

Should you’ve chosen a picture, CSS, or superior badge, you’ll see an entire assortment of pre-made badge designs proper within the plugin.

You possibly can choose whichever one you want. These ready-to-use badges prevent time, and you’ll nonetheless customise them to match the fashion of your WooCommerce pages.

This plugin actually shines in its customization choices. Relying on which badge kind you picked, you may regulate all kinds of settings to make your badge look good in your product photographs.

Need to change the colour? Simple.

Want to regulate how clear it’s? No downside.

You possibly can even rotate the badge or transfer it round in your merchandise till it’s in simply the fitting spot.

For our instance, we made the badge actually pop by altering its colour to crimson and inserting it within the prime proper nook of the product picture.

These small tweaks could make a giant distinction in how successfully your badges get individuals’s consideration.

Whenever you’re pleased with how every part seems, simply click on ‘Save badge’ to complete up.

Step 3: Create a Rule to Show Your Badge

Now that we’ve created our customized badge, let’s inform WooCommerce precisely the place and when to point out it.

Head over to the ‘Badge Guidelines’ tab and click on ‘Set Rule.’

Consider guidelines as directions that inform your badges when to seem in your product photographs.

The plugin offers you 4 primary methods to manage the place your badges present up: merchandise badge, class badge, tag badge, and delivery class badge.

You possibly can select the ‘Merchandise badge’ rule so as to add badges to sure gadgets or the ‘Class badge’ rule to cowl whole product classes.

In the meantime, the tag badge rule reveals badges on merchandise sharing the identical WooCommerce tag, and the delivery class badge rule shows badges based mostly on delivery choices.

Every rule targets completely different product features, however all of them work in an analogous means. So, you simply want to select what works finest to your wants.

Let’s use the merchandise badge rule for this instance because it’s the most typical alternative.

Subsequent, give your rule an easy title so yow will discover it simply later.

Then, search for the ‘Present badge in:’ setting. That is the place you resolve which merchandise get your badge. You possibly can select to point out it on all merchandise, current additions, gadgets on sale, featured standard merchandise, and even simply merchandise which are in inventory.

Let’s say you’re making a rule on the market gadgets. If you choose ‘On sale merchandise,’ then your badge will mechanically seem everytime you mark a product as being on sale. It’s that easy!

However some choices include extra settings so that you can configure. For instance, if you happen to choose ‘Solely current Merchandise,’ you may set badges to seem on gadgets added inside the previous couple of days (like 7, 14, or 30 days).

This makes it tremendous simple to mechanically spotlight new arrivals in your retailer with out manually including badges to every product.

Typically, you would possibly wish to maintain sure merchandise badge-free. That’s the place the ‘Exclude merchandise’ setting turns out to be useful.

Simply allow this setting and sort within the names of any merchandise you don’t wish to present the badge for. This stuff will keep badge-free even when they match your different guidelines.

Subsequent, choose which badge design you wish to use within the ‘Badge to assign’ dropdown.

Now, right here’s the place it will get actually versatile. You possibly can schedule when your badges seem and select who will get to see them.

The ‘Schedule rule’ choice is ideal for limited-time offers.

Whenever you allow it, the plugin will ask you to set begin and finish dates to your badges.

And if you wish to present particular badges to sure prospects, like displaying a “VIP Low cost” badge solely to probably the most loyal prospects, you are able to do that, too.

To do that, simply choose ‘Solely particular customers or consumer roles’ within the ‘Present badge to’ setting. Then, kind in your most popular consumer roles or particular person usernames under it.

When every part seems proper, simply click on ‘Save Rule,’ and also you’re all set!

Be at liberty to go to your retailer’s entrance finish to see your new product badges in motion.

Should you’re utilizing the superior badge kind on the market gadgets, you’ll see it displaying each the low cost share and the precise cash saved, serving to prospects shortly spot the most effective offers.

Technique 2: Use Bespoke Code (Free and Easy)

Should you don’t want the superior choices from the primary methodology, or if you happen to’re in search of a very free choice, then we’ve a easy code methodology that gained’t price you something.

And if you happen to’re not comfy with code, don’t fear! We’ll be utilizing the WPCode plugin to make this tremendous simple and protected. It means that you can add customized code snippets in CMS with out being a developer or risking breaking your web site.

We’ll use the free model of WPCode for this tutorial as a result of it really works completely for our wants. That stated, there’s a premium model with cool options like AI code era and testing mode.

For extra info, simply try our in-depth WPCode assessment.

First, it’s essential set up the CMS plugin in your admin space.

Then, go to Code Snippets » + Add Snippet. Hover over the ‘Add Your Bespoke Code (New Snippet)’ part after which click on on the ‘+ Add Bespoke Snippet’ button.

Subsequent, select ‘PHP Snippet’ when requested in regards to the code kind.

This tells CMS what kind of code we’re utilizing.

Now, you must give your snippet a reputation that helps you bear in mind what it does.

Since this code will take away the default WooCommerce sale badge and add each new product badges and dynamic low cost badges, you would possibly name it one thing like “Bespoke WooCommerce Badges.”

As soon as that’s performed, paste the code snippet we’ve supplied under within the ‘Code Preview’ field.

This code does one thing actually cool. It mechanically calculates low cost percentages and reveals them on the gross sales badge. Plus, it provides a “New” badge to merchandise added within the final 7 days.

// Take away default WooCommerce sale flash badge
remove_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 customized badges to merchandise
add_action( 'woocommerce_before_shop_loop_item_title', 'add_custom_product_badges', 10 );
perform add_custom_product_badges() {
    international $product;

    // Initialize a variable to trace whether or not a badge has been displayed
    $badge_displayed = false;

    // For merchandise with any quantity of low cost share (1% or extra)
    if ( $product->is_on_sale() ) {
        // Get common and sale costs
        $regular_price = floatval( $product->get_regular_price() );
        $sale_price    = floatval( $product->get_sale_price() );

        // Deal with variable merchandise
        if ( $product->is_type('variable') ) {
            // Get variation costs
            $regular_price = floatval( $product->get_variation_regular_price( 'max', true ) );
            $sale_price    = floatval( $product->get_variation_sale_price( 'min', true ) );
        }

        // Calculate low cost share if common worth is legitimate
        if ( $regular_price > 0 ) {
            $discount_percentage = ( ( $regular_price - $sale_price ) / $regular_price ) * 100;

            // Show badge if low cost is 1% or extra
            if ( $discount_percentage >= 1 ) {
                echo '<span class="product-badge sale-product">' . spherical( $discount_percentage ) . '% off!</span>';
                $badge_displayed = true; // Badge has been displayed
            }
        }
    }

    // Solely present the "New" badge if no different badge has been displayed
    if ( ! $badge_displayed ) {
        // For "New" merchandise added within the final 7 days
        $post_date  = get_the_time( 'Y-m-d', $product->get_id() );
        $post_stamp = strtotime( $post_date );
        $newness    = 7; // Variety of days the product is taken into account new

        // Examine 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;
        }
    }
}

Need to regulate how lengthy a product is taken into account “new”? Simply search for the road the place it says $newness = 7 within the code. You possibly can change that quantity 7 to nonetheless many days you need, like 14 for 2 weeks or 30 for a month.

To complete up, click on the ‘Inactive’ button till it modifications to ‘Energetic,’ then hit ‘Save Snippet.’

Subsequent, we have to fashion our badges to make them look nice in your merchandise. Let’s add some CSS to regulate their look.

So as to add a brand new snippet, comply with the identical steps as earlier than, however this time, select ‘CSS Snippet’ when requested.

Identify your snippet one thing descriptive, like “Product Badge Types.” It will make it easier to discover it simply if it’s essential make modifications later.

Right here’s the CSS code that can make your badges look skilled. Simply paste this into the ‘Code Preview’ field:

/* Frequent types for all product badges */
.product-badge {
    place: absolute;
    prime: -10px;      /* Place on the prime edge */
    proper: -10px;    /* Place on the proper edge */
    padding: 12px 16px;
    border-radius: 50%;
    colour: #ffffff;
    font-size: 16px;
    font-weight: daring;
    z-index: 99;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Types for the "New" badge */
.new-product {
    background-color: #4CAF50; /* Inexperienced background */
}

/* Types for the "Sale" badge */
.sale-product {
    background-color: #FF0000; /* Crimson background */
}

Let’s break down what you may customise on this code.

Need your badges in a unique spot? To do that, you may change the prime and proper values. For instance, altering prime: -10px to prime: 10px will transfer the badge down.

Don’t like the colours? It’s tremendous simple to vary them. Simply discover the background-color traces and exchange the colour codes.

For example, if you need a blue sale badge as an alternative of a crimson one, change #FF0000 to #0000FF. You can even make the badges greater or smaller by adjusting the font-size worth.

Need to be taught extra about tweaking these types? Try our beginner-friendly information on CSS in CMS.

When you’re performed, simply click on the ‘Inactive’ button to make it ‘Energetic,’ then hit ‘Save Snippet.’

That’s it!

Your badges ought to now seem in your product photographs. Right here’s an instance of what ours seems like utilizing our CSS code:

Uncover Extra WooCommerce Ideas and Methods

Now that you understand how to show product badges in WooCommerce, you would possibly wish to discover different methods to enhance your on-line retailer. Listed here are some useful guides we suggest:

We hope this text has helped you learn to add product badges in WooCommerce. You might also wish to try our skilled picks of the most effective WooCommerce product grid plugins and our information on learn how to velocity up WooCommerce efficiency.

Should you favored this text, then please subscribe to our YouTube Channel for CMS video tutorials. You can even discover us on Twitter and Fb.