Magento move currency symbol out of span for microformats

Question

I am working on Magento 1.7.0.2 and in

app\design\frontend\default\default\template\catalog\product\price.phtml 

on line 201 (ish) is

 <?php echo $_coreHelper->currency($_price, true, true) ?>

Which produces the code:

<span class="price">£100.00</span>

Because the currency symbol is in the span, it gets an error in microformats. So I want the price to look the same but take the currency symbol out of the span so it will look like:

£<span class="price">100.00</span>

How would I do that? What is $_coreHelper->currency($_price, true, true) doing?

Answer 1

What is $_coreHelper->currency($_price, true, true) doing ?

/**
 * Convert and format price value for current application store
 *
 * @param   float $value
 * @param   bool $format
 * @param   bool $includeContainer
 * @return  mixed
 */
public static function currency($value, $format = true, $includeContainer = true)

i.e add currency symbol and enclose it into <span class="price"><span> so if you would use $_coreHelper->currency($_price, true, false) you would get the same price without <span class="price">

If you need to use £<span class="price">100.00</span>

 <?php echo Mage::app()->getLocale()->currency(Mage::app()->getStore()->getCurrentCurrencyCode())->getSymbol(); ?>
<span class="price"><?php echo $price ?></span>

<?php echo $_price ?> - is not a final version of your code, you need to format it but without currency symbol, you can read it on Magento SE topic - how to get price without currency symbol

Smth like

Mage::getModel('directory/currency')->format(
    $product->getFinalPrice(), 
    array('display'=>Zend_Currency::NO_SYMBOL), 
    false
);

Answer 2

you can add the currency character as dynamic content using :before,:after and inserting it character via content=""; like so:

.price{position:relative; text-align:center; outline:1px solid #000; width:200px; height:60px}
.price:before,.price::before{content:'£'; position:absolute; z-index:12; font-size:50px; left:0; top:0; width:200px; height:60px; text-align:left}
.price:after,.price::after{}  

i whipped up a quick fiddle showing it in action http://jsfiddle.net/jalbertbowdenii/7MDH5/2/