How to display percentage discount in Magento 2 product details page

Returning customers are like godsends for the store owner. Because they already have shown interest in your store products and willing to spend money on your products that’s why its time to convert them by offering some great discount on store product.
In fact, most of the online stores typically get 50% of their revenue from their existing store customers. To make them feel special by offering discount can drastically help a lot by setting up a special price inside the store.

The customer always looks convenience and discount they get on a purchase of the product. But when there is numerous product with the special price may confused customer that how many percentages of discount they get on a purchase of the product? Instead of showing the percentage discount beside product price help to convert them easily and boost store conversion.

To display product discount percentage on product details page in Magento 2 using the following code.
To do the same, first we need to create ‘catalog_product_prices.xml’ at below location using following code.
app\code\Vendor\Extension\view\Base\layout\catalog_product_prices.xml

<pre class="lang:default decode:true">
<?xml version="1.0" encoding="UTF-8"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                <item name="final_price" xsi:type="array">
                    <item name="render_class" xsi:type="string">Magento\Catalog\Pricing\Render\FinalPriceBox</item>
                    <item name="render_template" xsi:type="string">Vendor_ Extension::product/price/final_price.phtml</item>
                </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>
</pre>

And create one more file to display price and discount percentage on product detail page.
app\code\Vendor\Extension\view\Base\templates\product\price\final_price.phtml

<pre class="lang:default decode:true">
<?php
$priceModel = $block->getPriceType('regular_price');
$finalPriceModel = $block->getPriceType('final_price');
$idSuffix = $block->getIdSuffix() ? $block->getIdSuffix() : '';
$schema = ($block->getZone() == 'item_view') ? true : false;
?>
<?php if ($block->hasSpecialPrice()): ?>
 <span class="special-price">
        <?php  echo $block->renderAmount($finalPriceModel->getAmount(), [
            'display_label'  => __('Special Price'),
            'price_id'       => $block->getPriceId('product-price-' . $idSuffix),
         'price_type'     => 'finalPrice',
            'include_container' => true,
            'schema' => $schema
     ]); ?>
    </span>
 <span>
 <?php
 $item = $block->getSaleableItem();
    $_savePercent = 100 - round(((float)$item->getFinalPrice() / (float)$item->getPrice()) * 100);
 echo '<b style="color:#008000">'.$_savePercent . '% off </b>';
 ?>
    </span>
 <span class="old-price">
        <?php  echo $block->renderAmount($priceModel->getAmount(), [
         'display_label'  => __('Regular Price'),
            'price_id'       => $block->getPriceId('old-price-' . $idSuffix),
            'price_type'     => 'oldPrice',
            'include_container' => true,
            'skip_adjustments'  => true
     ]); ?>
    </span>
<?php else: ?>
    <?php  echo $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()):?>
     <a href="<?=  $block->getSaleableItem()->getProductUrl() ?>" class="minimal-price-link">
            <?= $block->renderAmountMinimal() ?>
        </a>
 <?php else:?>
     <span class="minimal-price-link">
            <?=  $block->renderAmountMinimal() ?>
        </span>
 <?php endif?>
<?php endif; ?>
</pre>

You are free to modify this code according to your business needs.

Lastly, hit that below stars if the code worked for you and don’t forget to comment down below if you are looking for any help regarding this code.

Happy Coding.