Search code examples
cssbuttonwoocommercetextrollover

Change Colour Of Rollover Text On "Continue Shopping" WooCommerce Button

Thank you for taking the time to read this. I have tried every single CSS code under the sun to try change the rollover text on a woocommerce button "Continue Shopping" to white when the button is hovered (currently grey background and black text when hovered). Wordpress with Woocommerce setup.

https://www.charliecustards.co.uk/product/the-charlie-new-orleans-black-on-black-brogue-boot-in-calf-leather-suede/

To see real time simply add the shoe to the basket and you will see the "continue shopping button" on the next screen which I just can't get the rollover text correct on! Also see screenshots.

I tried everything to get hold of the button in the css and simply change it, but nothing would work. This was the last code i tried and don't understand why it won't work?!

a.button.wc-forward:hover {color: #ffffff !important;}

More annoyingly if I put a background colour change on the hover to test I have the right selection that does work and on hover the button turns red! So not sure why the background will change but the text wont?

a.button.wc-forward:hover {color: #ffffff !important;
background-color: red !important;}

So with this code the "continue shopping" button background changes to red but the text does still not change to white?

Help on this would be so appreciated, its driving me mad.I've tried every div, selector etc associated with the button and nothing will work. The code above was one of many but I think the closest due to the fact it will change the background colour on hover but not the text colour.

Thank you so much.

button before rollover

button on rollover, text not changing to white

Solution

  • I can't answer specifically in the context of WooCommerce but the current CSS applying that style is:

    .woocommerce-page .woocommerce-message a.button.wc-forward:hover {
    color: #000000 !important;
}

    So you can attempt to copy this.

    There's a fairly nasty trick for increasing specificity of "identical" selectors by just duplicating a class name, so if you still find the above is getting overwritten try using

    .woocommerce-page .woocommerce-message a.button.button.wc-forward:hover {
    color: #000000 !important;
}

    I'd recommend commenting this as it looks like a mistake to most people.