Elementor

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:

				
					// Sale badge shortcode for single products
add_shortcode( 'rh_sale_badge', function () {
    if ( ! function_exists( 'wc_get_product' ) || ! is_product() ) {
        return '';
    }

    global $product;

    if ( ! $product instanceof WC_Product ) {
        $product = wc_get_product( get_the_ID() );
    }

    // Only show for products on sale
    if ( ! $product || ! $product->is_on_sale() ) {
        return '';
    }

    $regular = (float) $product->get_regular_price();
    $sale    = (float) $product->get_sale_price();

    $percent = 0;
    if ( $regular > 0 && $sale > 0 ) {
        $percent = round( ( ( $regular - $sale ) / $regular ) * 100 );
    }

    ob_start();
    ?>
    <span class="rh-sale-badge">
        <?php if ( $percent > 0 ) : ?>
            <strong><?php echo esc_html( $percent ); ?>% OFF</strong>
        <?php else : ?>
            <strong>On Sale</strong>
        <?php endif; ?>
    </span>
    <?php

    return ob_get_clean();
});

🧩 Step 2: Add the Shortcode in Elementor

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

				
					[rh_sale_badge]

🎨 Step 3: Style the Sales Badge (CSS)

Go to:
Appearance → Customize → Additional CSS
Add:

				
					/* Well Sky is Your Limit Here, Do Whatever You Like. I just Added a Minimal Styling.
* Basic pill-style sale badge
*/
.rh-sale-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: #ef4444;
    color: #fff;
    z-index: 20;
}

/* Ensure parent container is positioned */
.woocommerce div.product .images,
.woocommerce div.product .woocommerce-product-gallery {
    position: relative;
}

🎯 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:

				
					add_action( 'woocommerce_before_single_product_summary', 'rh_single_sale_badge', 5 );

function rh_single_sale_badge() {
    if ( ! is_product() ) {
        return;
    }

    global $product;

    if ( ! $product || ! $product->is_on_sale() ) {
        return;
    }

    $regular = (float) $product->get_regular_price();
    $sale    = (float) $product->get_sale_price();

    $percent = 0;
    if ( $regular > 0 && $sale > 0 ) {
        $percent = round( ( ( $regular - $sale ) / $regular ) * 100 );
    }

    echo '<span class="rh-sale-badge">' .
         ( $percent > 0 ? esc_html( $percent ) . '% OFF' : 'On Sale' ) .
         '</span>';
}

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!