Woofocus
Improve UX

How to Display the Discount Percentage?

2 Mins Read
Pinterest LinkedIn Tumblr

You made a discount but your customers don’t know the rate. It is bad for your sales. To attract attention, the best way is display the discount percentage on the sale badge. This article tells the shortest way for it and gives a snippet.

After the snippet, the discount label will be shown like these:

Shop Page
Product Page
Related products section

Snippet calculates the discount rates automatically for every product type. So, you don’t need any configuration or enter a value.

Let’s apply our woocommerce percentage sale snippet!

Simply, copy and paste below snippet to your function.php:

// Woofocus - display discount rate snippet starts

add_filter( 'woocommerce_sale_flash', 'wf_add_percentage_to_sale_badge', 20, 3 );
function wf_add_percentage_to_sale_badge( $html, $post, $product ) {

    if( $product->is_type('variable')){
        $percentages = array();

        // Get all variation prices
        $prices = $product->get_variation_prices();

        // Loop through variation prices
        foreach( $prices['price'] as $key => $price ){
            // Only on sale variations
            if( $prices['regular_price'][$key] !== $price ){
                // Calculate and set in the array the percentage for each variation on sale
                $percentages[] = round( 100 - ( floatval($prices['sale_price'][$key]) / floatval($prices['regular_price'][$key]) * 100 ) );
            }
        }
        // We keep the highest value
        $percentage = max($percentages) . '%';

    } elseif( $product->is_type('grouped') ){
        $percentages = array();

        // Get all variation prices
        $children_ids = $product->get_children();

        // Loop through variation prices
        foreach( $children_ids as $child_id ){
            $child_product = wc_get_product($child_id);

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

            if ( $sale_price != 0 || ! empty($sale_price) ) {
                // Calculate and set in the array the percentage for each child on sale
                $percentages[] = round(100 - ($sale_price / $regular_price * 100));
            }
        }
        // We keep the highest value
        $percentage = max($percentages) . '%';

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

        if ( $sale_price != 0 || ! empty($sale_price) ) {
            $percentage    = round(100 - ($sale_price / $regular_price * 100)) . '%';
        } else {
            return $html;
        }
    }
    return '<span class="onsale">' . esc_html__( 'SALE', 'woocommerce' ) . ' ' . $percentage . ' off</span>';
}

// Woofocus - display discount rate snippet ends

By using CSS, you can make your discount badge more attractive. For example, you can change the background color, change border and font.

WooFocus shares useful WooCommerce Tutorials & Tricks. By following WooFocus, you can develop your knowledge.

Related Posts