Tag: sale badges

Posted on by — Leave a comment

How to Add Product Badges in WooCommerce: Free + Pro Methods (2026)

Learning how to add product badges in WooCommerce helps you make important product information visible before a shopper opens a product page. A simple “30% Off,” “New Arrival,” “Low Stock,” or “Free Shipping” label can help visitors understand an offer while they scan a WooCommerce shop or category page.

In this guide, you’ll learn how to add product badges in WooCommerce without custom theme code. We’ll start with the free version of Sale Badges and Product Labels for WooCommerce, then cover the Pro features that help when you need image badges, advanced targeting, countdown timers, notification bars, or store-feature tools.

Quick answer: install and activate the plugin, open Sale Booster in WordPress, create a badge, choose its design, assign a product condition, and save. The badge then appears on matching products in your shop or product pages.

Table of Contents

How to Add Product Badges in WooCommerce: What You Need

A WooCommerce product badge is a visual label displayed on a product image or product card. It can communicate a promotion, product status, availability, or a useful buying detail without changing the product title.

Common examples include:

  • Promotion: Sale, 20% Off, Black Friday, or Clearance.
  • Availability: Sold Out, Back in Stock, Limited Stock, or Pre-Order.
  • Merchandising: New Arrival, Best Seller, Featured, or Staff Pick.
  • Service information: Free Shipping, Handmade, or Secure Payment.
  • Urgency: a countdown timer for a genuine limited-time offer.

WooCommerce includes a default “Sale!” indicator for sale-priced products, but it does not provide a complete visual badge system for every use case. A badge plugin adds reusable designs, targeting rules, placement controls, and—depending on the version—timers and campaign bars.

How to Add Product Badges in WooCommerce: Choose a Method

MethodBest forWhat you get
Custom codeDevelopers with a very specific theme workflowMaximum control, but you maintain the PHP/CSS and compatibility yourself
Free pluginMost stores adding text, CSS, or basic automatic labelsVisual badge creation, live preview, product/category/tag rules, sale and stock conditions, scheduling, and shortcode support
Pro pluginCampaigns and advanced merchandisingImage and modern badge libraries, advanced customer/product rules, countdowns, notification bars, popups, embeds, Quick View, and Sticky Add to Cart

For most store owners, the free plugin is the simplest way to learn how to add product badges in WooCommerce and replace a plain sale indicator with a consistent badge system. You can upgrade later when your campaigns need features that are not part of the free version.

How to Add Product Badges in WooCommerce: Install the Free Plugin

Before you begin, make sure WooCommerce is installed and active. The plugin requires WooCommerce because its display rules read product, sale, stock, category, and tag data from your store.

  1. In WordPress, go to Plugins → Add New.
  2. Search for Sale Badges and Product Labels for WooCommerce.
  3. Click Install Now, then Activate.
  4. Open Sale Booster from the WordPress admin menu.

You can also download the plugin from the WordPress.org plugin directory. Keep WooCommerce active while configuring the badges so the product selector and conditions can load correctly.

WordPress Plugins screen with WooCommerce active and Add New Plugin highlighted
First, check that WooCommerce is active, then click Add New Plugin.
Search results showing the Sale Booster plugin and its Activate button
Search for the plugin, click Install Now, and then Activate.
Activated Sale Booster plugin and its WordPress admin menu entry
After activation, open Sale Booster from the WordPress menu.

How to Add Product Badges in WooCommerce: Create Your Badge

From Sale Booster, open the badges screen and choose Add New. Give the badge an internal name that describes its purpose, such as “Summer Sale,” “New Arrival,” or “Free Shipping.” Turn on its status when you are ready to preview it.

Add product badges in WooCommerce using the Sale Booster Badges tab and Add New button
Go to Sale Booster → Badges → Add New.

Use a name that will still make sense when your badge library grows. The internal name is for administration; the customer-facing label is configured in the badge design settings.

Choose a badge type

The free version includes flexible CSS labels and a basic fixed-date countdown. Start with a CSS label when you want short text that adapts cleanly to your theme. The screenshots also show Pro options; use the feature labels below to choose the right method.

  • CSS label: a text-based badge with selectable shapes, colors, typography, position, and effects.
  • Image label: an uploaded or library image, available in Pro.
  • Modern or advanced label: preset visual treatments and deeper style controls, available in Pro.
  • Countdown timer: a basic fixed-date timer is included in Free; additional designs and evergreen timers are available in Pro.

Enter customer-facing text such as New, Best Seller, or {saved_percent} OFF when the dynamic discount placeholder is available in your editor. Dynamic placeholders are useful because the displayed discount can follow the product’s current pricing instead of requiring a separate badge for every percentage.

