How to show discount percentage over the image of my products?

Question

What I am trying to achieve is this, I have configurable products I want to display the percentage of the discount as a label on the image maybe in the top right corner. I've managed to display it by using this code:

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

This edit is placed in my final_price.phtml file. However with this I am displaying the % Discount in my product page as well. Because I will have different stylings for both the pages I want to display it seperatly once in the catalog and once on the product page. Is there a way to do it? I do not want to use extensions.

Answer 1

You can try https://github.com/boris1988/module-product-labels enter image description here

composer require bperevyazko/module-product-label bin/magento module:enable BPerevyazko_ProductLabel bin/magento setup:upgrade And configure it