Why Highlight Savings in WooCommerce?

Discounts are one of the biggest conversion drivers in eCommerce.

When shoppers clearly see how much money they are saving (both in currency and percentage), they feel more confident about their purchase.

For example:

• Was: $100
• Now: $80
• You Save: $20 (20%) 🎉

This simple touch not only builds urgency but also helps increase conversions and average order value.

PHP Snippet: Display “You Save” on WooCommerce Product Pages

Add the following snippet to your functions.php file or a custom plugin:

/**
 * @snippet       Show "You Save" Amount on WooCommerce Product Page
 * @author        Spiderwares
 * @compatible    WooCommerce 8+
 */

add_action( 'woocommerce_single_product_summary', 'spiderwares_show_savings', 11 );

function spiderwares_show_savings() {
    global $product;

    if ( $product->is_type( 'simple' ) && $product->is_on_sale() ) {
        $regular_price = (float) $product->get_regular_price();
        $sale_price    = (float) $product->get_sale_price();

        if ( $regular_price > 0 && $sale_price > 0 ) {
            $saved_amount   = $regular_price - $sale_price;
            $saved_percent  = round( ( $saved_amount / $regular_price ) * 100 );

            echo '<p class="spiderwares-savings">🎉 You Save: <strong>' . wc_price( $saved_amount ) . ' (' . $saved_percent . '%)</strong></p>';
        }
    }
}

CSS Snippet: Style the Savings Message

Add this to your child theme’s style.css file:

.spiderwares-savings {
    font-size: 16px;
    margin-top: 10px;
    color: #1a365d;
    background: #ebf8ff;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 500;
}

Final Result

Once implemented, your WooCommerce product page will display:

• Regular Price
• Sale Price
• A highlighted “You Save” message showing both currency and percentage 🎯

This not only makes your discount more visible but also creates excitement and urgency — ultimately driving more sales.