I would like to show discount percentage on image as badge (refer image 2). I followed the instructions from http://www.customy.com/blog/show-product-discount-percent-in-magento/ and managed to show discount percentage on product page (refer image 1).

I tried:

<?php // Discount percents output start ?>
<?php if($_finalPrice < $_price): ?>
<?php $_savePercent = 100 - round(($_finalPrice / $_price)*100); ?>
    <p class="special-price yousave">
        <span class="label"><?php echo $this->__('You Save:') ?></span>
        <span class="price">
            <?php echo $_savePercent; ?>%
<?php endif; ?>

Now I got result as:
enter image description here

Now I need to show discount percentage on product image too like
enter image description here

What should I do to show discount badge on product image? I'm using magento RWD theme

  • in which page.you want to show it – Amit Bera Aug 23 '14 at 4:33
  • I want to show it in on product images. – dexter Aug 23 '14 at 9:46

as i seen in your question image you need this effect on product detail page so have to edit media.phtml


And in that you have to do same coding to get this value. you can make wrapper class which is override to product image with some dynamic text over product image like as you want.

you can use css like in this page


hope this will sure help you.

|improve this answer|||||
  • Thanks, I'm not sure how to position discount % on my product image. Could you please elaborate your answer. – dexter Aug 23 '14 at 10:28
  • now I generated image, but don't how to insert it on product image, I guess I need CSS support. Anyhow thank you for your great support. – dexter Aug 23 '14 at 11:43
  • fyi, I moved the page to: blog.centerkey.com/2013/01/… – Dem Pilafian Nov 17 '18 at 5:38

try this:

<?php // Discount percents output start 

    <?php if($_finalPrice < $_price): ?>
    <?php $_savePercent = 100 - round(($_finalPrice / $_price)*100); ?>
        <img src="image " alt="<?php echo "Discount % ".$_savePercent; ?>" />
    <?php endif; ?>
<?php // Discount percent output end ?>
|improve this answer|||||
  • Thanks, I tried it on app/design/frontend/base/default/template/catalog/product/price.phtml no changes happen on my site. – dexter Aug 23 '14 at 10:25
  • There is a typo here: $_price=$_product->getPirce(); should be $_price=$_product->getPrice(); However if using this in price.phtml this shouldn't be necessary – loeffel Jan 23 '17 at 10:42
  • Instead of percentage how to show " you save : discount amount " ? @Amit Bera♦ – zus Dec 19 '19 at 10:19

If you wish to show product discount percent next to product price or somewhere on a product page, here's how you do it.

Open app/design/frontend/yourpackage/yourtheme/template/catalog/product/price.phtml & Find:

<?php endif; /* if ($_finalPrice == $_price): */ ?>

Add above it:

<?php // Display Discount percents start ?>
    <?php if($_finalPrice < $_price): ?>
    <?php $_savingPercent = 100 - round(($_finalPrice / $_price)*100); ?>
        <p class="special-price yoursaving">
            <span class="label"><?php echo $this->__('Your Saving:') ?></span>
            <span class="price">
                <?php echo $_savingPercent; ?>%
    <?php endif; ?>
<?php // Display Discount percent end ?>
|improve this answer|||||
  • my location : C:\wamp\www\abcd\app\design\frontend\default\theme name\template\catalog\product\price.phtml,, after adding your code, the original price also hiding,, how can i solve this,, – Gem Jun 30 '17 at 11:43
  • and also not displayed the price of every product. – Gem Jun 30 '17 at 12:15
  • This code is for display discount percentage , Not to Hide price – Ramesh Oct 7 '18 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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