Documentation
Woocommerce Sale Badge
Version 4.0.0
Introduction
Woocommerce Sale Badge is a powerful and flexible sale badge system for WooCommerce that allows you to create and manage professional sale badges for your products. Create eye-catching “SALE” badges, dynamic discount badges showing percentages or amounts, and schedule them for specific promotions.
- Creating professional SALE badges for discounted products
- Dynamic badges showing exact discount percentages (e.g., “Save 20%”)
- Scheduling time-limited promotions
- Category-specific sale badges
- Variable product support with real-time badge switching
Requirements
- WordPress: 6.5 or higher
- WooCommerce: 5.0 or higher (tested up to 10.0.5)
- PHP: 7.4 or higher
Features
Professional Sale Badges
- Create unlimited sale badges
- Global or category-specific badges
- Visible on Individual product
- Visible on Single Variation
Preset Library
- 18 professionally designed SVG badges
- Various “SALE” designs and styles
- Instant preview and selection
Dynamic Content
{percentage}– Show discount percentage{amount}– Show discount amount{price}– Show sale price- Perfect for “Save 20%” style badges
Badge Scheduling
- Set start and end dates for promotions
- Automatic badge activation/deactivation
- Expired badge options (hide or show “Expired”)
Custom Design Options
- Custom text and colors
- Adjustable padding and margins
- Border radius controls
- Opacity settings
- Custom image upload
Live Preview
- Real-time design updates
- Drag to position
- See changes instantly
Variable Product Support
- Real-time badge switching
- Shows highest discount by default
- Updates instantly on variation selection
Performance Optimized
- Built-in caching system
- Minimal database queries
- Optimized for block and classic themes
Theme Compatibility
The plugin automatically detects your theme type and uses the appropriate display method:
- Classic Themes: Storefront, Astra, Flatsome, OceanWP, and all traditional WooCommerce themes
- Block Themes: Twenty Twenty-Four, Twenty Twenty-Five, and all FSE themes
HPOS Compatibility
Fully compatible with WooCommerce High-Performance Order Storage.
Installation
Standard Installation
- Download the plugin ZIP file from CodeCanyon
- Go to WordPress Admin → Plugins → Add New
- Click “Upload Plugin” and select the downloaded ZIP file
- Click “Install Now” and then “Activate”
- The plugin will automatically check for WooCommerce
- A new menu item “Sale Badges” will appear in your admin sidebar
FTP Installation
- Extract the plugin ZIP file on your computer
- Upload the
gema_woo_sale_badgesfolder to/wp-content/plugins/ - Go to WordPress Admin → Plugins
- Find “Woocommerce Sale Badges” and click “Activate”
Getting Started
Quick Start Guide
-
Create Your First Sale Badge
Go to Sale Badges → Add New. Give your badge a title (e.g., “Summer Sale Badge”).
-
Choose Assignment Type
Select “Global” to show on all products, or “Specific Categories” to limit to certain categories.
-
Design Your Badge
Choose a preset image, upload a custom image, or create a text badge with custom colors and styling.
-
Configure Dynamic Content (Optional)
Enable dynamic content to show actual discount percentages or amounts (e.g., “Save 20%”).
-
Set Schedule (Optional)
Set start and end dates for time-limited promotions.
-
Publish Your Badge
Click Publish and the badge will automatically appear on applicable products.
Creating a Simple Sale Badge – Step by Step
- Go to Sale Badges → Add New in your WordPress admin.
- Enter a title for the badge (internal name, e.g., “Standard Sale Badge”).
- In the Badge Assignment section, choose:
Global – Shows on all products
Specific Categories – Shows only in selected categories
- In the Badge Types section, choose “Use Custom Design” for a text badge.
- Set your badge text (e.g., “SALE”), colors, padding, and border radius.
- Adjust the badge position by dragging the live preview or entering top/left values.
- Click Publish to save your badge.
Creating a Dynamic Discount Badge
- Follow steps 1-3 above.
- In the Dynamic Content section, check “Enable dynamic content”.
- Set your badge format using variables:
Save {percentage}– shows “Save 20%”Sale {percentage} OFF– shows “Sale 20% OFF”Only {price}– shows “Only $39.99” - Complete the design and publish.
Badge Types & Assignment
| Assignment Type | Description | Use Case |
|---|---|---|
| Global | Shows on all products that are on sale | One consistent sale badge for your entire store |
| Specific Categories | Shows only on products in selected categories | Different badges for different departments (e.g., “Clearance” for clothing, “Special Offer” for electronics) |
How Category Selection Works
When you select “Specific Categories”, you can choose multiple categories. The badge will appear on any product that belongs to at least one of the selected categories.
- ✓ Clothing (selected) – Badge appears
- ├── Men’s Clothing – Badge appears (inherits from parent)
- │ ├── Shirts – Badge appears
- │ └── Pants – Badge appears
- └── Women’s Clothing – Badge appears
- ✗ Electronics (not selected) – No badge
- └── Phones – No badge
Note: Category hierarchy is respected automatically. Selecting a parent category applies the badge to all child categories.
Dynamic Content
Dynamic content allows you to create badges that show actual discount information based on the product’s sale price. This is perfect for creating badges like “Save 20%” or “-$10 OFF”.
Available Variables
{percentage}
Shows the discount percentage (e.g., 20%)
{amount}
Shows the discount amount (e.g., $10)
{price}
Shows the sale price (e.g., $39.99)
Format Examples
| Format | Result (20% off $50 → $40) |
|---|---|
Save {percentage} |
Save 20% |
-{percentage} OFF |
-20% OFF |
Save {amount} |
Save $10 |
Only {price} |
Only $40 |
{percentage}% OFF ({amount} off) |
20% OFF ($10 off) |
Variable Products
For variable products:
- Catalog/Shop Pages: Shows the highest discount available across all variations
- Single Product Page: Updates in real-time as customers select variations
{percentage} for percentage-based stores, or {amount} for stores showing exact savings. You can combine them for maximum impact!
Badge Scheduling
Schedule your sale badge to automatically appear and disappear based on dates. Perfect for time-limited promotions, seasonal sales, and flash deals.
Schedule Options
| Setting | Description |
|---|---|
| Start Date | Badge will not appear before this date (leave empty for no start date) |
| End Date | Badge will expire after this date (leave empty for no end date) |
| Expiry Behavior |
|
Schedule Examples
Black Friday Sale
Start: November 24, 2024
End: November 27, 2024
Result: Badge only appears during Black Friday weekend
Summer Clearance with Expiry Message
Start: June 1, 2024
End: August 31, 2024
Expiry Behavior: Show “Expired” text with custom message “Sale Ended”
Result: Shows sale badge during summer, then shows “Sale Ended” badge afterward
Display Settings
Access via Sale Badge → Display Settings
| Setting | Options | Description |
|---|---|---|
| Display in Catalog View | Yes/No | Show sale badges on shop, category, and archive pages |
| Display in Single Product View | Yes/No | Show sale badges on individual product pages |
Badge Creation Settings
When creating/editing a badge, you’ll find these options:
| Field | Description |
|---|---|
| Badge Assignment | Global (all products) or Specific Categories |
| Schedule Badge | Enable date scheduling with start/end dates and expiry behavior |
| Dynamic Content | Enable and set format with {percentage}, {amount}, {price} variables |
| Badge Types | Use Custom Design or Use Preset Image |
| Preset Images | Choose from 18 professionally designed SVG sale badges |
| Text Color | Customize text color |
| Background Color | Customize background color (default: #309dbe) |
| Badge Text | Custom text (e.g., “SALE”, “HOT”, “CLEARANCE”) |
| Padding | Top, Bottom, Left, Right padding in pixels |
| Border Radius | Individual corner radius settings |
| Position | Top and Left position (draggable preview) |
| Opacity | 0-10 opacity setting |
| Custom Image | Upload your own badge image |
Frequently Asked Questions
General Questions
Q: How many badges can I create?
A: Unlimited! Create as many sale badges as you need for different categories, promotions, or seasons.
Q: Can I use my own images for badges?
A: Absolutely! You can upload any image (JPG, PNG, GIF, SVG) from your media library, or choose from our 33+ preset SVG badges.
Q: Will this work with my theme?
A: Yes! The plugin automatically detects whether you’re using a classic or block theme and loads the appropriate display methods. It works with Storefront, Astra, Flatsome, Twenty Twenty-Four, and all popular WooCommerce themes.
Q: Will this slow down my site?
A: No – the plugin is optimized with caching, minified assets, and conditional loading. It only loads scripts and styles where needed, ensuring minimal performance impact.
Dynamic Content Questions
Q: Can I create a badge that shows “Save 20%” automatically?
A: Yes! Enable dynamic content and use the format Save {percentage}. The plugin will automatically calculate and display the actual discount percentage.
Q: How does dynamic content work with variable products?
A: In catalog views, it shows the highest discount available. On single product pages, it updates in real-time as customers select variations.
Q: Can I combine text with variables?
A: Yes! For example: Limited Time: Save {percentage}! becomes “Limited Time: Save 20%!”
Scheduling Questions
Q: Can I schedule badges for Black Friday?
A: Yes! Set a start date for Black Friday and an end date for Cyber Monday. The badge will automatically appear and disappear on those dates.
Q: What happens when a badge expires?
A: You have two options: hide the badge completely, or show an “Expired” badge (with customizable text like “Sale Ended”).
Q: Can I have overlapping schedules?
A: Yes, but only one badge shows per product. The badge with active schedule will display. Multiple badges on the same product aren’t supported to maintain a clean design.
Variable Product Questions
Q: How do variable product badges work?
A: In catalog/shop pages, the badge shows the highest discount available. On single product pages, the badge updates instantly when customers select different variations.
Q: Can I assign different badges to different variations?
A: Currently, the plugin shows one badge per product based on assignment rules. For variation-specific badges, you would need to create different products.
Troubleshooting
| Issue | Solution |
|---|---|
| Badge Not Showing |
|
| Dynamic Content Not Working |
|
| Scheduled Badge Not Appearing |
|
| Variable Badge Not Updating |
|
Support
For support, please contact us through CodeCanyon:
- Author: Gema75
- CodeCanyon Profile: https://codecanyon.net/user/gema75
- Check that you meet all system requirements
- Ensure WooCommerce is active and up to date
- Verify your products are in stock and on sale
- Try disabling other plugins to test for conflicts
- Check your PHP error logs for clues