Add "You Save" amount and percentage to Special Price in Magento

In order to display a "You Save" for "Special Price" products in magento--to make it look similar to amazon's price display--you can do the following:

Copy

app/design/frontend/base/default/template/catalog/product/price.phtml

to

app/design/frontend/default/YOURTEMPLATE/template/catalog/product/price.phtml

Then in price.phtml that you just copied, right above:

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

Insert:


<?php // KZN Show discounted percentage and price ?>
    <?php if($_finalPrice $_price): ?>
    <?php 
    $_savePercent 
100 round(($_finalPrice $_price) * 100); 
    
$_saveAmount number_format(($_price $_finalPrice), 2);  
    
?>
        <p class="yousave">
            <span class="price-label label">You Save: </span>
            <span class="price">
                <strong class="save-amount">$<?php echo $_saveAmount?></strong> (<?php echo $_savePercent?>%)
            </span>
        </p>
    <?php endif; ?>
<?php 
// KZN Show discounted percentage and price ?>

Then you'll probably want to style it. So insert this into your theme stylesheet (e.g. style.css)

/********** < Product Prices */
.price { white-space:nowrap !important; }
 
.price-label { font:normal 12px/15px verdena, Arial, Helvetica, sans-serif; white-space:nowrap; display:inline-block; width:80px; text-align:right; color:#666; }
 
.price-box { margin:5px 0 10px; }
.price-box .price { font-size:13px; line-height:22px;font-weight:bold; color:#3399ff; }
 
/* Regular price */
.regular-price { color:#3399ff; }
.regular-price .price { font-size:18px; font-weight:normal; color:#900; font-family:verdana, arial, helvetica, sans-serif;}
.product-view .regular-price .price {}
.product-view .regular-price .price:before { content:"Price: "; color:#666; font:normal 12px/15px verdena, Arial, Helvetica, sans-serif;}
 
/* Old price */
.old-price { margin:0; }
.old-price .price-label { }
.old-price .price {  font-weight:normal; font-size:13px; color:#000; text-decoration:line-through; }
 
/* Special price */
.special-price { margin:0; }
.special-price .price-label { }
.special-price .price { font-size:18px; font-weight:normal; color:#900; font-family:verdana, arial, helvetica, sans-serif;}
 
 
/* You save price */
.yousave { margin:0; }
.yousave .price-label { }
.yousave .price { font-weight:normal; color:#900; font-family:verdana, arial, helvetica, sans-serif;}

Of course you may need to adjust the CSS classes to reflect your theme. But now you'll have something that resembles Amazon's price display.

Tags: magento price display