skip to Main Content

Customising Woocommerce Button Color

Welcome to another Woocommerce tutorial on customising Woocommerce button color.

The buttons on your Woocommerce store are some of the most important elements and as such they need to be correctly designed and styled to convert visitors on your store.

Customising Woocommerce button color

There are a couple of ways you can customise your Woocommerce buttons, including the color, background color and hover color effects.

I am going to provide you with two simple methods for customising Woocommerce button color.

Using your theme customiser

If your theme is Woocommerce compatible it will come with a built in customiser section for Woocommerce.

This is a section of your Woocommerce customiser that the theme creators have included to allow you to easily make changes to your Woocommerce sections without touching any code.

For example, in Total theme, it looks like this.

Woocommerce button color

As you can see, there are several sections available within the Woocommerce tab to customise your online store.

Using custom CSS to change your button color

The second method of customising Woocommerce button color is to use custom CSS. Using this method, you will need to locate the classes of the buttons you wish to style then apply some simple CSS.

Follow these steps to style your buttons using CSS:

  1. Right click on the button you would like to style
  2. Click ‘Inspect’
  3. Copy the class shown in the browser console
  4. Write a line of CSS targeting this specific class
  5. Save the CSS in your Custom CSS tab, or use the Editor

Woocommerce button color

Woocommerce button color

Woocommerce button color

.woocommerce div.product div.summary .single_add_to_cart_button {
background-colour: #red;

As you can see from the screenshots above, I have located the specific class for my button then written a simple line of CSS to change the background color.

I can also change the color, size and weight of the text and apply hover effects, so that different styles apply when a user hovers over the button.

You may also like

How To Build A Website The Ultimate Guide

Setting Up Woocommerce Checkout

How To Process A Woocommerce Credit Card Payment

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email