Posted on

How to Customize & Replace WooCommerce Add to Cart Button?

Know the different ways to customize WooCommerce Add to Cart buttons using code and plugins and how to replace them with Buy Now buttons for better conversions.

WooCommerce add to cart button blog featured image

Last updated on March 5, 2024

Every e-commerce website today is about giving the customers flexibility to purchase desired goods at a click of a button. With WooCommerce, you can display Add to Cart buttons on product pages/product list pages or any other page without any effort.

These WooCommerce Add to Cart buttons are visually appealing and contributes greatly to the success of online stores as it directly affects sales.

In this blog, we will learn about setting up custom WooCommerce Add to Cart URLs/buttons, customizing Add to Cart buttons using code and plugins and replacing Add to Cart buttons with Buy Now buttons for direct checkout.

Let’s get started.

The default WooCommerce Add to Cart button/URL

WooCommerce add to cart button on shop page

The default WooCommerce Add to Cart button always appears on all single product pages except the external/ affiliate products that belong to other sources.

You can also see Add to Cart buttons under the products on the shop page where all products are displayed, category pages, tag pages, or any product filter pages.

The texts on the buttons may vary depending on the type of product. For example, there will be Buy Now button instead of Add to Cart for faster checkout (more about it later).

How to create a custom Add to Cart URL?

Here, you can simply replace the default URL for the button and the rest is taken care of. This method is useful when you want to place the add to cart buttons on custom landing pages, pricing tables, blog posts and others.

Let’s see how to create custom WooCommerce Add to Cart HTML links/buttons for simple and variable products.

Add to Cart URL for simple products

You can add simple products to the cart via a custom URL easily.

Go to WooCommerce > Products. Hover under the product title to locate the product id and use the following link:
https://yourdomain.com/?add-to-cart=X&quantity=Y.

Add to Cart product id for simple product

Obviously, replace the domain name and the product id with your own domain and desired product id respectively.

This will add a single product to the cart. To add the same product with more quantity, use this URL:
https://yourdomain.com/?add-to-cart=1168&quantity=5.

Add to cart and redirect to checkout

When a product is added to the cart, the best option is to redirect customers to the checkout page.

So, the URL, in this case, will be:
https://yourdomain.com/checkout/?add-to-cart=1168&quantity=1.

Remember, for this to work, you must tick the “Enable AJAX add to cart buttons on archives” option under WooCommerce > Settings > Products > General and also disable “Redirect to the cart page after successful addition”.

add to cart behaviour settings

Instead of checkout if you want to redirect users to other pages than the checkout page, the URL will be:
https://yourdomain.com/your_custom_page/?add-to-cart=1168&quantity=1.

Add to Cart URL for variable products

This is also very easy. Like simple products, you need to replace the product id with the product variation id.

Go to WooCommerce > Products. Select a variable product. Click on the Variations tab. You’ll find the product ids as shown. Once you have the ids, creating URLs is a walk in the park.

Add to cart id for product variations

To add a product variation with quantity one, the URL will be:
https://yourdomain.com/?add-to-cart=1089&quantity=1.

To add a product variation with quantity five, URL will be:
https://yourdomain.com/?add-to-cart=1089&quantity=5.

To add a product variation with quantity one to the cart and redirect to the checkout page, the URL will be:
https://yourdomain.com/checkout/?add-to-cart=1089&quantity=1.

To add a product variation with quantity one to the cart and redirect to any other page than the checkout page, the URL will be:
https://yourdomain.com/your_custom_page/?add-to-cart=1089&quantity=1.

Simple enough? Let’s move to the customizing Add to Cart button.

Why do you customize the default WooCommerce Add to Cart button?

Imagine visiting any WooCommerce store to purchase groceries and having to pay for each item individually. Wouldn’t it be inconvenient for you as a buyer to make the purchase? Further, initiating multiple transactions for the purchases is no doubt time-consuming.

This is where Add to Cart feature of WooCommerce proves to be a boon for online shoppers. Shoppers can choose the desired items and put them in the cart. Once all items are placed in the cart, the shoppers can move towards checkout. This constitutes towards a great customer experience.

The default settings can do the job. But based on the type of product and your product portfolio, customization is required. There’s no one size fits all approach.

Some store owners prefer to shorten the purchase process by skipping the Add to Cart step and navigating the clients directly to the checkout page. This method works especially well in the stores selling only one product, or in case the customers would like to purchase a single product in a multi-product store.

