Sale price not displaying correctly

Hello @vaibhavbthl,

Sorry, but I’m not sure if I understand the full picture here.

Could you please provide more details and attach some highlighted screenshots to help understand what you’re trying to achieve?

Feel free to use Snipboard to upload your screenshots.

Look forward to hearing back from you.

Hi

I meant to say that when you put a product on sale then the “regular price” is cut from the middle with a line using the “text-decoration: line-through;” property. I am saying that this line should cut the price from the middle but in my case its cutting the price at the top. Please look at the line in this pic, its cutting the Rs.7,999 price from the top instead of the middle, I have marked it in a black rectangular box – https://snipboard.io/9R7owG.jpg

This is happening because I increased the font size: 1.5em, how should I fix this?

Thanks

Hello @vaibhavbthl,

I see what you mean now, try removing the CSS you added and using this selector instead to increase the font size :

.single-product div.product p.price{
  font-weight: 1000 !important;
  font-size: 2em !important;
}

Let us know how it goes!

Hi

Thanks for the help. I am facing two issues –

1. The font weight property is not working, the price is not getting bold no matter whether I enter 1000 or bold value.
2. I need the price to be bold and big on the category page as well, this code is only changing the price on the product page. Can you please help me with that?

Hi @vaibhavbthl

You can try below selectors to make the price bold on category and product pages.

span.woocommerce-Price-amount.amount{ 
font-weight: bolder !important; 
font-size: 25px !important; 
}

Let me know how that goes!

Hi

This code creates my original problem where the regular price is getting cut from the top instead of the middle. The code that Saif provided works fine but it doesn’t change the size of the price in category page, it works only for product page. Any update for Saif’s code where it works on the category page as well instead of just the product page?

Thanks

Hello @vaibhavbthl,

I added the .archive selector to target all archive pages like category and shop:

/*  Increase price font size  */

.single-product div.product p.price, .archive .price{
  font-weight: bold !important;
  font-size: 2em !important;
}

Please make sure to delete the previous snippet before adding the one above.

Hope this helps! ??