I am pretty new to drupal and I have a problem with formatting the price in my drupal shop. I am using commerce sale price -module and commerce price savings formatter -module.

In the default view, the price shows ok, in the right position. But in the view (node:teaser) it shows the prices in the wrong position. I have tried everything to get the prices centered (modifying the css), but they are still on right side all the time. I would also like to remove the line above the price if its possible.

Here is the link to my shop: http://www.oladevelopment.fi/mifuko/content/home-shop

Ant ideas on how I can get the prices shown in the way I want?

1 Answer 1


Add this in your CSS:

width: 100%;

Also, you can add:

.commerce-price-savings-formatter-price .price-amount{
display: block;
padding-top: 5px;

Prices looks much better with this.

If width:100% doesn't work try to use width:100% !important; because width is already defined in module's theme.

To remove line above price add this to your CSS:

table.commerce-price-savings-formatter-prices tbody{

Also, if it doesn't work, use border-top:0 !important; instead border-top:0;

To minimize the space between prices add to CSS:

margin: 0 auto;
width: 50%;

Important part here is width: 50%;, change this percent to see which space you want to have, the more percent is the more space will be between prices. Again, use !important if doesn't work.

You can also add this to your CSS to make prices look better (to make it equal at the bottom edge):

table.commerce-price-savings-formatter-prices-down tr td{
vertical-align: bottom;

Don't forget to clear cache.

  • Hi, thanks a lot for the help! Now I got them centered! But I would still like to know how I get that line above the price removed? And now there is a big space between the over-lined normal price and the sale price, how can I minimize that space? Aug 27, 2014 at 13:46
  • I updated my answer, look there how to remove line. Be more specific about what you want to do with space, I don't see any other price, there is only one price.
    – mixerowsky
    Aug 27, 2014 at 14:14
  • Thanks a lot! This worked and I got the line removed! The prices that are on sale have the gap between the normal price and the sale price: oladevelopment.fi/mifuko/product-category/discount-items How can I minimize that gap? Aug 29, 2014 at 8:35
  • I updated the answer...
    – mixerowsky
    Aug 29, 2014 at 9:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.