For the example below, name the badge Badge-New and choose New Arrival under Quick Badges. In CSS Labels, keep the label text short, select On Image, and choose a tag shape. Enable Display on Archive Page and Display on Product Page if you want both locations.

Design New Arrival product badges in WooCommerce with a CSS label and tag shape
Choose the New Arrival template, edit the label, and preview its shape on the product image.

Style and position your product badge

Use the live preview while you choose the shape, color, font size, weight, opacity, rotation, and position. The goal is to make the badge noticeable without hiding the product image, price, or product title.

Useful placement choices include top-left, top-right, bottom-left, and bottom-right. If the label overlaps a theme’s sale indicator, either move the new label or enable the option to hide the default WooCommerce on-sale badge. You can also adjust the hook or display position when a theme places product images in an unusual markup structure.

Keep the text short. “30% Off” is easier to scan than a sentence, while “Free Shipping” is usually clearer than a small icon with no explanation. On mobile, test the smallest product card in your grid; a badge that looks balanced on desktop can cover too much of the image on a narrow screen.

The screenshot uses a 14-pixel font, 30-pixel line height, font weight 600, and a 100-by-30-pixel badge. Treat these as a starting point: adjust the archive and product page styles separately, then check that the full label fits. Select Top and Left to place it in the upper-left corner.

Style controls for product badges in WooCommerce, including color, size, and top-left placement
Adjust the color and dimensions for both page types, then choose the badge position.

How to Add Product Badges in WooCommerce: Target Products

A badge becomes useful when it appears on the right products automatically. In the Products & Conditions area, choose the condition that matches your campaign.

  • Specific products: show the badge on a hand-picked set of products.
  • Category: target every product in a category such as Shoes or Summer Collection.
  • Tag: target products marked with a WooCommerce tag.
  • On sale: apply a sale label to products with an active sale price.
  • Stock status: show In Stock, Out of Stock, or Backorder labels.
  • All products: use a store-wide message when the same label belongs everywhere.

Use the narrowest condition that fits the message. A “Clearance” badge should not appear on every product just because the store has one clearance category. If you combine multiple rules, review the result on both a shop archive and a single product page.

Example: automatically label new arrivals (Pro)

For a New Arrival badge, set Stock status → In stock. Click And in the same group, then choose Recently Added → Days → 7. This Pro rule shows the badge only when both conditions match. Click Save.

Keep these rules in one AND group. Putting them in separate OR groups would also label older products simply because they are in stock. In the free version, select your new products manually or use a dedicated product tag instead.

Rules for product badges in WooCommerce combining In stock AND Recently Added within 7 days
Pro example: show New Arrival only on in-stock products added within the last seven days.

For more examples, see the WooCommerce badge conditions documentation.

Add a dynamic percentage discount badge

Create a second badge named Badge-Saved-Percent. Choose a percentage-off template, open CSS Labels, and enter {saved_percent} OFF in the Label field. The placeholder includes the percent sign, so you do not need to add another one. For example, a product reduced from $100 to $80 displays 20% OFF.

Add percentage-off product badges in WooCommerce using the saved_percent label placeholder
Enter {saved_percent} OFF so the discount text follows each product’s pricing.

Choose a clear background and text color. If the label needs more separation from the product photo, set Shadow Color to black and Shadow to 2. Keep animation off when a static badge communicates the offer clearly.

Percentage discount badge preview with black Shadow Color and Shadow set to 2
Optional: use a black shadow with a value of 2 to separate the badge from the product image.

Next, open Products & Conditions and select Is on sale → Yes. Click Save. This targets discounted products instead of applying a discount claim to your entire catalog. Check products with different discounts and at least one product that is not on sale.

Apply product badges in WooCommerce to sale products with Is on sale set to Yes
Set Is on sale to Yes, then save the percentage discount badge.

How to Add Product Badges in WooCommerce: Verify the Result

Save the badge, then open a shop or category page that contains a matching product. Check the result at desktop and mobile widths. Also open a single product page if you want the badge there too.

How to add product badges in WooCommerce: storefront showing New Arrival and percentage-off labels
Storefront result: New Arrival and dynamic discount badges appear on matching products.

If the badge does not appear, check these items first:

  1. The badge status is enabled.
  2. The product actually matches the selected condition.
  3. The badge is configured to show in the location you are viewing.
  4. Your theme has not moved or replaced the WooCommerce product-image hook.
  5. A cache or optimization plugin is serving an older page.
  6. The badge is not hidden by the global settings or a mobile-only rule.

How to Add Product Badges in WooCommerce with Pro

The Pro version is useful when a text label is not enough for your promotion. It adds a library of image labels, modern badge presets, advanced conditions, and campaign elements that work across product pages and the wider store.

