One of the questions I get asked all the time is, “how do I change the color of the Add to Cart button in WooCommerce?” And depending on what theme you have it could be as easy as clicking a few buttons in the WordPress customizer or if you're creating a theme from scratch you'll have to write a bit of CSS. I'll show you all of the options below.
Using Storefront, a Theme Designed for WooCommerce
Storefront is WooTheme's free theme designed specifically for WooCommerce. That means 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 have 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 color and set your color. Press Save & Publish and you're done.
Customize the Alternate button background color setting to change the Add to Cart button.
To change the Add to Cart button on the Shop page 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 there probably won't be a setting for it in the customizer. If that's the case you'll either have to use a plugin or write the CSS yourself.
Plugin
If you just want to get your store up and running using a plugin is a great way to get this done. WooCommerce Colors (free) adds extra controls to your theme's customizer. It won't work 100% with every theme out there but it should work with most of them. And it definitely works with the default themes like TwentySixteen & TwentyFifteen.
Write CSS
The last method is great if you know a bit of CSS and want to write the CSS for your theme and put it in your theme's style.css file. This way you don't have a plugin to maintain, and you 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 to cart button on the single product 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 class.
If you're overriding any existing styles you'll have to write highly specific selectors. I had to use the following to get the CSS rules to apply in TwentyTwelve.
Happy customizing the Add to Cart button! 🙂