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

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

This can be a widespread query we get from our readers, and we’re blissful to let you know that the reply is sure. You completely can!

Customized product badges are a improbable method 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 affords.

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

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

What Are WooCommerce Product Badges?

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

These are product badges, they usually’re extremely helpful for ensuring gadgets stand out in your online store.

Consider them as digital stickers that draw your clients’ consideration to vital product particulars like sales, new arrivals, or limited-time affords.

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

Now, when you’re already utilizing WooCommerce, you might need observed it comes with a primary sale badge function that mechanically seems while you cut back a product’s value.

Whereas the WooCommerce sale badge works wonderful for easy wants, let’s be trustworthy – it’s fairly restricted by way of what you are able to do with it.

You may’t simply change how the badge appears to be like, add new badge varieties, or management precisely the place they seem in your product images.

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

That means, you’ll be able to 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 will provide you with full management over how they appear and work.

You need to use the fast hyperlinks under to skip to your most popular technique:

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

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

We suggest utilizing YITH WooCommerce Badge Management 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 videos, they usually all the time work nice for our customers.

Wish to present a particular badge throughout the holidays? Or perhaps show how a lot cash clients will save? This plugin can do all that. You may 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 version is ideal when you simply wish to add easy textual content or picture badges to your merchandise.

On this information, we’ll present you how one can use the premium version, however most steps will work the identical means for each. Simply keep in mind that some cool options, like badges that mechanically present low cost quantities, solely include the premium model.

Prepared to start out? 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 Plugin’ 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 WordPress dashboard and set up the plugin. For extra info, now we have a step-by-step information on how to install a WordPress plugin.

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

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

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

Step 1: Cover the Default WooCommerce Sale Badge

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

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

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

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

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

That is nice if you wish to preserve your retailer wanting clear and arranged. For instance, in case your cellular website feels too crowded, you’ll be able to conceal badges there, too.

Don’t neglect to click on the ‘Save Choices’ button on the backside of the web page while you’re carried out.

Step 2: Create Your Customized 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 allows you to create distinctive methods to focus on 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: when you’re creating low cost badges, we strongly suggest utilizing the superior possibility, which mechanically updates based mostly in your product’s value modifications.

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

If you happen to’ve chosen a picture, CSS, or superior badge, you’ll see a complete assortment of pre-made badge designs proper within the plugin.

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

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

Wish to change the colour? Straightforward.

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

You may even rotate the badge or transfer it round in your merchandise till it’s in simply the precise spot.

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

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

Once you’re proud of how the whole lot appears to be like, 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 major methods to regulate the place your badges present up: merchandise badge, class badge, tag badge, and delivery class badge.

You may select the ‘Merchandise badge’ rule so as to add badges to sure gadgets or the ‘Class badge’ rule to cowl total 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 totally different product facets, however all of them work in an identical means. So, you simply want to choose what works greatest on your wants.

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

Subsequent, give your rule a simple title so you could find it simply later.

Then, search for the ‘Present badge in:’ setting. That is the place you determine which merchandise get your badge. You may select to point out it on all merchandise, current additions, gadgets on sale, featured popular products, 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 straightforward!

However some choices include extra settings so that you can configure. For instance, when you choose ‘Solely current Merchandise,’ you’ll be able to set badges to seem on gadgets added inside the previous few 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.

Generally, you may wish to preserve sure merchandise badge-free. That’s the place the ‘Exclude merchandise’ setting turns out to be useful.

Simply allow this setting and kind 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 may schedule when your badges seem and select who will get to see them.

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

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

And if you wish to present particular badges to sure clients, like displaying a “VIP Low cost” badge solely to probably the most loyal customers, 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 the whole lot appears to be like proper, simply click on ‘Save Rule,’ and also you’re all set!

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

If you happen to’re utilizing the superior badge kind on the market gadgets, you’ll see it displaying each the low cost proportion and the precise cash saved, serving to clients rapidly spot the most effective offers.

Methodology 2: Use Customized Code (Free and Easy)

If you happen to don’t want the superior choices from the primary technique, or when you’re in search of a totally free possibility, then now we have a easy code technique that received’t price you something.

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

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

For extra info, simply take a look at our in-depth WPCode review.

First, it’s essential install the WordPress plugin in your admin space.

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

Subsequent, select ‘PHP Snippet’ when requested concerning the code kind.

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

Now, it’s a must to 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 may name it one thing like “Customized WooCommerce Badges.”

As soon as that’s carried out, 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() {
    world $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 proportion (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 proportion if common value 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

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

Wish to alter how lengthy a product is taken into account “new”? Simply search for the road the place it says $newness = 7 within the code. You may change that quantity 7 to nevertheless 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 type 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, observe the identical steps as earlier than, however this time, select ‘CSS Snippet’ when requested.

Identify your snippet one thing descriptive, like “Product Badge Types.” This may show you how to discover it simply if it’s essential make modifications later.

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

/* Frequent kinds 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’ll be able to customise on this code.

Need your badges in a unique spot? To do that, you’ll be able to 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 alter them. Simply discover the background-color traces and exchange the colour codes.

As an illustration, if you need a blue sale badge as an alternative of a purple one, change #FF0000 to #0000FF. You may as well make the badges larger or smaller by adjusting the font-size worth.

Wish to be taught extra about tweaking these kinds? Take a look at our beginner-friendly information on CSS in WordPress.

When you’re carried out, 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 appears to be like like utilizing our CSS code:

Uncover Extra WooCommerce Ideas and Tips

Now that you know the way to show product badges in WooCommerce, you may wish to discover different methods to enhance your on-line retailer. Listed below are some useful guides we suggest:

We hope this text has helped you discover ways to add product badges in WooCommerce. You may additionally wish to take a look at our knowledgeable picks of the best WooCommerce product grid plugins and our information on how to speed up WooCommerce performance.

If you happen to preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may as well discover us on Twitter and Facebook.