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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .single-product .product .single_add_to_cart_button.button{ | |
| background-color: #333333; | |
| color: #FFFFFF; | |
| } | |
| .woocommerce .product .add_to_cart_button.button{ | |
| background-color: #333333; | |
| color: #FFFFFF; | |
| } |
Happy customizing the Add to Cart button! 🙂
I’m creating a child-theme for 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?
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.
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…
I have the same problem. How did you access the text of the button?
Very helpful. Only need to insert the CSS 🙂
Thanks
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?
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.
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.
Hi, Thank you for this.
How do you adjust the colors on hover?
Thanks dude, css worked like a charm.
Also I added a hover part:
.woocommerce .product .add_to_cart_button.button:hover{
color: #FFFFFF;
}
Hi
Is it possible to have two different colour buttons on the shop page.
Id like to have a green button for add to cart and a red button for read more (out of stock items)
Thanks
@Mehul. I have the same problem. How do I change the text of the button?
This is about half of what I was looking for, so thanks for answering these questions, but can you also stylize the checkout pages and messages? I’m not sure if there is a plugin that would help with that as well of if that all needs to be done by editing the core files of the plugin.
Very helpful article. I’m trying to remove the ugly and pointless “Sort” dropdown which appears near every Add to Cart button. We don’t have many products and don’t need that bit of furniture. Is it possible to remove it using CSS or by editing the code somehow?
Thanks, fixed it for me, although I had to add .alt to both:
.single-product .product .single_add_to_cart_button.button.alt{
background-color: #00b12d;
color: #FFFFFF;
}
.woocommerce .product .add_to_cart_button.button.alt{
background-color: #00b12d;
color: #FFFFFF;
}
Hi do you know what the CSS would be to change the Select Options button? I have changed the Add to Cart button text but cannot get the code right for the Options button or the text above it with the price, shipping and tax. Thanks in advance for your help.
Thanks for your useful guide. I prefer the plugin option since it is easier to use. 🙂
Nice tutorial. thanks for your hard work
Thanks, this helped a lot. Which CSS will be used for the Shop Page “Add to Cart” Button?