Use image and modern badges

Choose from more than 200 image-label designs, upload your own artwork, or use modern gradient and preset badge styles. Image labels are a good fit for seasonal campaigns, “Black Friday,” “Pre-Order,” and other messages where the visual treatment matters as much as the words.

Target by customer or product data

Pro conditions can target user login status, user roles, total customer spend, quantity, regular price, sale price, total price, shipping class, best sellers, recently added products, and other product attributes. These rules let you show a VIP message to logged-in customers, a volume message to products above a quantity threshold, or a best-seller label without maintaining a manual product list.

Add a product countdown badge

A countdown badge can show the remaining time for a genuine limited-time offer. Free includes a basic fixed-date timer. Pro adds more timer designs and evergreen modes; the progress-bar design shown below is a Pro example.

Open the badge’s Countdown tab, choose On Image, and select a timer style. Set Countdown Timer Mode to Pick A Start / End Date, then enter your own campaign’s start and end times. The dates in this screenshot are examples.

To reproduce the layout, choose Bottom and Bar, then adjust the background, text, and progress colors. Set matching product rules and save the badge. A timer communicates the deadline; also schedule the actual WooCommerce sale to end when promised.

Countdown badge editor with a fixed start and end date and a bottom-bar timer preview
Pro example: choose a progress timer, enter your campaign dates, and position it as a bottom bar.

Use notification bars for store-wide campaigns

Pro also includes notification bars for announcements, actions, countdowns, free shipping, and other campaign messages. These are separate from the product countdown badge shown above. Open Sale Booster → Notification Bars to create a store-wide message, then choose its content, timing, and display rules.

For more examples, see the WooCommerce sales countdown timer guide.

Optional: add a badge with a shortcode

If your theme or page builder needs a manual placement, the plugin provides the [asnp_badge] shortcode. Use [asnp_badge] for the current product context, or use [asnp_badge product_id="7"] when you need to render the badge for a specific product. The hide="1" option can be used for product-page placement.

Shortcodes are best used when you understand the page layout. For normal shop grids and product templates, automatic placement is usually easier to maintain because the badge follows your WooCommerce product output.

Best Practices When You Add Product Badges in WooCommerce

  • Use one clear message per badge. Do not combine “New,” “Sale,” “Limited,” and “Free Shipping” into one tiny label.
  • Match the rule to the claim. Only show scarcity or deadline language when the offer or inventory really is limited.
  • Keep a consistent color system. Reserve one accent for discounts, one for availability, and one for shipping or service information.
  • Test product-image contrast. A white badge can disappear on light product photography; use the live preview with representative products.
  • Check mobile layouts. Make sure the label does not hide the product image or cover a variation selector.
  • Schedule campaign badges. Add start and end dates for seasonal promotions so expired labels do not remain visible.
  • Pair badges with a useful landing page. A “Summer Sale” badge should lead to a page where shoppers can browse the matching products.

Free vs Pro: which version do you need?

Choose the free version if you need custom CSS labels, basic product/category/tag/sale/stock rules, scheduling, positioning controls, and a no-code way to improve your WooCommerce product cards.

Choose Pro if you need image-label libraries, modern presets, advanced user and price conditions, product image highlights, countdown timer templates, notification bars, sales popups, embeds, Quick View, or Sticky Add to Cart. The free plugin and Pro extension are designed to work together, so you can begin with a small badge system and add campaign features as your store grows.

See the Pro features and upgrade options →

Frequently asked questions

Can I add product badges in WooCommerce without coding?

Yes. Install Sale Badges and Product Labels for WooCommerce, create a badge in Sale Booster, choose a condition, and save. The plugin handles the front-end placement for standard WooCommerce layouts.

Can I show a badge only on sale products?

Yes. Choose the on-sale condition so the label is applied to products with an active sale price. The badge can be removed automatically when the product no longer matches the rule.

Can I replace the default WooCommerce “Sale!” badge?

Yes. Create a custom sale label and use the plugin setting that hides the default WooCommerce on-sale badge. Check the result in both the shop loop and the single product layout.

Can I show different badges by category?

Yes. Create separate badges or rules and target each WooCommerce category. This is useful for messages such as “New Season,” “Clearance,” or “Free Shipping” that apply to different product groups.

Why is my badge not showing?

Confirm that the badge is active, the product matches its condition, the display location is enabled, and caching is cleared. If the theme changes the standard WooCommerce product-image markup, use the plugin’s hook or compatibility settings and test again.

Related tutorials: WooCommerce sale badge guide, product labels guide, and sales countdown timer guide.

Next steps

You now have a complete no-code workflow for how to add product badges in WooCommerce: install the plugin, create a reusable design, target the right products, verify the storefront, and add Pro campaign features only when you need them.

