How to Display Percentage of Discount on Product List and View Page in Magento 2

Discounts have been the most effective tool to beat the competition, attract potential customers, and generate sales for ages!

Offering attractive deals to the customers is surely going to increase the conversion rate.

However, it is equally important to tactfully present your offers to the customers in a way that will lure them to make a purchase.

For Magento 2 store owners, it is going to be easy with the solution given below to display percentage discount on the product page and category page.

Showing the percentage value of discount along with the original price and special price that the default Magento 2 displays will push the potential customer to avail the deal.

Check the programmatic solution to display percentage of discount on product list and view page in Magento 2 below:

Steps to Display Percentage of Discount on Product List and View Page in Magento 2:

Override the below file in your theme

Magento_Catalog::product/price/final_price.phtml

and put the below code in the file.

<!--?php /** @var \Magento\Catalog\Pricing\Render\FinalPriceBox $block */ /** ex: \Magento\Catalog\Pricing\Price\RegularPrice */ /** @var \Magento\Framework\Pricing\Price\PriceInterface $priceModel */ $priceModel = $block->getPriceType('regular_price'); /** ex: \Magento\Catalog\Pricing\Price\FinalPrice */ /** @var \Magento\Framework\Pricing\Price\PriceInterface $finalPriceModel */ $finalPriceModel = $block->getPriceType('final_price'); $idSuffix = $block->getIdSuffix() ? $block->getIdSuffix() : ''; $schema = ($block->getZone() == 'item_view') ? true : false; $fprice=($finalPriceModel->getAmount()->getValue()); $rprice=$priceModel->getAmount()->getValue(); $discount = 100 - round(($fprice / $rprice) * 100); ?-->
<!--?php if ($block->hasSpecialPrice()) :?-->
    
        <!--?= /* @noEscape */ $block->renderAmount($finalPriceModel->getAmount(), [ 'display_label' => __('Special Price'), 'price_id' => $block->getPriceId('product-price-' . $idSuffix), 'price_type' => 'finalPrice', 'include_container' => true, 'schema' => $schema ]); ?-->
    
    <!--?= $discount."% Discount";?-->
    
        <!--?= /* @noEscape */ $block->renderAmount($priceModel->getAmount(), [ 'display_label' => __(' '), 'price_id' => $block->getPriceId('old-price-' . $idSuffix), 'price_type' => 'oldPrice', 'include_container' => true, 'skip_adjustments' => true ]); ?-->
    
<!--?php else :?-->
    <!--?= /* @noEscape */ $block->renderAmount($finalPriceModel->getAmount(), [ 'price_id' => $block->getPriceId('product-price-' . $idSuffix), 'price_type' => 'finalPrice', 'include_container' => true, 'schema' => $schema ]); ?-->
<!--?php endif; ?-->
<!--?php if ($block->showMinimalPrice()) :?-->
    <!--?php if ($block->getUseLinkForAsLowAs()) :?-->
        
            <!--?= /* @noEscape */ $block->renderAmountMinimal() ?-->
        
    <!--?php else :?-->
        
            <!--?= /* @noEscape */ $block->renderAmountMinimal() ?-->
        
    <!--?php endif?-->
<!--?php endif; ?-->

That’s it.

Also read: How to Setup Discount with Minimum Purchase in Magento 2

Also, do share the post with Magento Community via social media.

Thank you.