Product Badge

The Product Badge module allows you to display badges on product images — discount badges, new product badges, and featured product badges.

Module Activation

The module is optional and must be activated in the main plugin settings under the Additional Modules section.

Badge Types

1. Discount Badge

Displays discount information on products with an active discount rule.

Settings in the rule:

• In the discount rule settings, enable Show badge
• Enter the Badge text

Variables in Badge Text

The {percent} and {value} variables work only with Auto Price mode rules, because only these rules change the product price:

Rule Type	Variables	Recommended Text
Product discounts	Work	-{percent}% or Save {value}
Bulk discounts	Work	-{percent}% or Up to {percent}% off
Bundle discounts	Work	-{percent}%
Cart discounts	Do not work	Cart discount
Buy X Get X	Do not work	Buy 1 get 1 free or 2+1 deal
Buy X Get Y	Do not work	Gift with purchase
Free Gift	Do not work	Free gift

Why do variables not work for some rules?

Rules with Fee Based mode (cart, BOGO) apply the discount as a separate cart item, not by changing the product price. Therefore, the percentage or value of the discount cannot be calculated at the product level.

Example texts for Auto Price rules:

-{percent}%
{percent}% off
Save {value}

Example texts for Fee Based rules:

Buy 1 get 1 free
2+1 deal
Cart discount
Gift with product

2. New Badge

Automatically displays a badge on newly added products.

Settings:

• Enable “New” badge - enables/disables display
• Number of days - how long after publication the badge is shown (default: 14 days)
• Badge text - custom text (default: “New”)
• Background color - default green (#27ae60)
• Text color - default white (#ffffff)

3. Featured Badge (Tip)

Displays a badge on products marked as Featured in WooCommerce.

Settings:

• Enable “Tip” badge - enables/disables display
• Badge text - custom text (default: “Tip”)
• Background color - default blue (#3498db)
• Text color - default white (#ffffff)

---

General Appearance Settings

Badge Position

Position	Description
Top Left	Upper left corner (default)
Top Right	Upper right corner
Bottom Left	Lower left corner
Bottom Right	Lower right corner

Badge Style

Style	Description
Rectangle	Rectangle with adjustable border-radius
Ribbon	Ribbon with a fold effect — protrudes from the image
Custom	Custom CSS — the plugin does not inject any styles

Ribbon Style

The “Ribbon” style creates a ribbon effect protruding from the product image.

Properties:

• The badge protrudes from the image (left or right depending on position)
• A small triangle below the badge simulates a fold/shadow
• The triangle is automatically 20% darker than the badge background color

How it looks:

For Top Left position:
╔═══════════════╗
║ -20%          ║◄── Badge
╚═╗
  ▼ ◄── Triangle (fold effect)

For Top Right position:
          ╔═══════════════╗
          ║          -20% ║
                       ╔══╝
                       ▼

Typography and Dimensions

• Font size - font size in pixels (default: 12)
• Padding - inner padding in CSS format (default: “5px 10px”)
• Border radius - corner rounding in pixels (default: 3)

Discount Badge Colors

• Background color - default red (#e74c3c)
• Text color - default white (#ffffff)

---

Hiding the Default WooCommerce Badge

The Hide default WooCommerce “Sale!” badge setting hides the standard WooCommerce sale badges across the entire site.

---

Where Badges Are Displayed

• Product archive - catalog, categories, search results
• Product page - main product image
• Widgets - product widgets (optionally)

Not displayed:

• In the cart
• At checkout
• In the mini cart

---

Theme Compatibility

The plugin automatically detects the product gallery for various themes:

• WooCommerce (default)
• Astra
• Storefront
• OceanWP
• Flatsome
• Kadence
• GeneratePress

For other themes, you can add custom selectors using the wpify_woo_discounts_badge_gallery_selectors filter — see UI Hooks.

---

Frequently Asked Questions

Why is the badge not displaying?

Check:

1. Is the Product Badge module activated?
2. Is “Show badge” enabled in the rule?
3. Is the badge text filled in?
4. Does the product match the rule conditions?

How to change the badge position only for certain products?

Use CSS with the product class:

.post-123 .wpify-discount-badge-container {
    top: auto;
    bottom: 10px;
}

Can I have multiple badges on one product?

Yes! The plugin supports displaying multiple badges at once:

Different badge types:

• Discount badge + New + Tip

Multiple discount badges:

• If a product matches multiple discount rules (e.g., volume discount + free gift), badges for all rules are displayed

Badges are displayed stacked vertically.

How to completely disable CSS from the plugin?

Set the style to Custom — the plugin then does not inject any default styles and you can use your own CSS.