How to Change Button Color Storefront Theme

The Storefront theme is highly recommended when you want to start your WooCommerce. This is because this theme can be customized and it seamlessly integrates with the WooCommerce plugin. However, how can you change the color of the Add to Cart button in WooCommerce?

Table of Contents

If you are using the Storefront theme, it is easy to do this, as all you need to do is to click a few buttons in the WordPress customizer. Additionally, I will show you how you can change the color using a bit of CSS.

Storefront Theme Change Button Color

The Storefront theme is a free theme that already has all of the controls you will want to customize the button to your heart’s desire.

Moreover, it streamlines a clean design, maximizes versatile layouts, and still manages to hold on to that boldness that WooThemes is well known for. For a free theme, the features contained in it are rather excellent.

With all that said, let us look as to how you can change the button color in your Storefront theme.

Steps to Change the Button Color Using the Customizer

Log into your WordPress site and access the Dashboard as the admin user.
After that, go to Appearance > Customize and load the customizer.
In the customizer click on Buttons > Alternate button background color and set your color.
Click on publish if you are satisfied with the changes.

Steps to Change the Button Color Using CSS

In this section, I will change the button color using CSS. Here you will learn a bit of CSS. The code snippet should be placed in your theme’s style.css file. Additionally, you can add it to the Additional CSS section. If you use this method, you do not have a plugin to maintain and you do not have to get the CSS styles out of the database.

To style the add to cart button on the single product page, we need to identify the class that we need to style. Simply right-click on the area you want to change in a browser like Chrome or Firefox and click “Inspect Element”

After clicking on that, this will bring up the console containing the various elements of the page on the left and the settings for those elements on the right. Now you need to find the element responsible for the add to cart button on the single product page.

You need to do the same procedure to the add to cart button on the shop page. This means that we have to style the single_add_to_cart_button class and the add_to_cart_button class.

After identifying the CSS classes, follow these steps:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Customize.
Navigate down to Additional CSS in the left sidebar that appears.
Add the CSS rule as shown below:

.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;

}

This will be the outcome:

Click on publish once you are satisfied with the changes.

Conclusion

In this post, I have highlighted that the Storefront is WooTheme’s free theme designed specifically for WooCommerce. If you want to customize the color of the buttons in the Storefront theme, I have shared two different methods that you can use to achieve this. In the first solution, I have used the WordPress customizer, to customize all the buttons on your theme. The second method involves the use of CSS styling. However, the trick is just to identify the class that we need to style.

Editorial Staff

How to Change Button Color Storefront Theme

Storefront Theme Change Button Color

Steps to Change the Button Color Using the Customizer

Steps to Change the Button Color Using CSS

Conclusion

Similar Articles

Related