Local --:-- GMT—
—

WooCommerce

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;
}

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!