How to Change the Style of the Add to Cart Button in WooCommerce

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.

Storefront Customizer screen

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! 🙂

8 thoughts on “How to Change the Style of the Add to Cart Button in WooCommerce

  1. Domenic Ortlieb

    I’m creating a child-theme for https://de.wordpress.org/themes/oblique/ and i discovered, that i can’t style the add_to_cart_button in the loop (the one in the single-product page is fully customizable) the way i want to style it.
    I can change a few things like the width/height – but it seems that everything else gets overwritten by the plugin.

    Do you have any suggestions how to change the add_to_cart_button by using a child theme?

  2. Hi, which CSS file contains the aforementioned code:

    .single-product .product .single_add_to_cart_button.button{
    background-color: #333333;
    color: #FFFFFF;

    ? I am trying to locate this however unsuccessfully.

    Thank you in advance
    Kamil

    • A bit late to answer, but it probably doesn’t exist in your theme yet. If you are using a child theme, add those lines to the chlid theme’s style.css.
      A lot of themes allow you to add custom css as part of their customizer settings.

  3. Nice…

    Thanks for the guide… It helped me change “Add to cart” text.

    I faced problem when I want to change text in all product type and in archieve page as well as single product page.

    I also used product bundle to sell extra free product. It created separate product type in woocommerce called “bundle”

    So other than adding code to function.php I also changed text “Add to text” in plugin file “class-wc-product-bundle.php” in includes folder.

    This way I could change text of “Add to cart” button everywhere and in all category products.

    Hope this solved issue of add to cart text change will help who want to change button text in product bundle.

    Thanks…

  4. Very helpful. Only need to insert the CSS 🙂

    Thanks

  5. I have this page simplystitchez.org

    I would like to find out about changing the select options and add to cart hover and text color without hover over because its not showing up. Can someone help me I believe this is css?

  6. Patrick, just want to say thanks for a great post. Tried to find a means to customise the Add to Basket button everywhere within WooCommerce plug in but never thought to use CSS. What a blindingly simple way to achieve button styling! Thanks.

  7. This was amazingly helpful, just what I needed.
    My WooCommerce was having some sort of bug, where “AJAX add-to-cart” on archive page would work, but regular add to cart would not add anything. So, I did a work around that made the single item page also AJAX. Well, the problem was that the Add To Cart button was then not a button, but just a link. Your post helped me adjust the CSS so it would once again look like a button.

Leave a Reply

Your email address will not be published. Required fields are marked *