Ane of the questions I go asked all the time is, "how do I change the color of the Add together to Cart button in WooCommerce?" And depending on what theme you take information technology could be as easy as clicking a few buttons in the WordPress customizer or if y'all're creating a theme from scratch you'll have to write a fleck of CSS. I'll evidence you all of the options below.

Using Storefront, a Theme Designed for WooCommerce

Storefront is WooTheme's free theme designed specifically for WooCommerce. That ways that it already has all of the controls you'll want in order to customize the button to your heart's desire.

To customize the add to cart button you just accept to open the WordPress customizer. In the WordPress admin go to Appearance -> Customize and load the customizer. Then in the customizer click on Buttons -> Alternate button background colour and prepare your color. Press Save & Publish and y'all're done.

Storefront Customizer screen

Customize the Alternate button groundwork colour setting to change the Add to Cart button.

To change the Add to Cart push on the Shop folio you should do the above and customize the Background color setting under Buttons.

Using a Regular Theme

If you're using a theme that isn't designed for WooCommerce in that location probably won't be a setting for it in the customizer. If that's the case you'll either have to apply a plugin or write the CSS yourself.

Plugin

If yous just want to get your store up and running using a plugin is a great mode to get this washed. WooCommerce Colors (free) adds actress controls to your theme's customizer. Information technology won't work 100% with every theme out at that place but it should work with most of them. And it definitely works with the default themes like TwentySixteen & TwentyFifteen.

Write CSS

The final method is swell if you know a bit of CSS and desire to write the CSS for your theme and put it in your theme's style.css file. This way y'all don't have a plugin to maintain, and yous don't have to get the CSS styles out of the database (which is where the plugin stores the CSS values).

To style the add together to cart button on the single production page you'll want to use the single_add_to_cart_button class. And for the add to cart button on the shop page you'll want to use the add_to_cart_button course.

If you're overriding any existing styles you'll have to write highly specific selectors. I had to use the following to go the CSS rules to employ in TwentyTwelve.

.single-product .product .single_add_to_cart_button.button{
background-color : #333333;
color : #FFFFFF;
}
.woocommerce .product .add_to_cart_button.button{
groundwork-color : #333333;
colour : #FFFFFF;
}

Happy customizing the Add together to Cart button! 🙂