To change the color of WooCommerce buttons, We need to change or replace the default style.css file of buttons. To do this, we will need to add a custom CSS code to our child's WordPress theme.

There are two ways to do this:

  • Add a custom CSS to the child theme style.css file
  • Use some plugins to inject custom CSS code into your web pages.

Step 1: Install the plugin on WordPress Simple Custom CSS and activate it

We will use a WordPress Plugin to inject the CSS code to the pages of a WooCommerce Online Shop. You can download the plugin: Simple Custom CSS

You can read our tutorial on installation and activation of WordPress plugin.

After activating the plugin, a new sub-menu will be added to the menu Appearence :

Custom CSS Menu WordPress plugin

Accessing this section takes you to an interface with a text box where you can enter custom CSS code.

Interface WordPress plugin Simple Custom CSS

Put the following CSS in the text box and then click on " Update Custom CSS"

.woocommerce #content input.button.alt: hover, .woocommerce #respond input # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-page #content input.button.alt: hover, .woocommerce-page input #respond # submit.alt: hover, .woocommerce-page a.button.alt: hover, .woocommerce-page button. Button.alt: hover, .woocommerce-page input.button.alt: hover {background: red! Important; Background-color: red! Color: white! Important; Text-shadow: transparent! Important; Box-shadow: none; Border-color: #ca0606! Important; } .woocommerce #content input.button: hover, .woocommerce #respond # submit input: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-page # happy input.button: hover, .woocommerce-page input #respond # submit: hover, .woocommerce-page a.button: hover, .woocommerce-page button.button: hover, .woocommerce-page input.button: hover {background : Red! Important; Background-color: red! Color: white! Important; Text-shadow: transparent! Important; Box-shadow: none; Border-color: #ca0606! Important; } .woocommerce #content input.button, .woocommerce #respond input # submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page # sponds input # submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {background: red significant; Color: white! Important; Text-shadow: transparent! Important; Border-color: #ca0606! Important; } .woocommerce #content input.button.alt: hover, .woocommerce # match input # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button Hover, .woocommerce-page #content input.button.alt: hover, .woocommerce-page # match input # submit.alt: hover, .woocommerce-page a.button.alt: hover, .woocommerce-page button .button.alt: hover, .woocommerce-page input.button.alt: hover {background: red! Important; Box-shadow: none; Text-shadow: transparent! Important; Color: white! Important; Border-color: #ca0606! Important; }

You can now access your online store, you will notice that the buttons have actually changed colors.

To customize the color of the buttons to finally have the look you want,

Replace property " backgroud: red important! " by one Color of your choice. Update the codes and access your online store again. In fact, using the styling we have just provided you, you will be able to completely change the structure of the buttons.

With a little research, you'll be able to create unique buttons with a style that matches your WordPress theme (especially if the latter is not compatible with WooCommerce).

add to cart button WordPress

For the following example, you can use the following CSS code.

.woocommerce #content input.button, .woocommerce # match input # submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page # match Input # submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {background-color: #6fba26; padding: 10px; position: relative; Font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; color: #fff; Background-image: linear-gradient (bottom, rgb (100,170,30) 0%, rgb (129,212,51) 100%); Box-shadow: inset 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; Border-radius: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce # match input # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button Hover, .woocommerce-page #content input.button.alt: hover, .woocommerce-page # match input # submit.alt: hover, .woocommerce-page a.button.alt: hover, .woocommerce-page button .button.alt: hover, .woocommerce-page input.button.alt: hover {top: 7px; Background-image: linear-gradient (bottom, rgb (100,170,30) 100%, rgb (129,212,51) 0%); Box-shadow: inset 0px 1px 0px #0D496F, inset 0px -1px 0px #0D496F; Color: #156785; Text-shadow: 0px 1px 1px rgba (255,255,255,0.3); Background: rgb (44,160,202); }

For those who wish to optimize the performance of their online store whether in terms of conversion or sale of products,

We also offer 3 premium WordPress plugins designed for this task.

1. WooCommerce Recover Abandoned Cart

Your customers often fill their baskets and leave them: thanks to WooCommerce Recover Abandoned Cart you will be able to contact them, remind them of what they have purchased and invite them to complete their actions.

Recover abandoned cart for woocommerce

Set the time interval between when a cart is abandoned and when a personalized reminder email is sent to your customer containing a direct link to the purchases page for them to see what they were on point to buy.

Download | Demo | Web hosting

2. WooCommerce Hide Price & Add to Cart Button Plugin

The WooCommerce Hide Prices plugin allows merchants to create multiple rules to hide prices or hide the “add to cart” button from non-logged in customers or users who have certain access rights to your e-commerce website.

Woocommerce hide price add to cart button plugin hide by user roles

You can hide the price and the "add to cart" button on certain products or in specific categories. You can replace them with custom text or a button that will take them to the  Contact form. You can create as many rules that will automatically hide the price and the " Add to panier ”depending on what you want.

Download | Demo | Web hosting

3. WooCommerce Currency Switcher

This plugin allows you to switch product prices from one currency to another in real time.Woocommerce currency switcher

This is particularly important in e-Commerce, as it is aimed at the whole world. This plugin ensures that no matter where your customers are located, they will always be able to order from your online store.

Download | Demo | Web hosting

Recommended Resources

Discover other recommended resources that will help you optimize the performance of your online store. 

Conclusion

Here is ! That's all for this tutorial dedicated to button customization Add to Basket from WooCommerce. Do not hesitate to share it with your friends on your Social Media preferred. 

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...