Product Title and Price Font Size

[incywincies]

Hi,

I see several posts on this topic and tested a few of the codes provided as solutions, but I still can’t see any changes taking place. I went to Customization > Pro Theme Options > Additional CSS and added there. The attached image is an example of one of my product pages before and after.

I’d like to make changes to the product titles and prices for every product on the site.

Thanks in advance for your help,
Orlando

[marc_a]

Hey @incywincies,

Thanks for reaching out!

To change the product text title font size, you may use the CSS code below and add it in the Theme Options > CSS.

.edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title, .editor-styles-wrapper .wc-block-grid__product-title, .wc-block-grid__product-title {
	font-size: 20px !important;
}

Then for the price font size:

.wc-block-grid__product-price {
	font-size: 18px !important;
}

Just change the font size to your desired size. Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.

[incywincies]

Thank you for the quick reply, Marc . I’ll give this a try and get back.

Orlando

[marc_a]

Hey Orlando,

Great and you’re welcome!

Cheers!

[incywincies]

Hi Marc,

The title font changed but not the price. See attached showing code I added and price font.

Thanks,
Orlando

[marc_a]

Hey Orlando,

Upon seeing the attached pictures, no closing CSS tag for the title that leads the font size of your product price not to work.

Please copy the full CSS code below.

.edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title, .editor-styles-wrapper .wc-block-grid__product-title, .wc-block-grid__product-title {
	font-size:18px !important;
}

.wc-block-grid__product-price {
	font-size: 18px !important;
}

You can also check CSS lint to check the error on your code.

• http://csslint.net/

Hope that helps.

[incywincies]

Hmm very interesting. I added code exactly but no change to price. I noticed that “Sale”, and “Add to Cart” also remain the same. Is it possible that these fields are interconnected, and all must be changed in order for your code to work? Just wondering.

Thanks,
Orlando

[marc_a]

Hey Orlando,

I check the shop page and found out that you misspelled the !imprtant it should be !important. Please keep in mind that we don’t really support any CSS customization because it is outside the scope of our theme support. The code above serves as a guide on how you can customize the font. I suggest you learn how to target the CSS classes by checking the link below.

• https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

Or you can avail One where we can answer questions outside our theme’s features.

Thank you for understanding.

[incywincies]

Thank you, Marc…understood. And you were correct. It was the spelling. It looks perfect now. Thank you very much!

Orlando

[marc_a]

Hey Orlando,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.