Recently, while working on a client project, I ran into a small but interesting challenge — they needed a way to show a dynamic sale badge on WooCommerce single product pages, all built using Elementor. Sounds simple, right? But Elementor doesn’t offer this out of the box… so here’s how I solved it.

By default, Elementor does not provide a dedicated widget for showing sale badges on single product pages. But don’t worry — in this guide, I’ll show you a quick, safe, and professional method using a simple PHP snippet and shortcode.

  • No theme editing required.
  • Fully dynamic (only shows on sale products).
  • Works perfectly with Elementor templates.

What We’ll Build

A clean and attractive sale badge that:

  • Appears only on products that are on sale
  • Automatically calculates discount percentage
  • Falls back to “On Sale” if no percentage exists
  • Can be placed anywhere using Elementor

Option 1 (Recommended): Shortcode + Elementor Widget

This method gives you full control over placement and styling.

🔧 Step 1: Add the PHP Snippet

Add the following code using the Code Snippets plugin (recommended) or your theme’s functions.php file:

🧩 Step 2: Add the Shortcode in Elementor

  • Edit your Single Product Template in Elementor
  • Drag and drop a Shortcode Widget
  • Paste the shortcode:

🎨 Step 3: Style the Sales Badge (CSS)

  • Go to:
    Appearance → Customize → Additional CSS

    Add:

🎯 You can change the color to match your brand.

Option 2: Hook Method (No Elementor Widget)

If you prefer automatic placement without using Elementor widgets:

Final Thoughts

Adding a sale badge to WooCommerce single product pages:

  • Improves conversion rates
  • Highlights discounts clearly
  • Enhances user experience

Using this method, you get full flexibility while keeping everything clean, lightweight, and safe.

Bonus Tip

You can enhance this further by:

  • Adding animation (pulse or bounce)
  • Showing countdown timers for sales
  • Displaying badges conditionally (e.g., “Limited Offer”)

Need Help?

If you need help customizing this further (ribbon style, animated badges, dynamic positioning),

feel free to reach out — I’d be happy to help!