Start with one focused badge—such as a percentage-off label for sale products—then add category rules, scheduling, and a countdown bar for your next real promotion. For deeper setup details, continue with the badge installation documentation and the badge management guide.

Updated on by — Leave a comment

How to Add Sales Countdown Timer to Products in WooCommerce

In this guide, we’ll guide you step-by-step on incorporating a sales countdown timer into your WooCommerce product listings. Explore the dynamic feature of countdown timers and their potential to create a sense of urgency and excitement among your customers. Learn how to strategically use countdown timers to promote limited-time sales, special offers, or exclusive deals, enhancing your online store’s overall appeal. Whether aiming to boost sales, increase customer engagement, or add an interactive element to your product pages, this tutorial provides comprehensive insights. Join us to empower your WooCommerce store with the impactful addition of sales countdown timers and elevate the shopping experience for your customers.

Video Tutorial

Contents

1. Install Sale Badges and Product Labels for WooCommerce

2. Add Countdown Timer to All Products in WooCommerce

3. Add Countdown Timer to Products in WooCommerce

4. Add Countdown Timer to Categories Products in WooCommerce

5. Add Countdown Timer to On Sale Products in WooCommerce

6. Add Countdown Timer to Out of Image in Product Page

Accordion title 2

What is a Sales Countdown Timer for Products?

A Countdown Timer for Products is a marketing tool that creates a sense of urgency and encourages potential customers to purchase within a specific time frame. Additionally, it involves displaying a timer on a product or promotional page that counts down to a predetermined deadline. The timer is often accompanied by messages such as “Limited-time offer” or “Sale ends soon,” aiming to motivate customers to take immediate action.

What are the benefits of a Sales Countdown Timer for Products?

The use of a Sales Countdown Timer for Products offers several benefits for businesses looking to boost sales and engage customers:

Urgency and Scarcity: Countdown timers create a sense of urgency and scarcity by highlighting that a special offer or promotion is available for a limited time. This can prompt customers to make quicker purchasing decisions, fearing they might miss out on a good deal.

Increased Conversion Rates: Additionally, the psychological impact of a timer often leads to increased conversion rates. When customers perceive a time constraint, they are more likely to take immediate action and complete their purchase, contributing to higher conversion rates.

Promotion Reinforcement: Moreover, countdown timers serve as a visual and dynamic reinforcement of promotional messages. They draw attention to ongoing sales, discounts, or product launches, ensuring that customers are aware of the limited-time nature of the offer.

Customer Engagement: Furthermore, the dynamic and visually appealing nature of countdown timers can capture the attention of website visitors. This engagement is valuable for retaining interest and encouraging visitors to explore the promoted products or offers.

Brand Perception: Using countdown timers strategically can enhance the perception of your brand as dynamic and innovative. It shows that your business is proactive in providing value to customers and creates a positive association with time-limited opportunities.

Promotion of Special Events: Countdown timers are effective for building anticipation and excitement around special events, such as product launches or flash sales. The ticking clock creates a sense of anticipation, motivating customers to be part of the event.

In summary, a Timer for Products is a powerful marketing tool that leverages psychological triggers to drive sales, engage customers, and enhance the overall effectiveness of promotional efforts.

How to Add Sales Countdown Timer to Products in WooCommerce

In this article, we will provide you with a detailed guide to adding Sales Countdown Timers to Woocommerce All Products and specific Products and Categories and Is On Sale and Stock Out Of Stock and Backorder.

Are you ready? Let’s dive in.

Install Sale Badges and Product Labels for WooCommerce

Follow these steps to install the Sale Badges and Product Labels for the WooCommerce plugin.

  • Navigate To Plugins.
  • Woocommerce Should be installed and Activated.
  • Click on Add New Plugin.
Plugins
Install Badge and Product Label for WooCommerce

Now, Sale Badges and Product Labels for WooCommerce have been installed. Navigate to the Product Badges.

Product Badges

Add Countdown Timer to All Products in WooCommerce

  • Click on Add New
Add New Countdown Timer
Add New
  • To start, click on the ‘Timer‘ tab.
  • Next, enable the Timer Status and choose your preferred Timer Style.
  • Then, set the ‘From Date/Time‘ and ‘To Date/Time.’
  • Afterward, customize the Background Color and adjust the Timer Width Size.
  • Finally, alter the Timer Position as needed.
Adjustments to the Countdown Timer

After enabling the Timer and making modifications.

  • navigate to the ‘Products‘ tab.
  • Select ‘All Products.’
  • Save your changes.
Select All Products

Now you can view the Countdown Timer on the Archive Page.

