Strange WooCommerce bug: changing buttons bg color

[FlawlessWeb]

Hey,

This is an odd bug that I haven’t been able to figure out.

I have all my buttons setup like this:

background-color: #1e73be;
color: white;

Generally speaking that works fine throughout the site except in one odd scenario.

When you are on any WooCommerce page, the background color of the top bar newsletter subscribe button and the header contact form dropdown submit button changes to a generic grey background color. This is very strange for two reasons:

1. On any non WooCommerce page, the buttons display fine using the #1e73be background color as I have set.
2. If you inspect the buttons on a WooCommerce page, it still says the background color is #1e73be even though it obviously is not.

Screenshots and links in next post.

Thanks.

[FlawlessWeb]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

I can’t view that page, your site is in maintenance mode. I will need a login

– Kyle

[FlawlessWeb]

This reply has been marked as private.

[Kyle – SUPPORT]

The button’s fine for me? (see screenshot)

– Kyle

Attachments:

You must be logged in to view attached files.

[FlawlessWeb]

Hey,

Did you look at my screenshots? – those buttons are not the issue.

[Kyle – SUPPORT]

I’m struggling to work this one out, it shows it being overwritten in firebug, even with !important, but for some reason it’s not working. I will have to forward this one to the developer to look at

– Kyle

[FlawlessWeb]

Yea its a very odd one. Trying to figure it out for a while now with no luck.

[Rui Guerreiro – SUPPORT]

It’s the styles from woocommerce.css that are over the normal style.
Add this custom css.

#mc-embedded-subscribe{
background-image: none!important;
text-shadow: none!important;
}

-Rui

[Rui Guerreiro – SUPPORT]

Realized that was missing the over style.
Replace my previous code by this one.

#mc-embedded-subscribe{
background-image: none!important;
text-shadow: none!important;
}

#mc-embedded-subscribe:hover{
background: #2e2e36!important;
border-color: #ffffff!important;
color: #ffffff!important;
}

-Rui

[FlawlessWeb]

Thanks,

That did the trick.

[Rui Guerreiro – SUPPORT]

Great.
-Rui