On the other hand, the Add to Cart button is extremely useful for stores that sell a lot of products. Visitors browse multiple products in the shop, keep on adding/removing products from the cart before proceeding to the checkout page.

So based on requirements, a customized button (text, color, icon, placement) based on your brand appearance will give better conversions.

How to customize Add to Cart buttons?

Sometimes, the default Add to Cart buttons may not look attractive on the website. You may want to match them with your brand color. Or the wrong placement may hamper conversions.

In such cases, WooCommerce offers excellent flexibility to customize the Add to Cart buttons at all levels. You can customize the buttons with minimal efforts.

We’ll look at some technical ways, plugins and alternate ways to customize these Add to Cart buttons. Technical ways can be little tricky. So to safely add code snippets, refer this doc.

Changing the WooCommerce Add to Cart button text

You can change WooCommerce add to cart button text to make it more engaging and appealing to the customers. Here are some button text ideas you can use for the purchase buttons:

  • Add to Bag
  • Add Item(s) to Cart
  • Add to My Shopping Cart
  • Add to My Shopping Bag

To change the default Add to Cart button text, you can follow the steps below:

  1. Go to WordPress Admin panel > Appearance > Theme Editor.
  2. Open Theme Functions / functions.php file.
  3. Add the following code at the bottom of the function.php file.
// To change add to cart text on single product page
add_filter( 'woocommerce_product_single_add_to_cart_text', 'storeapps_custom_single_add_to_cart_text' );
function storeapps_custom_single_add_to_cart_text() {
    return __( 'Add To Bag', 'woocommerce' );
}
// To change add to cart text on shop page
add_filter( 'woocommerce_product_add_to_cart_text', 'storeapps_custom_product_add_to_cart_text' );
function storeapps_custom_product_add_to_cart_text() {
    return __( 'Add To Bag', 'woocommerce' );
}

As you can see, this code is for single products and collection page. It will let you change the text to Add To Bag. However, you can turn it to any other custom texts you wish by replacing all of the “Add To Bag” phrases in the code with your desired texts.

Click the ‘Update File’ button to save the changes and go to the frontend to check how your WooCommerce Add to Cart button custom text is shown on your store.

customize add to cart button text

Changing the color of WooCommerce Add to Cart Button

The color of the add to cart button plays a major role in influencing the customers into buying products. Ensure that the button color matches the website’s color scheme.

Even though most WooCommerce themes offer default colors for all types of buttons throughout the website, you should make sure that they match your store’s design and change WooCommerce Add to Cart button color to make it stand out.

To change WooCommerce Add to Cart button color, you will need to add a CSS code snippet to your theme’s stylesheet (mostly known as the style.css file). You can access it by going to your WordPress Admin panel > Appearance > Customizer.

Then you are navigated to a new window with a list of options. Here, you can have three ways to change the color of Add to Cart button.

Change Add to Cart button color throughout your site

The first way is by navigating to the Buttons > Background Color section.

Here, you can change the background color and text color of your Add to Cart button. But with this option, you will change the color of all buttons on all pages.

Change Add to Cart button color differently in different pages

The second way is by navigating to the Shop Archive/Product Single. With the Shop Archive option, you can not only change the color background and text but also customize the position of the Add to Cart button displayed on WooCommerce shop archive pages.

On the single product page, you can also change the color of Add to Cart button’s background and text and the hover effect.

Change Add to Cart button color using CSS code

The third is the Additional CSS section to add custom code to change WooCommerce Add to Cart button color.

Copy the code below and paste it in the WordPress admin > Customizer > Additional CSS section or in the ‘style.css’ file and change the colors to the ones you want.

/* Add to cart button on single product page */
.single-product .product .single_add_to_cart_button.button {
    background-color: #0c7815;
    color: #FFFFFF;
}
/* Add to cart button on archives (e.g. shop, category page) */
.woocommerce .product .add_to_cart_button.button {
    background-color: #0c7815;
    color: #FFFFFF;
}

As you can see the image, we changed the Add to Cart button color from blue to green.

customized add to cart buton color

Placing Add to Cart buttons on website pages using shortcode

You can use a shortcode to display the Add to Cart buttons on any of the website pages without any hassles. For example, if you have written a blog about styling clothes, you can place this shortcode to create purchase buttons directly in the blog content.

WooCommerce comes with a built-in [add_to_cart] shortcode for you to insert the button for a particular product anywhere on your online store. You just need to add the ID and/or SKU of the product you want to display the Add to Cart button for.

add to cart button shortcode

In addition, you can include the product price: [add_to_cart id="12" sku="woo-vneck-tee" show_price="true"].

