How to Show Additional Price, Main Price and Special Price with On Sale Price for Category and Product Detail Page?

1) Create a Additional Price attribute from admin area and assign into attribute sets as per your requirement.

Store->Configuration->Attributes: Product->Add New Attribute(Additional Price)

Assign into:

Store->Configuration->Attributes: Attribute Sets(Assign Under Groups->Product Details:additional_price)

2) Then you have to override final price value with following custom module:

app/code/Magemonkeys/SpecialPriceSave/view/frontend/templates/product/price/final_price.phtml

<?php
// @var \Magemonkeys\SpecialPriceSave\Pricing\Render\ChangePriceBox $block
$priceChange = $block->getPriceChange();


// @var \Magento\Framework\Pricing\Price\PriceInterface $priceModel
$priceModel = $block->getPriceType('regular_price');

// @var \Magento\Framework\Pricing\Price\PriceInterface $finalPriceModel

$finalPriceModel = $block->getPriceType('final_price');
$idSuffix = $block->getIdSuffix() ? $block->getIdSuffix() : '';
$schema = ($block->getZone() == 'item_view') ? true : false;
$products = $block->getProduct();
?>

<?php if ($block->hasSpecialPrice() || $block->getFormatedPrice($products->getRrpPrice())): ?>
    
    <span class="special-price">
        <?= /* @escapeNotVerified */ $block->renderAmount($finalPriceModel->getAmount(), [
            'display_label'     => __('On Sale'),
            'price_id'          => $block->getPriceId('product-price-' . $idSuffix),
            'price_type'        => 'finalPrice',
            'include_container' => true,
            'schema' => $schema
        ]); ?>
    </span>
    <span class="next-price">
        <?php 
            $products = $block->getProduct();
            if($products->getRrpPrice()){ ?>
                <span class="rrp-price">
                <?php echo 'RRP'.$block->getFormatedPrice($products->getRrpPrice()); ?>
                </span>
                <span class="all-price-wrp">
                <span class="change-price">
                    <span class="change-price-label"><?= __('save'); ?> </span>
                    <?php $_savePercent = 100 - round(((float)$products->getFinalPrice() / (float)$products->getPrice()) * 100);
                        echo '<b style="color:#ec0101">'.$_savePercent . '% </b>';
                    ?>
                </span> 
                <span class="old-price">
                <?= /* @escapeNotVerified */ $block->renderAmount($priceModel->getAmount(), [
                    'display_label'     => __('WAS'),
                    'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
                    'price_type'        => 'oldPrice',
                    'include_container' => true,
                    'skip_adjustments'  => true
                ]); ?>
            </span>
            </span>

            <?php }else{ ?>
            <span class="all-price-wrp">    
                <span class="change-price">
                        <span class="change-price-label"><?= __('save'); ?> </span>
                            <?= $priceChange; ?>
                    </span>     
                <span class="old-price">
                    <?= /* @escapeNotVerified */ $block->renderAmount($priceModel->getAmount(), [
                        'display_label'     => __('RRP'),
                        'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
                        'price_type'        => 'oldPrice',
                        'include_container' => true,
                        'skip_adjustments'  => true
                    ]); ?>
                </span>
            </span>
        <?php  } ?>
    </span>    

</span>

<?php else: ?>
    <?= /* @escapeNotVerified */ $block->renderAmount($finalPriceModel->getAmount(), [
        'price_id'          => $block->getPriceId('product-price-' . $idSuffix),
        'price_type'        => 'finalPrice',
        'include_container' => true,
        'schema' => $schema
    ]); ?>
    <span class="next-price">
        <span class="change-price">
            <span class="change-price-label"><?= __('save'); ?> </span>
            <?= $priceChange; ?>
        </span>

        <span class="old-price">
            <?= /* @escapeNotVerified */ $block->renderAmount($priceModel->getAmount(), [
                'display_label'     => __('RRP'),
                'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
                'price_type'        => 'oldPrice',
                'include_container' => true,
                'skip_adjustments'  => true
            ]); ?>
        </span>
    </span>
    
<?php endif; ?>

