Woo Commerce Product Title line height

[hwolfe]

Hi!

I am using a shortcode for WooCommerce products on this page: https://fightlikeemilie.org/donate

How can I increase the line height on the product titles?

Thank you!

[friech]

Hi @hwolfe,

Thank you for writing in, please add this to Theme Options > CSS

.woocommerce li.product .entry-header h3 {
	line-height: 1.8;
}

Feel free to adjust the 1.8 value.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[dmedianik]

How did you get that CSS selector?

From inspection I got

.entry-title {
margin: 0;
font-size: 250%;
line-height: 1.05;
}

To change it wouldn’t the correct code be

.entry-title {
margin: 0;
font-size: 250%;
line-height: 1.85;
}

Sorry if I’m wrong, I’m just trying to learn something as well, so hopefully, you can explain how you got the suggested code.

[jade]

Hi there,

It is about knowing how to write a CSS selector. Please check the screenshot below:

You will see that the titles are wrapped in an <a> tag which is contains in an h3 tag. So you can first start targetting the title through the a tag like this:

h3

Then you can check what contains a tag which is a header tag with the class entry-header tag so you can write it like:

.entry-header h3

Then you can trace further for the outer containers of the element until you get to the CSS selector like what was previously suggested.

Please check this link for further reading:

• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.