Custom CSS not working

  • Hi, great plugin but some bits just aren’t working for us.

    Header image has had an orange background set, looks great in preview, but white on live emails.

    Have tweaked the alignment of content in the order details using custom css in the plugin custom styles section, again this looks fine in the preview but isn’t taking effect on live emails.

    Oh, and the product image isn’t showing on the preview, but is there on live emails. Any idea why please?

    Please advise.

    • This topic was modified 4 years, 4 months ago by timbozo.
Viewing 4 replies - 1 through 4 (of 4 total)
  • hannah

    (@hannahritner)

    Hey @timbozo
    Hope you’re doing well! Have you cleared your cache since making all these customizations? Seems like there may just be a slight disconnect from edit to live.

    Hannah

    Thread Starter timbozo

    (@timbozo)

    Hi Hannah,

    Cache has been totally cleaned and we’re still not seeing any of the changes that I have made in the custom css – Pricing column should be centred, there should be a margin to the left of all items in the product column. All of these are showing as they should in the preview but in the emails that go out the styling has been ignored.

    In addition, I switched off the images, but they are still appearing. See: https://ibb.co/HnKsp7s.

    Please advise. Thanks.

    hannah

    (@hannahritner)

    I’ll have the developer look into this for you as soon as he’s available.
    Thanks for your patience!

    Best,
    Hannah

    Hey,
    From the screenshot it appears you are using nth-child in your css, that won’t’ work in an email format most of the time.

    Woocommerce takes all the css for emails and renders it inline through a PHP process before it sends the email, there is no “style” tag or section of raw css it’s all css that is added inline. This helps to get better support as email inboxes all follow there own rules about css and what css they want to support. You can see a guide here showing many of the inboxes and how they all support different things: https://www.campaignmonitor.com/css/media-queries/media/

    That would make sense for some of your spacing css.

    As for the rest I need more information on what is being output. Can you share a raw output in a gist for an email?

    Ben

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom CSS not working’ is closed to new replies.