Support » Plugin: Kadence WooCommerce Email Designer » CSS hover rules

  • Resolved Richard-B

    (@richard-b)


    Hi, firstly this is a great plugin, best i’ve used for Woocommerce emails.

    My issue is when I add custom CSS for a button and add a hover state the rule is not added to the email that is sent out.
    Is there any way of doing this?

    Thanks in advance.

Viewing 15 replies - 1 through 15 (of 15 total)
  • hannah

    (@hannahritner)

    Hey,
    What css are you using? And where are you adding it?

    Hannah

    Hi @hannahritner

    I’m using the following in the ‘Custom Styles’ area of the email customizer:

    .button {
    padding: 12px 40px;
    background-color:#f78a1d;
    text-decoration:none !important;
    color:#fff !important;
    text-align:center;
    text-transform:uppercase;
    font-weight:bold !important;
    border-radius:3px;
    }
    .button:hover, a.button:focus {
    background-color: #afcd5d !important;
    }

    Thanks

    hannah

    (@hannahritner)

    Sorry, one more question – how are you adding the button to your email template?

    Hannah

    The text areas take HTML so just
    <a href="" class="button">Link Text</a>

    Hey,
    Hover is not supported in many email clients.

    https://www.campaignmonitor.com/css/selectors/hover/

    Ben

    Hi @britner

    That’s not quite the same as not supported at all, from that list it looks like half. Is there a reason why the :hover rule is stripped from the custom CSS?

    Thanks

    • This reply was modified 5 months, 1 week ago by  Richard-B.

    Yours is being stripped? Like when you go back in it’s not there?

    Ben

    It’s completely missing, it’s very odd

    Ok, want to make sure we are talking about the same thing, when you go to woocommerce > email customizer and add css into the css box, click save. Then leave and come back your css is gone?
    Ben

    Ah no sorry that is not whats happening, my CSS remains in the email customizer, however in the email that is sent out there is no CSS in the raw source. The customizers CSS is converted to inline CSS with no hover rules showing anywhere.

    Yes that is what woocommerce does for best compatibility with email clients it uses https://www.myintervals.com/emogrifier.php but for hover css it still adds it to the email in a style tag for the clients that support it. What email client are you trying to view in?

    Ben

    Thanks for the info, that’s really handy.
    Ok interestingly enough i’m viewing in Gmail – webmail

    Rich

    Reading through the documentation it looks like :hover is not supported and probably never will be.
    Is there a hook I can use to add a <style></style> of my own to the head of the email?

    Rich

    Hmm interesting, I tested your css through a demo site and it works for me, the hover css gets pulled into the head.

    I don’t believe there is a hook that would let you add style tags into the head tag. I think you would have to override templates.

    Ben

    Ok solved! I was on version 1.1.5, i’ve updated to the latest and it is working as you experienced in your tests.

    Thanks for the support!

Viewing 15 replies - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.