how to customize product price display in product page magento 2

Question

hi I want to customize the price display in product details page Magento 2

where I can customize the codes

(path)

my goal:

1) I want to add a label near the First price .

2) How I can display a discount in percentages (%) .

Can anyone tell me where I can do this updates ?

Magento version 2.2.6.

amount/default.phtml

<?php /** @var \Magento\Framework\Pricing\Render\Amount $block */ ?>

<span class="price-container <?= /* @escapeNotVerified */ $block->getAdjustmentCssClasses() ?>"
        <?= $block->getSchema() ? ' itemprop="offers" itemscope itemtype="http://schema.org/Offer"' : '' ?>>
    <?php if ($block->getDisplayLabel()): ?>
        <span class="price-label"><?= /* @escapeNotVerified */ $block->getDisplayLabel() ?></span>
    <?php endif; ?>
    <p>Exclusive of Tax : </p> <span <?php if ($block->getPriceId()): ?> id="<?= /* @escapeNotVerified */ $block->getPriceId() ?>"<?php endif;?>
        <?= ($block->getPriceDisplayLabel()) ? 'data-label="' . $block->getPriceDisplayLabel() . $block->getPriceDisplayInclExclTaxes() . '"' : '' ?>
        data-price-amount="<?= /* @escapeNotVerified */ $block->getDisplayValue() ?>"
        data-price-type="<?= /* @escapeNotVerified */ $block->getPriceType() ?>"
        class="price-wrapper <?= /* @escapeNotVerified */ $block->getPriceWrapperCss() ?>"
    ><?= /* @escapeNotVerified */ $block->formatCurrency($block->getDisplayValue(), (bool)$block->getIncludeContainer()) ?></span>
    <?php if ($block->hasAdjustmentsHtml()): ?>
        <?= $block->getAdjustmentsHtml() ?>
    <?php endif; ?>
    <?php if ($block->getSchema()): ?>
        <meta itemprop="price" content="<?= /* @escapeNotVerified */ $block->getDisplayValue() ?>" />
        <meta itemprop="priceCurrency" content="<?= /* @escapeNotVerified */ $block->getDisplayCurrencyCode() ?>" />
    <?php endif; ?>

Answer 1

For the first Goal: 1) I want to add a label near the First price . Follow this Link You need to override

/vendor/magento/module-catalog/view/base/web/js/price-box.js And add your label :

For the second Goal : 2) How I can display a discount in percentages (%)

Override this file :

vendor/magento/module-catalog/view/base/templates/product/price/final_price.phtml

Your override

app/design/frontend/Your/theme/Magento_Catalog/templates/product/price/final_price.phtml

And add the below code under this section <span class="old-price">...</span>:

 <span class="price-percentage">
        <?php $percentage = 100 - round(($finalPriceModel->getAmount()->getValue() / $priceModel->getAmount()->getValue())*100); ?>
        <?php echo $percentage ."% OFF"?>
    </span>

Answer 2

Add custom text under price details on product page Magento 2

Hello guys, too often we need to add some custom text under the price details on the product view page. Here is how we can do it without many efforts.

NOTE - IT WILL CHANGE THE PRICE BOX FOR THE WHOLE WEBSITE.

The first step is to overwrite the pricing renderer-

for this, you can add the following code in di.xml in the app/code/Vishal/CustomPriceRender/etc folder-

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Pricing\Render\FinalPriceBox" type="Vishal\CustomPriceRender\Plugin\Pricing\Renderer\FinalPriceBox"/>
</config>

The second step is to create the renderer file that we have defined in di.xml

write the following code to FinalPriceBox.php in app/code/Vishal/CustomPriceRender/Plugin/Pricing/Renderer Folder –

<?php
namespace Vishal\CustomPriceRender\Plugin\Pricing\Renderer;

use Magento\Catalog\Pricing\Price;
use Magento\Framework\Pricing\Render\PriceBox as BasePriceBox;
use Magento\Msrp\Pricing\Price\MsrpPrice;
use Magento\Catalog\Model\Product\Pricing\Renderer\SalableResolverInterface;
use Magento\Framework\View\Element\Template\Context;
use Magento\Framework\Pricing\SaleableInterface;
use Magento\Framework\Pricing\Price\PriceInterface;
use Magento\Framework\Pricing\Render\RendererPool;
use Magento\Framework\App\ObjectManager;
use Magento\Catalog\Pricing\Price\MinimalPriceCalculatorInterface;

class FinalPriceBox extends \Magento\Catalog\Pricing\Render\FinalPriceBox
{
    
    public function __construct(
        Context $context,
        SaleableInterface $saleableItem,
        PriceInterface $price,
        RendererPool $rendererPool,
        array $data = [],
        SalableResolverInterface $salableResolver = null,
        MinimalPriceCalculatorInterface $minimalPriceCalculator = null,
        \Magento\Framework\Registry $registry
    ) {
        parent::__construct($context, $saleableItem, $price, $rendererPool, $data);
        $this->_registry = $registry;
    }
    
    public function wrapResult($html)
    {
        return '<div class="price-box '.$this->getData('css_classes').'" '.'data-role="priceBox" '.'data-product-id="'.$this->getSaleableItem()->getId().'"'.'>'.$html.'(Price/Kilometer)</div>';
    }
}

see the below screenshot for result -