How to Change WooCommerce Button Color

User satisfaction with your website can be significantly affected by your choice of color scheme. Customers’ purchase choices and other crucial activities can be influenced by the design of seemingly inconsequential features, such as buttons. Knowing how to alter the WooCommerce button colors is so essential.

The good news is that you can do this in a number of fast and straightforward ways. Several considerations, like the WooCommerce theme you’re using, your familiarity with coding, and your willingness to install a new plugin, will determine which choice is ideal for you.

Today we’ll show to how to change WooCommerce button color in the easiest ways. So, without further ado, let’s get started, shall we?

How to Change WooCommerce Button Color from Theme Settings

Using the built-in options provided by your theme is one of the fastest and simplest methods to alter the color of your WooCommerce buttons. To illustrate this, we’ll use WooCommerce’s default and most simple theme, Storefront.

It’s OK if you’re not using Storefront. Many free and premium WooCommerce themes are available, all of which perform similarly. It’s essential to keep in mind, however, that each theme has its own structure and collection of choices, so some may provide more room for tweaking than others.

Steps to Change WooCommerce Button Color

With the pre-loaded Storefront theme, you can immediately begin customizing the button colors.

Selecting Customize from Dashboard
Selecting Customize from Dashboard

To do so, navigate to Appearance → Customize  Buttons.

Selecting Buttons from Theme Customization
Selecting Buttons from Theme Customization

You’ll see the following customization options for your buttons:

  • Background color
  •  Text Color
  •  Alternate button background color
  •  Alternate button text color
Changing Colors of WooCommerce Buttons
Changing Colors of WooCommerce Buttons

You can click the select color button to open a hex editor and change the color of your button. Also, you can change the button hover color from here. And in case you want to get back to the default color, there’s also a default button to do so.

However, as we’ve already stated, not all themes will come equipped with these options for customization. So, you’ll have to insert some CSS code manually. Nevertheless, if you aren’t using Storefront or another theme with the appropriate customization options, don’t want to install a new plugin, and are confident in your coding abilities, this can be a viable alternative. 

Step 1: Inspect Elements

To start, go to the front end of your website, find the “Add to Cart” button (or whatever button you want to change), right-click on it, and choose “Inspect.”

Inspecting Buttons
Inspecting Buttons

Step 2: Find and Copy HTML Code

If you are using the Chrome browser, this will open DevTools, where you can find the HTML and CSS code for that button. Find the button’s class and copy it. 

Developer Console
Developer Console

Step 3: Choose Colors

To make the button the color you want, you need the hex code for that color.

Check the right part of the dev console. There will be a line “background-color: #81d742”. Click on the color box and you’ll see a list of colors so you can choose one for your button.

Move the color picker and the slider to the color you want. Copy the Hex number once you’ve decided.

Picking Colors
Picking Colors

Step 4: Writing Codes

Now we know both the class of the button and the color code we want. So, it’s time to put the new CSS rules into effect.

Sign in to WordPress and go to Appearance → Customize → Additional CSS in your dashboard. When you click the tab, a writing panel will show up.

Code: 

button.single_add_to_cart_button.button.alt {
    background-color: #81d742;
}

Now, paste the code you just copied into the editor. Then, replace the Color Hex with the code you copied from Google Color Picker for the color you want.

When you’re done, click “Publish.” And you have successfully changed the WooCommerce button color.

Writing Codes in Additional CSS
Writing Codes in Additional CSS

Also, there’s a third way to change the WooCommerce button color. You need to get a plugin and use its settings to do so. But let’s keep that for another day.

We also have other tutorials for beginners. Do Check them Out:
How to Install WordPress Themes and Plugins
How to Start a WordPress Blog With Zero Experience
WordPress SEO: Things You Should Know!

How to Install WordPress on localhost: An Easy Guide!

Conclusion

To sum up, we have given a proper solution and let you know how to change WooCommerce button color in the easiest way. You can increase WooStore functionality and attract more buyers in this way. Don’t be shy about using the abovementioned measures to draw attention to your shop and its offerings. We really wish you’d find it helpful and share it with others.

Best Wishes!

Editorial Staff
Editorial Staff

Editorial Staff at wplearners is a team of WordPress experts. Trusted by WordPress readers worldwide.

Leave a Reply