Skip to Main Content

How to customize the WooCommerce "Add to Cart" button

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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 are going to use a WordPress plugin to inject CSS code into 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" page (in French).

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

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 will 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

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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 personalized text or with a button that will take them to the contact form. You can create as many rules that will automatically hide the price and the button " 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. 

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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

... 

This article features 8 comments

  1. Hello,
    Can this same plugin help me change the color of the "customer reviews" stars on woocommerce product pages? thanks in advance

    1. Hello,

      You must use CSS code for this. Otherwise, I recommend the Yellow Pencil plugin that you can download on Codecanyon.

  2. Well, it's fantastic to translate a piece of code from English to Italian. CSS is full of errors! But can we do it ?!

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

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
3 shares
Share3
tweet
Save