Countdown Timer on the Archive Page

View the Countdown Timer on the Product Page.

Countdown Timer on the Product Page

Add Countdown Timer to Products in WooCommerce

Disable Status and Click on Add New.

Add New
  • Set a name, and you can enable or disable the status.
  • Begin by clicking on the ‘Timer‘ tab.
  • Enable the Timer Status and choose your preferred Timer Style.
  • Set the ‘From Date/Time‘ and ‘To Date/Time.’
  • Customize the Background Color and adjust the Timer Width.
  • Alter the Timer Position as needed.
Adjustments to the Countdown Timer
Change Timer Position

After enabling the Timer and making modifications.

  • Navigate to the ‘Products‘ tab.
  • Select ‘Products‘ and choose ‘Included.’
  • Pick the desired products, for example: ‘Album (woo-album)‘.
  • Save your changes.
Select Products

Visit the archive page to see the Timer on the Album product.

Countdown Timer on the Album product

View the Countdown Timer on the product page.

Countdown Timer on the product page

Add Countdown Timer to Categories Products in WooCommerce

Click on Add New.

Add New Timer
  • Set a name.
  • Start by clicking on the ‘Timer‘ tab.
  • Enable the Timer Status and choose your preferred Timer Style.
  • Set the ‘From Date/Time‘ and ‘To Date/Time.’
  • Customize the Background Color and adjust the Timer Width.
  • Adjust the Timer position.
Go To Timer Tab
Change Width Size
  • Navigate to the ‘Products‘ tab.
  • Select ‘Categories‘ and choose ‘Included.’
  • Choose the categories you desire, for example: ‘Clothing/Accessories.’
  • Save your changes.
Select Categories

Now you can see the Countdown Timer on the Archive Page.

Countdown Timer on the Archive Page

Observe the Countdown Timer on the Product Page.

Countdown Timer on the Product Page

Add Countdown Timer to On Sale Products in WooCommerce

Disable Status and Click on Add New.

Add New Countdown Timer
  • Set a name.
  • Begin by clicking on the ‘Timer‘ tab.
  • choose your preferred Timer Style.
  • Set the ‘From Date/Time‘ and ‘To Date/Time.’
  • Customize the Background Color and Text Color.
  • Alter the Timer Position as needed.
Selecy Countdown Timer
Change Timer Background Color
  • Navigate to the ‘Products‘ tab.
  • Select ‘Is on Sale‘ and choose ‘Yes‘.
  • Save your changes.
Choose Is on Sale

Now you can see the Timer on the Archive Page.

Countdown Timer Archive Page

Observe the Countdown Timer on the Product Page.

Timer in On-Sale Product

Add Countdown Timer to Out of Image in WooCommerce

If you want to display the Countdown Timer outside of the image on the Product Page, follow these steps :

  • Enable Status
  • Go to the ‘Settings‘ tab.
Go To Settings
  • Select General Tab
  • Change the Timer Position.
  • Select “Out of Image “.
  • Save Changes.
Select Out of Image

View the Countdown Timer Out of Image on the Product Page.

Countdown Timer Out of Image on Beanie with Logo Product Page
Countdown Timer Out of Image on Belt Product Page

Shortcodes

Sale Badges And Product Labels Plugin To Woocommerce has the below shortcodes.

  • [asnp_badge hide="1"] to use on the product page.
  • [asnp_badge] to use on the archive product or product listing page.

If you would like to show a specific product sale badges, then use the below shortcodes.

  • [asnp_badge product_id=”7″ hide=”1″] to use on the product page, replace “7” with your product ID.
  • [asnp_badge product_id=”7″] to use on the archive product or product listing page, replace “7” with your product ID.
Get FREE WooCommerce Sale Badges and Product Labels
Get PRO with up to 75% OFF for $30
Updated on by — Leave a comment

WooCommerce Sale Badge Free Plugin

Enhance your WooCommerce store with Sale Badges! Boost product visibility and customizable labels. Get started now!WooCommerc Sale Badge Free Plugin has the power to boost your store’s sales and wow your customers simultaneously. By highlighting special offers, discounts, or new arrivals, you can create a sense of excitement and urgency, encouraging customers to take action. In a crowded marketplace, standing out and creating a memorable shopping experience is essential. Product labels provide an opportunity to showcase your products uniquely and enticingly, ultimately leading to increased sales and customer satisfaction.

Contents

Boost Sales with Free WooCommerce Sale Badges

Unlock the full potential of our complimentary WooCommerce Sale Badge plugin, a dynamic tool designed to revolutionize your product presentation and significantly boost sales. This innovative plugin empowers you to effortlessly craft visually compelling product labels, capturing the attention of potential customers and driving increased sales. Elevate your online shopping experience by seamlessly integrating this plugin into your WooCommerce platform, ensuring that your products not only stand out with attractive labels but also entice customers to explore and make purchase decisions. Maximize the impact of your online store with the compelling features of the WooCommerce Sale Badge plugin.

