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




Article information

Software: Smilehouse Workspace
Author: Juha Valvanne
About author: Juha Valvanne is working at Smilehouse as a User Interfaces Designer and Project Manager.
Contact author: juha.valvanne@smilehouse.com

HOWTO
Learn how to use Workspace more efficient! Find latest tips and tricks from here


 
© Smilehouse