responsive css code in emails

  • Resolved jlwebdesign26

    (@jlwebdesign26)


    4 months, 2 weeks ago

    hi Woocomerce community,

    For some reason on client website their all e-commerce emails are showing up with code at the top like this:

    @media screen and (max-width:600px)
    {#header_wrapper{padding:27px 36px !important;
    font-size: 24px;}#body_content table > tbody > tr >
    td{padding: 10px !important;}#body_content_
    inner{font-size: 10px !important;}}

    At the moment I have to comment out this code in the email styles template, however if a new version of woocommerce is installed it stripes out the commented code and the code shows in emails again.

    Also we are using legacy templates in woocom settings and haven’t upgraded.. not sure if its needed?

    Hope someone has come across this issue before?

    Thanks
    Julian

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    4 months, 2 weeks ago

    Hi there!

    Thanks for reaching out and sharing the details I understand how frustrating that must be.

    To help narrow this down, could you please let us know whether any changes were made to the site (such as plugin updates, theme changes, or custom code additions) around the time this issue started appearing?

    Regarding the email templates, we generally recommend updating and using the latest WooCommerce email templates. Legacy templates can sometimes cause unexpected issues like raw CSS appearing in emails, especially after WooCommerce updates. Updating the templates may resolve this behavior.

    As next steps, I’d suggest:

    1. Updating the WooCommerce email templates to the latest version and checking if the issue persists.
    2. If the issue continues, please share System Status Report which you can find via WooCommerce > Status. Please use https://pastebin.com/ or https://gist.github.com/ and share a link to that paste in reply here. Once we have more information, we’ll be able to assist you further.
    Thread Starter jlwebdesign26

    (@jlwebdesign26)

    4 months, 2 weeks ago

    have changed to latest template, also updated woocommerce and the same problem re-appears.

    https://pastebin.com/2wQArB19

    Not too sure what the issue is and or what plugin conflict would be causing it?

    Thanks

    Sai (woo-hc)

    (@saivutukuru)

    4 months, 2 weeks ago

    Hi @jlwebdesign26,

    Thanks for sharing the system status.

    This usually happens when a plugin or custom code interferes with how WooCommerce email CSS is handled. When the <style> tag gets stripped or altered, the responsive @media CSS ends up showing as plain text in the email.

    As a next step, please try temporarily disabling non-essential plugins (especially anything related to emails or optimization) and send a test email to identify the conflict. Also, check if your theme has any email template overrides under woocommerce/emails/.

    Once we know what’s injecting the CSS, we can fix it properly.

    Thread Starter jlwebdesign26

    (@jlwebdesign26)

    4 months, 2 weeks ago

    Thanks,

    I have just disabled the SMTP mail plugin and it seems to be rendering emails fine now.

    I think we started using it because emails were not sending at some point in time. Are there any particular settings I should be using with SMTP Mail? it was using secure SMTP 465 port.

    Thanks
    Julian

    Sai (woo-hc)

    (@saivutukuru)

    4 months, 2 weeks ago

    Hi @jlwebdesign26,

    Good find, that confirms the issue is coming from the SMTP plugin, not WooCommerce itself.

    WooCommerce emails are rendering correctly once the plugin is disabled, so this would be outside our scope to configure or troubleshoot. Some SMTP plugins modify or strip <style> tags, which can cause responsive CSS to appear as plain text in emails.

    I’d recommend reaching out to the SMTP plugin’s support team or checking their documentation for settings related to HTML emails or content filtering. They should be able to advise on the correct configuration.

    Let us know if you need help verifying anything further on the WooCommerce side.

    Plugin Support Kay U a11n

    (@kingsleyinfo)

    3 months, 4 weeks ago

    We haven’t heard back from you in a while, so I’m going to mark this as resolved.

    If you have a few minutes, we’d love if you could leave us a review: https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.