Magento Text Area Above Individual Products Using Custom Layout Design XML

I recently wanted to add a text area above a selection of products on a Magento site in order to advertise that they we on special offer.

The easiest way I found was to use Custom Layout Design in the product config | design area. Go to Catalog | Manage Products | Design

In the Custom Layout Update field add your XML… In my case I wanted to indicate the product was on special offer and to show the new prices with CSS line-through on the old prices – you can of course have whateven text or callout image you require:

Here is the code I used for to render the above image:

<reference name="content">
<block type="core/text" before="-" name="SPECIAL">
<action method="setText">
<text><![CDATA[<span style="color:#E11919; font-size: 20px; font-weight: bold">SPECIAL OFFER</br></span>

<span style="color:#000000; font-size: 14px; ">10pcs&nbsp;</span>
<span style="color:#000000; text-decoration: line-through; font-size: 14px; ">&pound;12.95</span>
<span style="color:#E11919; font-size: 14px; ">&nbsp;&pound;5.95&nbsp;&nbsp;&nbsp;</span>

<span style="color:#000000; font-size: 14px; ">50pcs&nbsp;</span>
<span style="color:#000000; text-decoration: line-through; font-size: 14px; ">&pound;10.95</span>
<span style="color:#E11919; font-size: 14px; ">&nbsp;&pound;4.95&nbsp;&nbsp;&nbsp;</span>

<span style="color:#000000; font-size: 14px; ">100pcs&nbsp;</span>
<span style="color:#000000; text-decoration: line-through; font-size: 14px; ">&pound;9.50</span>
<span style="color:#E11919; font-size: 14px; ">&nbsp;&pound;4.45&nbsp;&nbsp;&nbsp;</span>

<span style="color:#000000; font-size: 14px; ">250pcs&nbsp;</span>
<span style="color:#000000; text-decoration: line-through; font-size: 14px; ">&pound;8.50</span>
<span style="color:#E11919; font-size: 14px; ">&nbsp;&pound;3.95&nbsp;&nbsp;&nbsp;</span>

</br></br>]]></text>
</action>
</block>
</reference>

It is possible to have the area below the product by removing this code from the above:

before="-"

Enjoy!