Woocommerce buttons border width & colors

I want to set the Woocommerce buttons settings to the below, but I am not able to set the border width and color for the buttons. Please check the below configuration:

[Shop] Background for buttons = #293542

[Shop] Text color scheme = Light

[Shop hover] Background on hover = #ffffff

[Shop hover] Text color scheme on hover = Dark

When I do the above configuration, there is no border width for the button (or it is white so it is not visible), I want to add border width 2 & its color to #293542.

How do I do that?

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.single_add_to_cart_button {
border: 2px solid green;
}

You can set the color accordingly.

Regard’s.
Xtemos Studio.

Yes, it worked.
I also want to do the same thing in the following buttons:

1. Return To Shop in the mini cart
2. Checkout button in the mini cart
3. Place order in the checkout page
4. Select options in the shop page

I also want to change the cart color to dark when i hover over the select options in the shop page.

Any advice on how to do it?

Hello,

You are Most Welcome.

a.button.checkout.wc-forward {
border: 2px solid red;
}

button#place_order {
border: 2px solid red;
}

a.button.wc-backward {
border: 2px solid red;
}

The select option button is added as the icon on your website and it is not displayed as a button. Please change the style to display as a button then tell me to check it myself and help you out accordingly

You can set the colors accordingly.

Regard’s.
Xtemos Studio.

[Author]

Posts