Docs

[James H]

Hello

I am setting up a store on an existing site where the global button colours do not work on the woocommerce shop and product pages. I have searched the forum but can only find CSS for changing the buttons that does not include hover color changes. Could you provide me with the CSS required to change the button color including the hover color changes. I have used:

product .x-btn, .product .button, .product [type=”submit”] {
color: #fff;
border-color: gray;
background-color: gray;
box-shadow: 0 0.25em 0 0 #5C5C5C,0 4px 9px rgba(0,0,0,0.75);
}

but I get a static button that does not change upon hover to give a cue that you can select the button.

Jim

[James H]

One more thing, I need the CSS for Cart page and the Checkout Page. Essentially, I want to change all of the button colors in Woocommerce.

Thanks

Jim

[Prasant Rai]

Hello Jim,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.shop .x-btn, .button, [type="submit"] {
    color: #000 !important;
    background-color: #ddd !important;
    border-color: #ddd !important;
    box-shadow: 0 0.25em 0 0 rgba(167, 16, 2, 0.58),0 4px 9px rgba(0,0,0,0.75);
}

Let us know how it goes.

Thanks.

[James H]

Thank you for the prompt response – this is a significant improvement. It has changed all of the buttons but they do not respond to hover. If possible, I want them to change to different border, text and background colors on hover to indicate that they are active, available and working.

Jim

[Paul R]

Hi Jim,

You can add this under Custom > Edit Global CSS in the Customizer.

.shop .x-btn:hover, .button:hover, [type="submit"]:hover {
    color: #000 !important;
    background-color: #ddd !important;
    border-color: #ddd !important;
    box-shadow: 0 0.25em 0 0 rgba(167, 16, 2, 0.58),0 4px 9px rgba(0,0,0,0.75);
}

Please change the colors.

Thanks

[James H]

Thanks. That was precisely what I was looking for. Great support.

Jim

[Jade]

You’re most welcome Jim.

[Author]

Posts