How to display configurable product discount in percent on product list in Magento 2

Question

In the product detail page, it's showing a discount percentage. when I open the list page it can't be showing the percentage for the configurable product.

Please give me the solution for that.

I have used the below code for that, but it's not working for the configurable product.

<div class="discount-p">
    <?php

    if($_product->getTypeId() == "simple") {
        $simplePrice = $_product->getPrice();
        } else {
            $_children = $_product->getTypeInstance()->getUsedProducts($_product);
            foreach ($_children as $child){
            $simplePrice = $child->getPrice();
            break;
        }
    }

    $_finalPrice =$_product->getFinalPrice();
    $_price = $simplePrice;
    if($_finalPrice < $_price) {
    $_savingPercent = 100 - round(($_finalPrice / $_price)*100);
    echo '('. $_savingPercent . '%off)';

    }
    ?>
</div>

Answer 1

You can add create saperate price file for configurable product and code within it.

catalog_product_prices.xml

add code

<?xml version="1.0"?>

<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">Vendor\Module\Pricing\Render\FinalPriceBox</item>
                        <item name="render_template" xsi:type="string">Vendor_Module::product/price/final_price.phtml</item>
                    </item>
                </item>
            </argument>
            <argument name="configurable" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="final_price" xsi:type="array">
                        <item name="render_class" xsi:type="string">Magento\ConfigurableProduct\Pricing\Render\FinalPriceBox</item>
                        <item name="render_template" xsi:type="string">Vendor_Module::product/price/final_price_configurable.phtml</item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

as it is configurable product not possible to check it by getFinalPrice() and getSpecialPrice() .

add below code for configurable product.

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

<?php if($finalPriceModel->getAmount() < $priceModel->getAmount()) : ?>
        <span class="old-price sly-old-price no-display config-old" style="text-decoration: line-through;">
            <?= $block->renderAmount($priceModel->getAmount(), [
                'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
                'price_type'        => 'oldPrice',
                'include_container' => true,
                'skip_adjustments'  => true
            ]); ?>
        </span>
        <?php 

            $array = (array)$priceModel->getAmount();
            $prefix = chr(0).'*'.chr(0);
            $price = $array[$prefix.'amount'];

            $array = (array)$finalPriceModel->getAmount();
            $prefix = chr(0).'*'.chr(0);
            $finalPrice = $array[$prefix.'amount'];

            $percentage = 100 - round(($finalPrice / $price)*100);

            echo "<span class='percent-amt'>- ".$percentage."%</span>";
        ?>
    <?php endif; ?>

Note : you can get this directly by change file app\design\frontend\Vendor\theme\Magento_Catalog\templates\product\price\final_price.phtml ,you just have to put condition for configurable product

percentage will show in listing page

Answer 2

You can check it by without override any file. You need to use afterPlugin for that.

1) Create di.xml file at app/code/VendorName/ModuleName/etc/frontend

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Block\Product\ListProduct">
        <plugin name="block-product-list" type="VendorName\ModuleName\Plugin\ProductList"/>
    </type>
</config>

2) Create ProductList.php plugin file at app/code/VendorName/ModuleName/Plugin

<?php
namespace VendorName\ModuleName\Plugin;

class ProductList {

    public function afterGetProductDetailsHtml(
        \Magento\Catalog\Block\Product\ListProduct $subject,
        $result,
        \Magento\Catalog\Model\Product $product
    ) {
        if ($product->getTypeId() == "simple") {
            $simplePrice = $product->getPrice();
        } else {
            $_children = $product->getTypeInstance()->getUsedProducts($product);
            foreach ($_children as $child) {
                $simplePrice = $child->getPrice();
                break;
            }
        }

        $finalPrice = $product->getFinalPrice();
        $_price = $simplePrice;
        if ($finalPrice < $_price) {
            $discountPer = 100 - round(($finalPrice / $_price) * 100);
            return $result . 'Your save : ' . $discountPer . '%';
        } else {
            return $result;
        }
    }
}

---

Output (In configurable Product):

Hope, It maybe helpful for you.

Answer 3

I would do something like this

public function getPercentage(\Magento\Catalog\Model\Product $product)
{
    $baseprice = 0;
    $finalprice = 0;
    $percentage = 0;

    if ($product->getTypeId() == 'configurable') {
        $baseprice = $product->getPriceInfo()
            ->getPrice('regular_price')
            ->getValue();

        $finalprice = $product->getPriceInfo()
            ->getPrice('final_price')
            ->getValue();
    } else {
        $baseprice = $product->getPrice();
        $finalprice = $product->getFinalPrice();
    }

    if ($finalprice < $baseprice) {
        $percentage = round(-100 * (1 - ($finalprice / $baseprice)));
    }

    return $percentage;
}

and call it in template

    if ($percentage = $helper->getPercentage($product)) {
        echo $percentage;
    }

Answer 4

Please try with below code :

<?php
    $item = $block->getSaleableItem();
    $_savePercent = 100 - round(((float)$item->getFinalPrice() / (float)$item->getPrice()) * 100);
    echo '<b style="color:#008000">'.$_savePercent . '% off </b>';
    ?>

I hope its work for you

Answer 5

you can watch this video it will clearly show how to show the discount price on configurable product in magento 2

https://www.youtube.com/watch?v=AkvY9hDFGYg