Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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:</p> <p><strong>Copy</strong> </p> <pre><code>app/design/frontend/base/default/template/catalog/product/price.phtml </code></pre> <p><strong>to</strong> </p> <pre><code>app/design/frontend/default/YOURTEMPLATE/template/catalog/product/price.phtml </code></pre> <p>Then in price.phtml that you just copied, right above:</p> <p>Below this code: </p> <pre><code>&lt;?php endif; /* if ($_finalPrice == $_price): */ ?&gt; </code></pre> <p><strong>Insert</strong></p> <pre><code>&lt;?php // KZN Show discounted percentage and price ?&gt; &lt;?php if($_finalPrice &lt; $_price): ?&gt; &lt;?php $_savePercent = 100 - round(($_finalPrice / $_price) * 100); $_saveAmount = number_format(($_price - $_finalPrice), 2); ?&gt; &lt;p class="yousave"&gt; &lt;span class="price-label label"&gt;You Save: &lt;/span&gt; &lt;span class="price"&gt; &lt;strong class="save-amount"&gt;$&lt;?php echo $_saveAmount; ?&gt;&lt;/strong&gt; (&lt;?php echo $_savePercent; ?&gt;%) &lt;/span&gt; &lt;/p&gt; &lt;?php endif; ?&gt; &lt;?php // KZN Show discounted percentage and price ?&gt; </code></pre> <p><strong>Then you'll probably want to style it. So insert this into your theme stylesheet (e.g. style.css)</strong></p> <pre><code>/********** &lt; 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;} </code></pre> <p>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.</p> <p><strong>Reference</strong></p> <p><a href="http://duntuk.com/add-you-save-amount-and-percentage-special-price-magento" rel="nofollow">http://duntuk.com/add-you-save-amount-and-percentage-special-price-magento</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload