Percentage Discount Sale Badge (Gutenberg Compatible)

Replace WooCommerce’s default “Sale” badge with a dynamically calculated percentage discount label inside the Gutenberg product blocks.

Instead of showing a generic “Sale” text, this snippet calculates the real discount based on regular and sale prices and displays it as a clear, conversion-friendly label like “-15% SALE”.

// Akciós termék jelölésének felülírása %-os kedvezmény megjelenítésével a Gutenberg blokkban
add_filter( 'render_block', 'custom_sale_badge_replace', 10, 2 );
function custom_sale_badge_replace( $block_content, $block ) {
    if ( $block['blockName'] !== 'woocommerce/product-sale-badge' ) {
        return $block_content;
    }

    global $product;

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

    $regular_price = (float) $product->get_regular_price();
    $sale_price    = (float) $product->get_sale_price();

    if ( $regular_price <= 0 ) {
        return $block_content;
    }

    $discount = round( 100 - ( $sale_price / $regular_price * 100 ) );
    $label = sprintf( __( '-%d%% Ár kedvezmény', 'myfive' ), $discount );

    return str_replace( 'Akció', $label, $block_content );
}

What it does

• Replaces the default WooCommerce Sale badge in Gutenberg blocks
• Calculates the discount percentage from product prices
• Displays a precise label (e.g. -15% SALE)
• Works with the woocommerce/product-sale-badge block
• Requires no template overrides or plugins

When to use

• You prefer percentage discounts over generic “Sale” labels
• You use Gutenberg / Block-based product layouts
• You want more transparent, trust-building pricing communication

Notes

• The label text can be fully customized (language, wording, formatting)
• Works for simple products using regular + sale price
• For variable products, additional logic may be needed to calculate min/max discounts
• Compatible with FSE and block-based WooCommerce themes