1

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; ?>
1

2 Answers 2

3

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>
7
  • i have enable two prices one is inclusive of tax and exclusive of tax the label is showing for both price so, how i can only show for one price.... Jul 10, 2019 at 8:44
  • price-percentage is not showing in front end.. Jul 10, 2019 at 8:48
  • Then open the hints where the price of exluding and including are , do a control there <?php if ($block->displayPriceExcludingTax()): ?> <span class="price"><?= /* @escapeNotVerified */ (add your label) $block->getDisplayAmountExclTax() ?></span></span> <?php endif; ?> , check you are doing the override ok for the price-percentage , check if the product has discount , clear cache and static files , run reindex . Jul 10, 2019 at 9:00
  • showing error for <?= /* @escapeNotVerified */ (add your label) $block->getDisplayAmountExclTax() ?> this line error : expected ): Jul 10, 2019 at 9:48
  • getDisplayAmountExclTax() is not a method Jul 10, 2019 at 10:15
0

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 -

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.