For simple products, it will show an add to cart button. But a Select options button will be shown for variable products.

select options for add to cart

Add text before/after the Add to Cart button on single product page

Another way to customize the Add to Cart button in WooCommerce is to add a text before or after the Add to Cart button on the single product pages.

Add text before the Add to Cart button

Normally, there will be a product short description above the Add to Cart button. However, you can mention a notice, a guarantee, free shipping, or a return policy, etc. before the Add to Cart option.

For example, you can add the text “Free Shipping“ by using the echo statement.

add_filter( 'woocommerce_loop_add_to_cart_link', 'storeapps_before_after_btn', 10, 3 );
add_action( 'woocommerce_before_add_to_cart_button', 'storeapps_before_add_to_cart_btn' );
function storeapp_before_add_to_cart_btn(){
     echo 'Free Shipping';
 }

Copy the code above and past it into the functions.php file of the file theme, then click Update File to save everything.

text before add to cart  button

Add text after the Add to Cart button

You can also add custom text after the Add to Cart button. This can be useful to notify clients that there might be discounts for bulk purchases. In the example below, I will include the text Contact us for bulk purchase under the Add to Cart button by adding this code snippet at the bottom of your child theme’s function.php file:

add_action( 'woocommerce_after_add_to_cart_button', 'storeapps_after_add_to_cart_btn' );
function content_after_addtocart_button_func() {
 // Echo content.
 echo '
(*Contact us for bulk purchase)
';
 }

Copy and paste this code to the file and then save it.

text after add to cart button

Customize Add to Cart button with icon

In addition to changing the text, you can replace the text with an icon or add icon next to the text of the button. This is possible using some plugins mentioned below.

These plugins also help you customize the buttons without code.

WooCommerce Add to Cart button plugins

Writing code is one way to create Add to Cart buttons. However, if you are someone who does not have any knowledge of coding, it is ideal to leverage ready-to-use plugins for customizing the buttons. Here are the two most widely used plugins.

Ultimate Custom Add To Cart Button For WooCommerce

This plugin offers additional customizations to design a button that will surely catch the attention of customers.

Features:

  • Customize the button text for simple products, variable products, and grouped products
  • Customize the button’s background colour
  • Setting colour when customer hovers over the button
  • Customizing the color, size, and border radius of the button
  • Adding cart icons on the button
  • Setting gradient as background when customer hovers over the button
  • Using images as the button
  • Customizing the item quantity box with add and subtract icons
  • Creating own button styles throughout the website
  • This plugin is also compatible with all the WordPress themes.

Some of the features are available only in the Pro version.

Download now

WooCommerce Custom Add To Cart Button

As the name suggests, this plugin can be used to customize the Add to Cart buttons to make them more appealing to the customers.

Features:

  • Customize the text on the add to cart button.
  • Place icon next to the text in the button.
  • Display the cart icon instead of entire text.
  • Compatible with most WordPress themes.

Download now

How to replace Add to Cart with Buy Now buttons?

Replacing Add to Cart button with Buy Now button allows customers to skip the lengthy buying process and checkout at the click of a button. This contributes greatly towards improving the user experience.

Cashier by StoreApps can help you create a Buy Now button in just a few clicks.

Cashier buy now button

It is an excellent plugin for optimizing the WooCommerce checkout process. You can customize the eCommerce store for:

  • Direct checkout with the help of quick buy now buttons (Skip cart and jump to checkout).
  • One-click checkout via quick buy now buttons (No cart, checkout, payment screens).
  • One page checkouts with all information about orders, payments, and shipping on one page.

In addition to this, this plugin also enables you to activate side cart panel that displays all the products present in the cart without having to visit the cart page.

Further, you can also nudge the customers to buy more products with the help of cart notice feature and product recommendations.

The Cashier plugin is also compatible with WooCommerce Subscriptions.

Get Cashier plugin

Conclusion

Optimizing Add to Cart buttons certainly has a significant role to play in enhancing the shopping experience.

With the code and plugins mentioned here, you can easily customize your WooCommerce Add to Cart buttons as per requirements and boost your conversions.

I hope you found this blog useful. Any questions or suggestions, share them via the comments box.

FAQs

How do I add quantity to cart in WooCommerce?
This involves some code. Refer to this blog

What are WooCommerce shortcodes?
As the name suggests, WooCommerce shortcodes are a series of short lines of code that lets you add WooCommerce-related functionality to WordPress pages, posts, and sidebars. Here’s a simple guide on WooCommerce shortcodes.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.