WooCommerce 2.05 cart button colours not working on IE8/9

Please not double post about the same issues. I’ll mark this one as ‘resolved’ and continue to help out the second topic you’ve started about this issue.

Thanks for your reply Coen.

This post may not actually be related to using the BuddyPress Default theme. Instead, I think it may be a more general problem with the way WoooCommerce handles the css for IE6-9 buttons. It is still not resolved and I have remarked it as such. I hope you can help with this. (I will now clarify the other post further so it doesn’t overlap with this one.)

So, to recap this problem for everyone….

WooCommerce 2.05 “Add to Cart”, “Proceed to Checkout” & “Place Order” button text/background colours are not working on IE8/9, making some button text unreadable. All seems to work OK on Chrome and Firefox.

See buttons on https://shinfin.com/leg-fins-flippers-buy/shinfin/leg-fins-with-straps-pair/ and subsequent shopping pages.

I’m using WP3.5.1 and have now upgraded to BuddyPress 1.7 with BuddyPress Default Theme, and this problem still remains.

Has anyone else seen this problem? Has anyone got a fix to this problem?

@sydneydesigner it might be the way our gradient mixin is setup but tbh I’d have thought someone else would have mentioned this before now…

Could you just try activating TwentyTwelve to check it’s definitely not a theme compatibility issue?

Thanks for your reply @jameskoster.

BTW I just upgraded to WooCommerce 2.06 and the problem seems the same.

I think you are right – it seems to be something to do with the background colours/gradients inside the WooCommerce buttons specifically for IE8-9 (I haven’t tried IE6-7).

If I set the WooCommerce>admin>general>styles>Primary to #ffffff (black) then I get black button text against a light grey gradient background in all browsers including IE6-9 (which at least is visible if not very attracting to the eye).

However, if I set the Primary to any other colour then it works in every other browser, but in IE the text reverts to white and the background colour is only faintly visible right on the border of the button so the inside of the button is still the light grey gradient (against which the light button text is hardly visible).

Switching the theme away from BuddyPress Default Theme 1.7 to TwentyTwelve does seem to make the Primary work in IE too. So there seems to be some sort of conflict between the WooCommerce CSS and BuddyPress Default Theme 1.7 . I hope that doesn’t just mean you wash your hands of it and say it is a BuddyPress issue ?? because that is not necessarily the case. It could be something that WooCommerce is doing with IE button colours/gradients that is perhaps a bit unusual as you say. Maybe there is a “grey” area in the code (joke…couldn’t resist!)

Anyway, I’d be really grateful to receive a code fix please, as I am a bit out of my league on this.

Many thanks.