How To Change Add To Cart Button Styles In WooCoommerce With Free Plugin

The WooCommerce add to cart buttons are often designed by the theme developer. Sometimes, the default button styles provided by the theme doesn’t suit your need. That’s when you need to do something to change the add to cart button styles. But how?

Customize your add to cart button using plugin

We are going to use a plugin called Ultimate Custom Add To Cart Button to customize the buttons on your WooCommerce store. This is the plugin I develop so I would love to have your feedback. The plugin is free to use and there is a pro version available here which has additional cool features (Which also has a $20 discount at this time).

Now, we are going to learn how to customize the add to cart button for your site.

Change the add to cart text

I have covered how to change the add to cart, read more, view products… text on the buttons in this post. You can have  a look at that for more details.

Add shopping cart icon to the button

We are going to add the cart icon to the add to cart button. As you can see now, my buttons don’t have any icon.

add to cart button without an icon

Now, we go to Ultimate ATC Button to add a cart icon to that.

I’m going to use a shopping cart icon. So, I enter the text shopping and you can see that, the list of suggestions shows:

I select the last option, fa-shopping-cart and scroll down to the bottom then click on save changes.

Now, if I reload the product page, I will see the cart icon in the button:

add to cart button with shopping cart

Change button’s background color and text color

With this plugin, you can easily change the background color of the button too.

change add to cart button background color

The options are straightforward. You can pick whatever color you want for the button’s background. For example, I’m going to use the blue color for the button:

select color for the button

Now, I click on save changes and view the results:

view button color changed

As you can see, the text color doesn’t work really well with this background. You can change that too with the text color option in the plugin:

 

 

 

change add to cart button’s text color

If I reload the product page, I can see the text color has changed:

button text color has changed

If you are using the pro version, you can change the background to use a gradient or an image too.

Change button’s padding and margin

The last section in the plugin allows you to customize the add to cart button’s padding and margin. You can enter your desired values here (in px) to adjust the button’s style. For example, I set the margin and padding for the button to 20px as in the image below:

change add to cart button padding and margin woocommerce

Now, if I view the product page, the button has changed accordingly:

add to cart button changed padding and margin

In addition to let you change button’s styles, you can do the following in the pro version:

  • Set an image as the buttons’ background. That means you can use an image to replace your add to cart button
  • Remove the up and down arrows in the quantity input box
  • Completely change the style of the input box (add plus and minus buttons to increase and decrease order’s quantity)

Click here to find out more about Ultimate ATC Buttons PRO

Change the add to cart button’s styles with CSS

As the time I write this post, almost all themes support a section called Additional CSS (You can access this panel by clicking on Appearance->Customize). This is the place you can add additional CSS to your site. If you know CSS and confident in your CSS skills, it’s not a big problem to add background color, hover color or even gradient on the background. The important thing is to get the selector of the button. The trick is to use the inspection tool of your browser.

Let me show you how:

As you can see, if you know a bit of front end web development, this is the easiest way.

 

However, not all people can do that. I would recommend you use my plugin above to achieve the designs much quicker and easier.

Conclusion

As you can see, there are quite many options for you to change to tweak the styles of the button. If there are settings you need that aren’t available in the plugin, please let me know and I’ll add that to the plugin.

How To Change Add To Cart, View Products, Select Options Button Text In WooCommerce

WooCommerce provides default text for their add to cart buttons. Here are the default text for all types of products in WooCommerce:

  1. Simple product – add to cart
  2. Variable product – select options
  3. Grouped product – View products

While those default text make sense, you often want to change it to something more attractive to boost your sales.

If you know PHP, you can easily change the text as you like. You can stop reading the post now. However, if you don’t know how to edit the WooCommerce functions, this post is for you.

Good news is, we are not going to mess with WooCommerce code today. That’s too risky. We are going to use a plugin that I created specifically for this purpose.

Let’s download the ultimate add to cart button customizer for WooCommerce plugin here

Now, we are going to change the WooCommerce button text for each case:

How to change add to cart text for simple product

Now, I assume that you have installed the plugin and activated it. If you click on Ultimate ATC Button->Configure buttons link on the left, you’ll see this interface:

ultimate add to cart configure buttons
ultimate add to cart configure buttons

Now you can see that at the top left section, there are three text boxes. If you want to change the add to cart text on simple products, simply add your desired text in the first box. For example, I’ll use the text “buy now”.

Make sure you scroll down and click on save changes.

Now, if I view the shop page or the product page of a simple product, I’ll see “Buy Now” instead of the default Add To Cart.

It’s simple, isn’t it?

Well, now you can guess how we can change the text for variable and grouped products.

How to change “select options”, “view products” on variable and grouped products

At this point, you will not need more hand-holding. I’ll change the text for variable and grouped products as below:

After clicking on save changes, I see the following results:

Conclusion

As you can see, changing the button text for your WooCommerce product can be very easy using the plugin. I hope you enjoy it. The plugin has a tons more options for you to fully customize your buttons.