Magento – how to customize product price display in product page magento 2

catalog-price-rulesmagento2priceproduct-detail-page

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

magento 2 product price
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; ?>

Best Answer

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 : enter image description here

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>
Related Topic