You can use below code to make changes in your price section and it’ll stand out
.price, .amount {
color: #f9cf72;
font-size: 24px;
font-weight: 700;
}
Thanks for the help/code!
I’m unsure as to how I can enter it on that specific page though without it affecting all other products. The only way I know how to enter that would be overall CSS for the theme but that would affect all of my other products as well.
I’m using Elementor btw.
Also, I need it to be centered in the middle of the element or block.
For other products I can easily move the price but as this is a variable product I cannot control the price via Elementor.
Is this possible?
I’ve added some margins to it for now but it only works for mobile and looks weird for desktop.
Also, I’ve figured out how to make it only apply to these products, I just need help centering it for all device sizes.
You can implement via multiple way like style.css with page id or particular page custom CSS field
/* IF you would like to use code with page ID replace 123 with your page ID */
.page-id-123 .price, .page-id-123 .amount {
color: #f9cf72;
font-size: 24px;
font-weight: 700;
}
I would suggest remove margin from the pricing and keep it as it is, Just update the color of the price and it’ll stand out else apply CSS based on device size.
KB:
How to find page ID?
How to Add Custom CSS to WordPress with Elementor
CSS Media Queries – Examples
Thanks again for the help but I still would like the price to be centered as it is on other products.
I felt like it once was in the middle but I can’t figure out how to get it back…
Any ideas would be awesome. I tried to code it based on device size but I can’t figure that out.
