actually in mobile and desktop!
To remove the space, you’ll need to modify the email styles. Here’s how you can do that:
add_filter( 'woocommerce_email_styles', 'custom_woocommerce_email_styles' );
function custom_woocommerce_email_styles( $css ) {
$custom_css = "
/* Remove padding/margin above the logo */
#template_header_image img {
margin: 0 !important;
padding: 0 !important;
}
";
return $css . $custom_css;
}
Another, more direct approach, would be to copy the email templates to your theme and then modify the styles there.
- Copy the WooCommerce email templates from
wp-content/plugins/woocommerce/templates/emails/ to yourtheme/woocommerce/emails/.
- Edit the
email-header.php in yourtheme/woocommerce/emails/.
- Find the section that outputs the logo and adjust or remove any margin or padding CSS properties associated with it.
Lastly, if you’re not confident in coding, consider reaching out to a developer for more personalized assistance.
Best Regards,
Raza
WPRobo
Hi @joannaritsoni
Does the previous code help?
I would also suggest using this CSS and see if it helps:
@media only screen and (max-width: 768px) {
/* Adjust the CSS selector to target the logo container */
#template_header_image {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
Please note that we can’t provide support for code customization as per our support policy. Still, if you need customization, we do our best to offer advice and direct you to appropriate resources. Based on the feedback we get from our customers, we highly recommend contacting one of the services on our Customization page.
