0

I'm currently customising my first (woocommerce) email template and I'd like to hide data via CSS display: none

However, I'm wondering what the support of CSS and display: none is, i.e.

  1. do all email clients support basic CSS such as display: none or is it too much?
  2. what happens if a receiver views emails only in text format (not HTML)? Does the email client convert the HTML to text (i.e. the display: none is still not shown) or does the the email client just put out the plain text it can find without HTML conversion (i.e. display: none content is still shown)?
  3. is there a website to test how emails will look across email clients (outlook, gmail, yahoo, spark, mac etc)?

I know this may be very basic, but I'd truly appreciate any help !

Many thanks

Update:

This website provides some details on hiding elements: http://www.emaildesignreview.com/email-code/hiding-elements-in-email-4922/

I'm currently using the following to try hiding on as many clients as possible:

font-size: 0; /* in case display-none isnt working */
max-height:0px; overflow:hidden; /* for gmail */
opacity: 0;
visibility: hidden;
display: none; 
mso-hide: all; /* for outlook */
AlphaX
  • 615
  • 1
  • 11
  • 25

3 Answers3

1

  1. The display: none property is fully functional at least on Gmail since 2016, but not in Outlook.

  2. If the email do not recognize the property it will be just ignored. (In this case the inside will be shown).

  3. So if you want to create e-mails and make sure that is working I believe the best way to be sure that is everything OK is to test, create email accounts in various services, and send emails to yourself. Most minor email services will follow the same rules as the bigger ones. There some tools that can help you test it, you can see it in this quetion.

More tips for creating emails with HTML here and here.

Isabella Riquetti
  • 415
  • 3
  • 14
  • thank you! I'm still wondering though what happens if the email client only reads text format - do you know? – AlphaX Jan 06 '21 at 23:35
  • I belive [this article](https://www.blackbaud.com/support/howto/coveo/luminate-online/subsystems/email/content/concepts/Admin_Email_PlainTextEmails.html) can help you testing it. This kind enable plain text preview in some providers – Isabella Riquetti Jan 07 '21 at 01:50
1

Display none works on almost all email clients. Outlooks are notorious as you might have seen. Below is a piece of code we use to hide preheaders.

<div style="display:none;font-size:1px;color:#000000;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
<!-- pre header -->
 </div>

There are different variations of this online but what you are after is display:none and mso-hide:all. mso-hide all is specifically for Outlook and will hide any element it is on. Just remember, if you have nested tables, it will need to go on all of them.

Syfer
  • 4,262
  • 3
  • 20
  • 37
  • Thank you! I'm using most of that as well now. Wouldn't it be better if you would set your color to transparent and the font-size as well as line hight to zero? Have you tested what happens to your preheader if the receiver doesnt have HTML format enabled? Does it then show the 'pre header'? – AlphaX Jan 07 '21 at 17:21
  • Font size has triggered spam at times (specially in Gmail). As for transparency, I haven't tested but i assume Outlook will not like it (as always). – Syfer Jan 12 '21 at 00:17
1
  1. You can check how display:none is supported across email clients on Can I email. (Disclaimer: I'm the maintainer of the site.)

Can I email… display:none

  1. HTML and plain text are two separate versions of an email. It’s up to you to send both versions and make sure that the content is relevant. From what I see from a WooCommerce I have, with the Storefront theme, it is set up by default to only send a text/html. You can change this WooCommerce > Settings > Emails, select an email and change the "Email type" value to Multi-part. You can then see in your admin the file you need to edit for the plain text version in your theme.

  2. You can use screenshots testing tools like Litmus (the biggest, well-known tool in the community), Email on Acid (my personal favorite) or Testi.at (good to have if you have a low budget).

HTeuMeuLeu
  • 1,851
  • 1
  • 7
  • 17
  • This is really helpful, thanks so much! On question #2: thanks for claryfing and the tip on the WC settings! I still dont really understand though what a receiver will get / see if the person has set his email client to text format only (i.e. how will that treat display: none)? Also, you are saying that you can set 2 emails in WC text and html separately (= Multi-part), but how will WC know which email to send to the receiver? – AlphaX Jan 07 '21 at 17:17
  • 1
    An email is basically a giant text file that can contain different versions of its content (like `text/plain`, `text/html`, `text/x-amp-html`). So when WooCommerce sends an email, it sends all versions (depending on what you have set up). And then the email client (on the receiver ends) picks which one to display depending on the receiver’s settings. A plain text email can not support `display:none` because it is just plain text. This [Developer's Guide to Email](https://learn.kickbox.com/) is a great technical guide to understand how emails and MIME work. – HTeuMeuLeu Jan 08 '21 at 10:39