Supercharge Sales with WooCommerce Sale Badge Free Plugin

Elevate your online retail game by downloading our complimentary WooCommerce Sale Badge plugin today. This powerful tool is designed to supercharge your sales effortlessly by allowing you to seamlessly integrate attention-grabbing badges onto your products. With this user-friendly plugin, you can enhance the visual appeal of your offerings, ensuring they stand out and attract potential customers. Take control of your sales strategy as you effortlessly highlight discounts, special offers, or exclusive deals, creating a more enticing shopping experience for your audience. Download the WooCommerce Sale Badge plugin now to unlock a new level of engagement and drive remarkable sales growth for your online store.

Installing Sale Badges and Product Labels for WooCommerce
in WordPress

WooCommerce Sale Badges and Product Labels elevates your store’s appeal with customized badges and countdown timers (PRO Version). Unlock the full potential of your WooCommerce store with captivating sale badges, product labels, and countdown timers. This all-in-one plugin empowers you to create eye-catching labels and scheduled badges for products, categories, and tags. Highlighting discount values, product quantities, ratings, shipping classes, stock status, and sale status, these labels provide valuable information to your customers. Plus, leverage the power of countdown timers to create urgency and drive conversions. With an intuitive interface, easily customize labels and replace default on-sale badges. Take your WooCommerce store to new heights with visually appealing badges, labels, and countdown timers tailored to your unique offerings. It enables you to your Product Woocommerce in under 2 minutes.

Install Sale Badges and Product Labels for WooCommerce

Follow these steps to install the Sale Badges and Product Labels for the WooCommerce plugin.

  • Navigate To Plugins.
  • Woocommerce Should be installed and Activated.
  • Click on Add New Plugin.
Plugins
Install Badge and Product Label for WooCommerce

Now, Sale Badges and Product Labels for WooCommerce have been installed. Navigate to the Product Badges.

Product Badges

Create a Percentage Off badge in WooCommerce

After Install WooCommerce Sale Badges and Product Labels Plugin, Navigate To Product badges.

  • Click on Add New
Create a Percentage Off
Create a Percentage Off
  • Set a Name your badge and check its status to enable it.
  • Navigate to the CSS Labels Tab.
  • Choose a label style.
  • Adjust the label width size and set the label text.
  • Customize the label color and change its position.
Create Sale Badge For Woocommerce
Create Sale Badge For Woocommerce

After modifying the CSS label, proceed to the “Products” tab.

  • Select “Products” and choose “Included.”
  • Pick the products you desire, for example: ‘Album,’ ‘Beanie (woo-beanie).’
  • Save your changes.
Select Products
Select Products

Additionally, Go to the archive page to see the CSS Labels.

Perentage off Badge on Archive Page
CSS Labels on Archive Page

Visit the Beanie product page and check out the CSS label.

CSS Label on Beanie Product Page
CSS Label on Product Page

Create a New Badge in Woocommerce

  • Click on Add New
Click on Add New For Create a New Badge in Woocommerce
  • Set a Name your badge and check its status to enable it.
  • Navigate to the CSS Labels Tab.
  • Choose a label style.
  • Customize the label width, set the text, and adjust the font size and line height.
  • Customize the label color and change its position.
Modify Badge
Create New Badge

After modifying the CSS label, proceed to the “Products” tab.

  • Select “Stock Status” and choose “in Stock”.
  • Save your changes.
In-stock Condition
Stock Status

Furthermore, visit the archive page to view the CSS labels on the ‘In Stock’ products.

New Badge on Archive Page

Visit the product page for the Album and inspect the CSS label

New Badge on Product Page
New Badge on Product Page

Create a Sale Badge in Woocommerce

  • Click on Add New
Click on Add New For Create Badge
  • Set a Name your badge and check its status to enable it.
  • Navigate to the CSS Labels Tab.
  • Choose a label style.
  • Customize the label width, set the text (e.g., ‘SALE’), and adjust the font size and line height.
  • Customize the label color and Change Border Radius
  • change its position.
Modify Sale Badge For Woocommerce
Modify Sale Badge For Woocommerce

After modifying the CSS label, proceed to the “Products” tab.

  • Select All Products.
  • Save your changes.
All Products
All Products

Moreover, go to the archive page to see the CSS labels on all products.

Visit the product page for the Hoodie with Logo and inspect the CSS labels

