Change price placement

I want the regular price on the right side of the sale price:

Normal view:
https://gyazo.com/199fa4e5be6abb0cbfd09133582164a9

Reversed view:
https://gyazo.com/54d6f05c0dbb2e00615d56b9ee51b6c7

I used HTML via “inspect element”. I have good knowledge of PHP but I dont know how to program this to use with WooCommerce.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.woocs_price_code {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.woocs_price_code > ins {
	margin-right: 5px;
}

.single-product-page .woocs_price_code > ins {
	margin-right: 10px;
	line-height: 1;
}

Regards

Thank you so much it worked right away. This is the exact reason why I love this theme so much. The support is the best!

Great, you are always welcome! 🙂

https://gyazo.com/abcc4fef0edd2ffe6a7a0b7e8c3396c0

How to get the same styling on the shop page?

Do you want to increase the price font size on the shop page?

Yes I want it to match the product page. It displays the style I applied as you can see on the gyazo.

Like regular products don’t have the pricing CSS as the sale price ones.

What I want is the non-sale products to have the same styling as the products who have a sale price

You need to remove your custom CSS here https://gyazo.com/4b7062e21774dc7b5813f1dd1af5515f
And add this snippet to the Custom CSS section in Theme Settings

div.product-grid-item .price {
    font-size:200%;
}

[Author]

Posts