Display Discount Amount on WooCommerce Product Page

Post's average rating is: 5 (By 3 visitors)

WooCommerce is a popular e-commerce platform for WordPress users. If you run a WooCommerce store, you may have noticed that by default, WooCommerce only displays the sale price and regular price of a product. However, it does not display the discount amount. In this article, we will show you how to display the discount amount on the WooCommerce product page without using a plugin.

Why should display Discount Amount?

For online retailers, the way products are displayed on their website can greatly impact the purchasing decision of customers. By default, WooCommerce only displays the sale price and the regular price of a product. However, it does not display the discount amount. Displaying the discount amount on the product page can provide valuable information to customers, improve the shopping experience and drive more sales.

• Increased Transparency: Displaying the discount amount helps to increase transparency and build trust with customers. When customers see exactly how much they are saving, they are more likely to feel confident in their purchasing decision. This can lead to an increase in sales and customer loyalty.
• Improved Customer Experience: By providing customers with detailed information about the products they are interested in, they can make more informed decisions. This can improve the overall shopping experience and lead to increased customer satisfaction.
• Increased Sales: When customers are able to see the full value of the products they are interested in, they are more likely to make a purchase. This is especially true for products that are on sale. By clearly displaying the discount amount, customers can see the savings they will receive, which can motivate them to make a purchase.
• Competitive Advantage: Displaying the discount amount on the product page can give your store a competitive advantage over others who do not. By providing customers with detailed information, they are more likely to choose your store over others that do not provide the same level of information.

Steps to display discount amount on woocommerce product page.

It is important to note that, take a full backup of your website. Do the customization on child theme. If you have not yet created a child theme then follow this tutorial to create one.

Step 1: Locate functions.php file.

Go to Appearance > Theme File Editor > Theme Functions (functions.php). Below is the image for your reference.

Step 2: Add Snippet/Code

Add any one code at the end of functions.php file. Then click on Update File.

Add below code if you want to display Save Amount along with percentage discount.

add_filter( 'woocommerce_get_price_html', 'wpamit_change_displayed_sale_price_html', 10, 2 );
function wpamit_change_displayed_sale_price_html( $price, $product ) {
    
    if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
        
        $regular_price = (float) $product->get_regular_price(); // Regular price
        $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

        
        $saving_price = wc_price( $regular_price - $sale_price );

        // "Saving Percentage" calculation and formatting
        $precision = 0; // Max number of decimals
        $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 0 ) . '%';

        // Append to the formated html price
        $price .= sprintf( __('<p class="saved-sale" style="margin-top: 7px; margin-bottom: 0; font-size: 14px;">Save %s <em>(%s)</em></p>', 'woocommerce' ), $saving_price, $saving_percentage );
    }
    return $price;
}

Add below code if you want to display only discount amount.

add_filter( 'woocommerce_get_price_html', 'wpamit_change_displayed_sale_price_html', 10, 2 );
function wpamit_change_displayed_sale_price_html( $price, $product ) {
    // Only on sale products on frontend and excluding min/max price on variable products
    if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
        // Get product prices
        $regular_price = (float) $product->get_regular_price(); // Regular price
        $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

        // "Saving price" calculation and formatting
        $saving_price = wc_price( $regular_price - $sale_price );

        // Append to the formated html price
        $price .= sprintf( __('<p class="saved-sale" style="margin-top: 7px; margin-bottom: 0; font-size: 14px;">Save %s</p>', 'woocommerce' ), $saving_price );
    }
    return $price;
}

Add below code if you want to display only discount percentage.

add_filter( 'woocommerce_get_price_html', 'wpamit_change_displayed_sale_price_html', 10, 2 );
function wpamit_change_displayed_sale_price_html( $price, $product ) {
    // Only on sale products on frontend and excluding min/max price on variable products
    if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
        // Get product prices
        $regular_price = (float) $product->get_regular_price(); // Regular price
        $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

        // "Saving Percentage" calculation and formatting
        $precision = 0; // Max number of decimals
        $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 0 ) . '%';

        // Append to the formated html price
        $price .= sprintf( __('<p class="saved-sale" style="margin-top: 7px; margin-bottom: 0; font-size: 14px;">Save %s</p>', 'woocommerce' ), $saving_percentage );
    }
    return $price;
}

It’s done!

Conclusion

In this article, we have shown you how to display the discount amount on the WooCommerce product page without using a plugin. By adding a few lines of code to your functions.php file, you can show your customers exactly how much they are saving on sale products. This is a simple and effective way to improve the customer experience on your WooCommerce store and encourage more sales.