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:


Insert:



$_savePercent = 100 - round(($_finalPrice / $_price) * 100);
$_saveAmount = number_format(($_price - $_finalPrice), 2);
?>

You Save:

$ (%)


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