CSS: Changing Size of WooCommerce Product Titles

Support
#1

Hello,

I recently changed our WooCommerce product titles from H1 to title tags in php. They appear too small on the product pages. I’d like to make these larger in CSS if someone could help me out it would be much appreciated.

Here is an example of one of our product pages:

https://kannakart.com/product/glass-one-hitter-elevate/

The title is the part where it says “Glass One Hitter | Elevate Accessories”

Thanks,

-A

#2

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Conversation Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

#3

Hello @Kannakart,

Thanks for writing in!

Looks like you haven’t placed the text under HTML tag. Can you please wrap the text inside HTML tag, we will then provide you the CSS?

Thanks.

#4

Hi Prasant,

I believe I’ve fixed this. Having some trouble adding HTML to the PHP code I was given to change the product page titles.

#5

Good to hear you figured it out! Let us know if you have any other questions. :slight_smile:

#6

Prasant,

I apologize for the miscommunication. I still need help with the CSS but I believe I was able to add HTML to the PHP code.

#7

@Kannakart,

Sorry on my part as I though you managed to make the required changes. As I was looking the website, it seems that you still have not wrapped Glass One Hitter | Elevate Accessories inside HTML code. Also <title> tags are used in <head> section of the document not in body, it’s something I am bit confused as to why you are trying to include <title> in page body. Please see screenshot. https://screencast.com/t/MrKNISegsfc

To increase the text size HTML output should look something like:

<p class="woo-product-title">Glass One Hitter | Elevate Accessories</p>

Next, you can use following CSS to increase the text size:

p.woo-product-title {
    font-size: 20px;
}

The reason I am requesting you to wrap text with HTML tags is because the text does not have the structure to style with CSS. You can replace <p> and Class name as per your preference.

Thanks.