Create a Buy 2 Get 1 Free Badge in Woocommerce

  • Click on Add New
  • Set a Name your badge and check its status to enable it.
  • Navigate to the CSS Labels Tab.
  • Choose a label style.
  • Customize the label width, set the text (e.g., ‘Buy 2 Get 1 Free’), and adjust the font size and line height.
  • Customize the label color and Change Border Radius.
  • change its position with pixel.

After modifying the CSS label, proceed to the “Products” tab.

  • Choose categories, select “Included,” and pick “Clothing/Accessories” or your preferred category.
  • Navigate to the “Schedule” Tab.
  • Choose a date and specify both the ‘From Date’ and the ‘To Date’.
  • Save your Changes.

Additionally, Go to the archive page to see the CSS Labels in the ‘Clothing/Accessories’ category.

Visit the product page for the Beanie and inspect the CSS label

Shortcodes

Sale Badges And Product Labels Plugin To Woocommerce has the below shortcodes.

  • [asnp_badge hide="1"] to use on the product page.
  • [asnp_badge] to use on the archive product or product listing page.

If you would like to show a specific product sale badges, then use the below shortcodes.

  • [asnp_badge product_id=”7″ hide=”1″] to use on the product page, replace “7” with your product ID.
  • [asnp_badge product_id=”7″] to use on the archive product or product listing page, replace “7” with your product ID.

Add Multi-Language Support

First, set a name for the badge, then select a label style and customize it by adjusting the label color and width size. Then, click on “Translate.”

  • Choose a language, such as French, Portuguese, or German.
  • Add Translate Label and Add It.
  • Then, save your changes.

Display the label in French language.

Display the label in German language.

Get FREE WooCommerce Sale Badges and Product Labels
Get PRO with up to 75% OFF for €30
Updated on by — Leave a comment

Add Product Labels to WooCommerce Products (Full Guide)

In this guide, we’ll walk you through the process of adding labels to a specific set of products in your WooCommerce store. Discover the power of product categorization and how it can enhance your customers’ shopping experience. Learn to effectively highlight and differentiate products, creating a more organized and visually appealing online store. Whether you want to promote special items, create product distinctions, or simply improve your store’s organization, this tutorial has you covered. Join us to gain control over your product presentation and make your WooCommerce store more user-friendly and engaging.

Contents

0. Install Sale Badges and Product Labels for WooCommerce

1. Create Product Label

2. All Products

3. Products

4. Categories

5. Products & Categories

6. On Sale

7. “In Stock” and “Out Of Stock”, “on backorder” 

8. Tags

Why Need to add a Sale Badges and Product labels to Products in WooCommerce

Adding sale badges and product labels to custom products in WooCommerce is a strategic approach to enhance the visibility and appeal of your products. These visual elements can significantly impact customer engagement and sales. Here are three compelling reasons why you need to incorporate sale badges and product labels into your WooCommerce store:

1. Enhanced Visibility:

  • Sale badges and product labels make your custom products stand out among the numerous options available to customers. When shoppers see a vibrant “Sale” label or a label that highlights specific product features, they are more likely to notice and explore those products. This increased visibility can lead to higher click-through rates and conversions.

2. Increased Trust and Credibility:

  • Sale badges and product labels provide valuable information to customers. A “Sale” badge indicates a discounted price, which can instill a sense of urgency and encourage purchases. Additionally, labels that highlight product attributes, such as “New Arrival” or “Best Seller,” help customers make informed decisions. These labels build trust and credibility by offering clear and concise information about your products.

3. Improved User Experience and Conversion Rates:

  • Sale badges and product labels contribute to a better user experience by simplifying product discovery. Customers can quickly identify products that match their preferences or needs, leading to a more efficient shopping experience. As a result, the likelihood of making a purchase increases. By leveraging these visual cues, you can improve your conversion rates and overall sales performance.

In summary, adding sale badges to your custom products in WooCommerce is an effective strategy for increasing visibility, building trust, and enhancing the user experience. These elements help customers make informed choices and ultimately contribute to higher conversion rates and increased sales for your online store.

How to Add Product Labels to WooCommerce Products (Full Guide)

In this article, we will provide you with a detailed guide to adding Sale Badges and Product Labels and Countdown Timer to Woocommerce All Products and Categories and Tags and Is On Sale and In Stock Out Of Stock and On Backorder.

Are you ready? Let’s dive in.

Installing Sale Badges and Product labels Plugin in WordPress

The Sale Badges and Product labels Plugin is an easy-to-use for WooCommerce. It will help you to add a Sale Badge and Product Labels and Countdown Timer to the website in less than 2 minutes.

Conditions

The WooCommerce Sale Badges and Product Labels Plugin have many conditions, such as :

  1. All Products
  2. Products
  3. Categories
  4. Tags
  5. “Is On Sale”
  6. “In Stock” and “Out Of Stock”, “on backorder” 
  7. Discount Rules

