How to remove white space above header in WooCommerce email notifications

Question

I try to remove white space above the header in WooCommerce email notifications.

I already pasted the email files into the folders:

public_html -> wp-content -> themes -> flatsome-child -> woocommerce -> emails

I already tryed to hide the header with:

/*do_action( 'woocommerce_email_header', $email_heading, $email );*/

But this is not solution because, yes it removes the white space above the header but also hides de header and I don't want this.

I just want to remove the empty space above the header (look the image attached)

7uc1f3r · Answer 1 · 2022-03-07T13:22:16.987

The white space is applied via CSS. If you want to apply your own styles or want to modify the existing one in WooCommerce email notifications:

1) You can overwrite the template file:

The template file can be overridden by copying it to yourtheme/woocommerce/emails/email-styles.php.

Replace line 50 - 56 @version 4.0.0

#wrapper {
    background-color: <?php echo esc_attr( $bg ); ?>;
    margin: 0;
    padding: 70px 0;
    -webkit-text-size-adjust: none !important;
    width: 100%;
}

With

#wrapper {
    background-color: <?php echo esc_attr( $bg ); ?>;
    margin: 0;
    padding: 70px 0;
    padding-top: 0;
    -webkit-text-size-adjust: none !important;
    width: 100%;
}

Also see: Template structure & Overriding templates via a theme - How to Edit files

OR

2) Use the woocommerce_email_styles filter hook:

// Add CSS to email
function filter_woocommerce_email_styles( $css, $email ) {
    $extra_css = '#wrapper { padding-top: 0 }';
    
    return $css . $extra_css;
}
add_filter( 'woocommerce_email_styles', 'filter_woocommerce_email_styles', 10, 2 );

Code goes in functions.php file of the active child theme (or active theme).

Optional: via $email->id == ... you can target specific emails, see How to target other WooCommerce email notifications

How to remove white space above header in WooCommerce email notifications

1 Answers1