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 :
Accessing this section takes you to an interface with a text box where you can enter custom CSS code.
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).
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.
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.
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.
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.
- 50 WooCommerce plugins to improve your online shop
- 9 WordPress plugins to create an affiliate program
- 9 WooCommerce plugins to enhance the attributes of your variable products
- 5 WordPress plugins to visually edit CSS on your blog
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.
...
Hello,
Can this same plugin help me change the color of the "customer reviews" stars on woocommerce product pages? thanks in advance
Hello Beata,
I have never tried and I very much doubt it is possible.
Hello, and how to increase the size of the button Add to cart? Thank you
Hello,
You must use CSS code for this. Otherwise, I recommend the Yellow Pencil plugin that you can download on Codecanyon.
Well, it's fantastic to translate a piece of code from English to Italian. CSS is full of errors! But can we do it ?!
Sorry
Good evening, I have a question. How do we change the color of the price in the subcategories in WooCommerce ???
Thank you already for your answer.
Nico
Hello Nico,
Many premium themes offer this possibility, otherwise you can use CSS to customize it.
cordially