Change price box layout in magento product page

If you want to bring regular price, special price and discount in same line as shown below then u need to follow 2 easy steps.

Step 1:
go to the following location of your magento installation : /app/design/frontend/default/[your theme]/template/catalog/product/price.phtml

find the below code


<?php else: ?>
            <p class="special-price">
                <span class="price-label"><?php //echo $this->__('Web Price:') ?></span>
                <span class="price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">
                    <?php echo $currency->formatPrecision($_finalPrice,0,false) ?>
                </span>
                <br/></p><p class="regular-price"><span><?php echo $this->__('Discount: ') ?></span>
<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"><?php echo '<span class="perecent-price">'.' ('.$_savingPercent.'%)'.'</span>'; ?></span>
            </p>

now we just need to edit the above highlighted code. so the final code will look like this.


<?php else: ?>
            <p class="special-price">
                <span class="price-label"><?php //echo $this->__('Web Price:') ?></span>
                <span class="price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">
                    <?php echo $currency->formatPrecision($_finalPrice,0,false) ?>
                </span>
                </p><span class="regular-price"><?php echo $this->__('Discount: ') ?></span>
<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"><?php echo '<span class="perecent-price">'.' ('.$_savingPercent.'%)'.'</span>'; ?></span>
         

what we have done here is simply removed the <br/> tag and removed <p> tag. The CSS style given to <p> tag has been now given to <span> please see the highlighted portion above.

Once you have done this you will need to change your style.css file so that Discount would not mess up category page.


Step 2:
Now go to your styles.css file there find .special-price .price and increase the width.


Before

.special-price .price {

1. float: left;
2. width: 70px;

After

.special-price .price {

1. float: left;
2. width: 140px;   <------ Increase this value depending on your category page layout

This will push Discount to next line on category page. If you dont edit your css than category page will be in mess like this.