<?php if ($block->showMinimalPrice()): ?>
    <?php if ($block->getUseLinkForAsLowAs()):?>
        <a href="<?= /* @escapeNotVerified */ $block->getSaleableItem()->getProductUrl(); ?>"
           class="minimal-price-link">
            <?= /* @escapeNotVerified */ $block->renderAmountMinimal(); ?>
        </a>
    <?php else:?>
        <span class="minimal-price-link">
            <?= /* @escapeNotVerified */ $block->renderAmountMinimal(); ?>
        </span>
    <?php endif; ?>
<?php endif; ?>

100

101

102

103

104

105

106

107

108

109

110

111

<?php

// @var \Magemonkeys\SpecialPriceSave\Pricing\Render\ChangePriceBox $block

$priceChange = $block->getPriceChange();

// @var \Magento\Framework\Pricing\Price\PriceInterface $priceModel

$priceModel = $block->getPriceType('regular_price');

// @var \Magento\Framework\Pricing\Price\PriceInterface $finalPriceModel

$finalPriceModel = $block->getPriceType('final_price');

$idSuffix = $block->getIdSuffix() ? $block->getIdSuffix() : '';

$schema = ($block->getZone() == 'item_view') ? true : false;

$products = $block->getProduct();

<?php if ($block->hasSpecialPrice() || $block->getFormatedPrice($products->getRrpPrice())): ?>

<?= /* @escapeNotVerified */ $block->renderAmount($finalPriceModel->getAmount(), [

'display_label' => __('On Sale'),

'price_id' => $block->getPriceId('product-price-' . $idSuffix),

'price_type' => 'finalPrice',

'include_container' => true,

'schema' => $schema

]); ?>

<?php

$products = $block->getProduct();

if($products->getRrpPrice()){ ?>

<?php echo 'RRP'.$block->getFormatedPrice($products->getRrpPrice()); ?>

<?= __('save'); ?>

<?php $_savePercent = 100 - round(((float)$products->getFinalPrice() / (float)$products->getPrice()) * 100);

echo ''.$_savePercent . '% ';

<?= /* @escapeNotVerified */ $block->renderAmount($priceModel->getAmount(), [

'display_label' => __('WAS'),

'price_id' => $block->getPriceId('old-price-' . $idSuffix),

'price_type' => 'oldPrice',

'include_container' => true,

'skip_adjustments' => true

]); ?>

<?php }else{ ?>

<?= __('save'); ?>

<?= $priceChange; ?>

<?= /* @escapeNotVerified */ $block->renderAmount($priceModel->getAmount(), [

'display_label' => __('RRP'),

'price_id' => $block->getPriceId('old-price-' . $idSuffix),

'price_type' => 'oldPrice',

'include_container' => true,

'skip_adjustments' => true

]); ?>

<?php } ?>

<?php else: ?>

<?= /* @escapeNotVerified */ $block->renderAmount($finalPriceModel->getAmount(), [

'price_id' => $block->getPriceId('product-price-' . $idSuffix),

'price_type' => 'finalPrice',

'include_container' => true,

'schema' => $schema

]); ?>

<?= __('save'); ?>

<?= $priceChange; ?>

<?= /* @escapeNotVerified */ $block->renderAmount($priceModel->getAmount(), [

'display_label' => __('RRP'),

'price_id' => $block->getPriceId('old-price-' . $idSuffix),

'price_type' => 'oldPrice',

'include_container' => true,

'skip_adjustments' => true

]); ?>

<?php endif; ?>

<?php if ($block->showMinimalPrice()): ?>

<?php if ($block->getUseLinkForAsLowAs()):?>

<a href="<?= /* @escapeNotVerified */ $block->getSaleableItem()->getProductUrl(); ?>"

class="minimal-price-link">

<?= /* @escapeNotVerified */ $block->renderAmountMinimal(); ?>

</a>

<?php else:?>

<?= /* @escapeNotVerified */ $block->renderAmountMinimal(); ?>

<?php endif; ?>

app/code/Magemonkeys/SpecialPriceSave/Pricing/Render/ChangePriceBox.php

<?php
namespace Magemonkeys\SpecialPriceSave\Pricing\Render;

use Magento\Catalog\Pricing\Render\FinalPriceBox;
use Magento\Catalog\Pricing\Price;
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\Catalog\Pricing\Price\MinimalPriceCalculatorInterface;
use \Magento\Framework\Pricing\PriceCurrencyInterface;
use Magento\Framework\Pricing\Helper\Data as Pricehelper;

/**
 * Catalog category helper
 * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
 */
