Smilehouse Workspace HOWTO Articles

Howto show original price as crossed-out

The trick is to use CSS to create the effect.

Add the following code to your CSS (Cascading Style Sheet) file:

.oldprice {
     color: #999;
     text-decoration: line-through;
     font-size: 13px;
}


This creates a style where the text is; grey, line-through and size 13px.

Place the following code on the Workspace product page template:

<span class="oldprice">$product_title1$</span>

This script assumes that you set your old price (or whatever price you want to cross out) into product field "Title 1". You can also use any other product field for this purpose.

The result:



An other way is to use CSS with a background picture to make even more visual effect:

.oldprice {
     color: #999;
     background: #FFFFFF url(http://www.URLtothepicture.com/pics/oldprice-bg.gif) no-repeat;
     font-size: 13px;
}


This script displays a background image for the price. It can be a cross or some other visual effect.



<< Back to HOWTO index