Installing Sale Badges and Product label plugins in WordPress

Follow these steps to install the Sale Badges and Product Labels for the WooCommerce plugin.

  • Navigate To Plugins.
  • Woocommerce Should be installed and Activated.
  • Click on Add New Plugin.
Plugins
Plugins
Install Badge and Product Label for WooCommerce

Now, Sale Badges and Product Labels for WooCommerce have been installed. Navigate to the Product Badges.

Product Badges
Product Badges

Create Product Label

  • Begin by selecting the ‘CSS Label’ tab.
  • Then, set a label and choose your preferred label style.
  • Select the label color and adjust the label width.
Create Product Label

Add Product Labels to All Products

Display Labels on All Products in WooCommerce.

  • Navigate to the ‘Products’ tab.
  • Choose ‘All Products.’
  • Save your changes.
Produtcs Tab
  • View Labels on All Products on the Archive Page.
Css Label on Archive Page

Add Product Labels to Products

In the paragraph explaining how to Create Product Label, you learned how to create a CSS label. So, after creating the CSS label..

  • Go to the ‘Products’ tab.
  • Select ‘Products’ and choose ‘Included.’
  • Pick the products you desire, for example: ‘Beanie (woo-beanie),’ ‘Cap (woo-cap).’
  • Save your changes.
Select Products

Additionally, Go to the archive page to see the CSS Labels.

CSS Labels on Archive Page

Visit the Cap product page and check out the CSS label.

CSS Labels on Product Page

Add Product Labels to Categories

  • Go to the ‘Products’ tab.
  • Select ‘Categories’ and choose ‘Included.’
  • Choose the categories you desire, for example: ‘Clothing/Accessories.’
  • Save your changes.
Select Categories

Additionally, Go to the archive page to see the CSS Labels in the ‘Clothing/Accessories’ category.

CSS Labels in the ‘Clothing/Accessories’ category

Visit the product page for the Belt and inspect the CSS label

Belt Prodcut Page

Add Product Labels to Products and Categories

In the paragraph explaining how to Create Product Label, you learned how to create a CSS label. So, after creating the CSS label..

  • Go to the ‘Products’ tab.
  • Select ‘Products’ and choose ‘Included.’
  • Pick the products you desire, for example: ‘Album (woo-album),’ ‘Polo (woo-polo).’
  • Select ‘Categories’ and choose ‘Included.’
  • Choose the categories you desire, for example: ‘Clothing/Accessories.’
  • Save your changes.
Categories

Additionally, Go to the archive page to see the CSS Labels in the ‘Clothing/Accessories’ category.

Css Label For Clothing/Accessorie

Visit the Polo product page and check out the CSS label.

Polo

Add Product Labels to On Sale

In the paragraph explaining how to Create Product Label, you learned how to create a CSS label. So, after creating the CSS label..

  • Go to the ‘Products’ tab.
  • Choose Is On Sale and Select Yes.
  • Save your changes.
Is On Sale

Visit the archive page to view the CSS Labels on the Is On Sale products.

CSS Label for On-Sale Products

Add Product Labels to Stock Status

In the paragraph explaining how to Create Product Label, you learned how to create a CSS label. So, after creating the CSS label..

  • Go to the ‘Products’ tab.
  • Select Stock Status and Choose In Stock
  • Save your selection.
Add Product Labels to Stock Status

Visit the archive page to view the CSS Labels on the in-stock products.

Css Label For In Stock Products

Add Product Labels to Tags

In the paragraph explaining how to Create Product Label, you learned how to create a CSS label. So, after creating the CSS label..

Assign a tag to the product you desire in the image below.

Check Woocommerce Products
  • Go to the ‘Products’ tab.
  • Choose Tags and Select Included.
  • Select Tag You Desire For Example (Tshirt).
  • Save your changes.
Tags

Go to the archive page to see the CSS labels on the tagged products.

CSS Label On Archieve Page

View the CSS label on the product page.

CSS Label on Product Page

Shortcodes

Sale Badges And Product Labels Plugin To Woocommerce has the below shortcodes.

  • [asnp_badge hide="1"] to use on the product page.
  • [asnp_badge] to use on the archive product or product listing page.

If you would like to show a specific product sale badges, then use the below shortcodes.

  • [asnp_badge product_id=”7″ hide=”1″] To use on the product page, replace “7” with your product ID.
  • [asnp_badge product_id=”7″] To use on the archive product or product listing page, replace “7” with your product ID.
Get FREE WooCommerce Sale Badges and Product Labels
Get PRO with up to 75% OFF for €30