class ChangePriceBox extends FinalPriceBox
{
    protected $currency;
    protected $priceHelper;

    /**
     * @param Context $context
     * @param SaleableInterface $saleableItem
     * @param PriceInterface $price
     * @param RendererPool $rendererPool
     * @param array $data
     * @param SalableResolverInterface $salableResolver
     * @param MinimalPriceCalculatorInterface $minimalPriceCalculator
     * @param PriceCurrencyInterface $currency
     * @param Pricehelper $priceHelper
     */
    public function __construct(
        Context $context,
        SaleableInterface $saleableItem,
        PriceInterface $price,
        RendererPool $rendererPool,
        PriceCurrencyInterface $currency,
        array $data = [],
        SalableResolverInterface $salableResolver = null,
        MinimalPriceCalculatorInterface $minimalPriceCalculator = null,
        Pricehelper $priceHelper
    ) {
        parent::__construct($context,
            $saleableItem,
            $price,
            $rendererPool,
            $data,
            $salableResolver,
            $minimalPriceCalculator
        );

        $this->currency = $currency;
        $this->priceHelper = $priceHelper;
    }
    /**
     * Return difference in original price and final price
     * @return float
     */
    public function getPriceChange()
    {
        $regularPrice = $this->getPriceType(Price\RegularPrice::PRICE_CODE)->getValue();
        $finalPrice = $this->getPriceType(Price\FinalPrice::PRICE_CODE)->getValue();
        $changePrice = $regularPrice - $finalPrice;

        return  $this->currency->format($changePrice);
    }
    public function getProduct()
    {
        $product = $this->getSaleableItem();  
        return $product;
    }
    public function getFormatedPrice($price)
    {
        return $this->priceHelper->currency($price, true, false);
    }
    
}

<?php

namespace Magemonkeys\SpecialPriceSave\Pricing\Render;

use Magento\Catalog\Pricing\Render\FinalPriceBox;

use Magento\Catalog\Pricing\Price;

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\Catalog\Pricing\Price\MinimalPriceCalculatorInterface;

use \Magento\Framework\Pricing\PriceCurrencyInterface;

use Magento\Framework\Pricing\Helper\Data as Pricehelper;

/**

* Catalog category helper

* @SuppressWarnings(PHPMD.CouplingBetweenObjects)

class ChangePriceBox extends FinalPriceBox

{

protected $currency;

protected $priceHelper;

/**

* @param Context $context

* @param SaleableInterface $saleableItem

* @param PriceInterface $price

* @param RendererPool $rendererPool

* @param array $data

* @param SalableResolverInterface $salableResolver

* @param MinimalPriceCalculatorInterface $minimalPriceCalculator

* @param PriceCurrencyInterface $currency

* @param Pricehelper $priceHelper

public function __construct(

Context $context,

SaleableInterface $saleableItem,

PriceInterface $price,

RendererPool $rendererPool,

PriceCurrencyInterface $currency,

array $data = [],

SalableResolverInterface $salableResolver = null,

MinimalPriceCalculatorInterface $minimalPriceCalculator = null,

Pricehelper $priceHelper

) {

parent::__construct($context,

$saleableItem,

$price,

$rendererPool,

$data,

$salableResolver,

$minimalPriceCalculator

);

$this->currency = $currency;

$this->priceHelper = $priceHelper;

}

/**

* Return difference in original price and final price

* @return float

public function getPriceChange()

{

$regularPrice = $this->getPriceType(Price\RegularPrice::PRICE_CODE)->getValue();

$finalPrice = $this->getPriceType(Price\FinalPrice::PRICE_CODE)->getValue();

$changePrice = $regularPrice - $finalPrice;

return $this->currency->format($changePrice);

}

public function getProduct()

{

$product = $this->getSaleableItem();

return $product;

}

public function getFormatedPrice($price)

{

return $this->priceHelper->currency($price, true, false);

}

3) Create a Catalog Rule for Discount Price with Percentage format:

Marketing->Promotions->Catalog Price Rule

See attached screenshot:
https://tinyurl.com/244sf59t

4) See this results, finally it shows on Category Page and Product Detail Page on frontend side with Saving Different Price:

Category Page:

Product Detail Page:

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-641eff3d4b5f7956195958/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire N. Mistry

Let’s have a call

Fill the form & Get Installation Support