Change the font size of Email Heading

Hi Daniela @dany84,

I’d like to reduce the font size of the Email Heading

In order to reduce the font size of the email heading text you can use this snippet:

add_action('woocommerce_email_header', 'add_css_to_email');

function add_css_to_email() {
echo '
<style type="text/css">
#header_wrapper h1 {font-size: 20px !important;}
</style>
';
}

This is how it looks the default heading:

Link to image: https://bit.ly/3ySnBHY

and after adding the snippet:

Link to image: https://bit.ly/2TUfn3b

This code will change the font size of the email notification heading text from the default 30px to 20px.

Add the code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin.

Hope that helps!

Hi Mirko,

I am afraid the code is not recognised by OceanWP.

Please check the screenshot in the link below.
https://drive.google.com/file/d/1TwZSrFQHc-RB5m2uGe785_mS59xZnK-K/view?usp=sharing

Best,
Daniela

Hi Daniela,

It looks like that the screenshot was not sent as expected.

If you don’t already have a screenshot service installed, here are a few free options:

* https://snipboard.io
* https://skitch.com/
* https://getcloudapp.com/
* https://awesomescreenshot.com/

Still, it shouldn’t be affected by the theme unless the theme is overwriting the email template (which usually doesn’t happen).

In this case, my recommendation would be to confirm if you added the code properly. You can try adding with the plugin Code snippets that we recommended in the last reply if you haven’t tried.

We also have a full guide on how to add custom code here: https://woocommerce.com/posts/properly-add-woocommerce-custom-code/

Hello,

I added the code snippet correctly in the functions.php file, but the size hasn’t changed although I tried different font sizes. Then I used the plugin you suggested – again no change.
Anything else I can try, please?

Thank you!
Daniela

Hi Daniela,

Thanks for getting back.

Just to make sure we’re on the same page here, could you please provide screenshots of the email heading text you’d like to change?

I recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on that page, then paste the URL in this chat. It works with Chrome, Firefox, Safari, and Edge browsers.

Also, could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”. Once you’ve done that, paste it here in your response.

Thanks.

Since it’s been a while since we last heard back from you, I’m going to mark this thread resolved.

Hopefully, you were able to find a solution to your problem! If you have further questions, please feel free to open a new topic.

Cheers! ??

Hi,

I was not aware that I got a reply back. Please wait until I action the suggestion above and let you know if the issue is solved.

Thank you!

Hi @dany84 ??

No worries! Happens ??

Please keep us posted, we will be more than happy to help moving forward.

Cheers.

Hi,

Thanks.
I was able to check the function.php and I discovered that the hosting agent did not add the code as I asked him. So, I added the code and it works now.

But I have other changes I want to make please:
1) I want to reduce the height of the title box – the green area in the screenshot: https://snipboard.io/48EOtB.jpg
2) the hash before the order number, e.g. #4741
3) is there any way to get rid of one of the client addresses if they are the same? The same address appears twice as billing and shipping address at the bottom of the email.

Thank you!
Daniela

Hello,

Did you receive my latest request, please?

Daniela

Hi @dany84,

To edit the layout style of email templates in WooCommerce the Google Search below contains some great resources that describe how to make such changes using CSS.

https://www.google.com/search?q=add+css+to+WooCommerce+emails&oq=add+css+to+WooCommerce+emails

You could also use some CSS with a display: none element to hide portions of the email content like the Hash and Address.

With regards to editing the content of the emails directly, that would require some knowledge of PHP development as it would require writing some custom code. If you would like to investigate that possibility further, you could reach out to some of the official WooCommerce development partners via the link below.

https://woocommerce.com/customizations/

I hope this helps.