Since you’re seeking ways regarding how to add buy now button in WooCommerce, you might want to optimize your store’s experience. You want to remove the traditional purchasing steps that customers encounter after clicking the add to cart button.
You plan to do all these things to improve customer experience and boost sales. Well, we want to be a part of your journey and will walk you through two methods to add a buy now button to your WordPress store in this article.
Also, we’ll talk about the difference between an add to cart button and a buy now button and why you need to add a buy now button. Therefore, let’s read without wasting any more time.
What is the Difference Between Add to Cart and Buy It Now?
Many people consider the “add-to-cart” and “buy now” buttons to be the same, but they are distinctly different. For your information, the “add-to-cart” button requires customers to follow additional steps.
For example, after hitting the “add-to-cart” button, you need to visit the cart page, and then you need to click the “Proceed to Checkout” button to visit the checkout page, and finally, you can place an order – pretty lengthy steps!
In contrast, the “buy now” button will directly send you to the checkout page. That means you don’t have to visit the cart page – one step reduced in your buying journey. As a result, you can quickly complete the purchase.
So, that’s the primary difference between “add-to-cart” and “buy now” buttons.
Why Do You Need to Add a Buy Now Button?
A “buy now” button can help you reduce your cart abandonment rate. How? Well, it reduces one step that customers usually follow during purchasing a product online.
As you know, every step in the buying journey is an opportunity for potential customers to change their minds and leave your store. Therefore, the more steps you reduce in their buying journey, the more sales you might make.
When you add a “buy now” button to your store, you send customers directly to the checkout page, giving them less time to change their minds and abandon their carts.
Besides, by including a “buy now” button, you attract impulse shoppers and increase your overall revenue. A “buy now” button speeds up the buying process and makes the buyer’s journey easy. Therefore, this button helps you create a positive impression among customers and make them keep returning to your store.
We believe you now understand the importance of a “buy now” button and will add this button to your store. Keep reading to learn how you can include this button in your store.
👉 Helpful Post: How to Make Ecommerce Website in WordPress
How to Add Buy Now Button in WooCommerce Without Plugin (Method 1)
We’ll now walk you through the steps to add a buy now button in your WordPress store. Remember, this method is ideal for people with technical knowledge. You can read the Method 2 section if you seek an easy way to add a buy now button to your store. Let’s get going.
N:B: This method requires you to know HTML, PHP, Javascript, and CSS. Plus, you need to know how to take a full backup of your site and how to create a child theme on WordPress before proceeding with this method.
Step 1 – Navigate to Your Child Theme’s functions.php File
We need to insert a code snippet into our child theme’s “functions.php” file. Why a child theme? Why not the parent/main theme? We are doing this so that we don’t lose the code snippet (we are about to insert) when the parent/main theme gets updated.
Caution: Take an entire site backup and create a child theme if your theme doesn’t come with a child theme before moving further.
Now, let’s head to our child theme’s “functions.php” file. To do so, we’ll go to WP Admin Panel > Tools > Theme File Editor if you use a block theme.
Otherwise, head to WP Admin Panel > Appearance > Theme File Editor.
Afterward, click “functions.php” file on the right-hand side of the “Theme File Editor”.
Step 2 – Insert a Buy Now Button Code Snippet
Right now, you need to insert a code snippet, shared below, at the end of the “functions.php” box. So, scroll down to the end and insert the code snippet below.
// Buy Now button WooCommerce code by RadiusTheme
function add_buy_now_button() {
global $product;
if (!$product) return;
$product_id = $product->get_id();
$checkout_url = wc_get_checkout_url();
$buy_now_url = esc_url(add_query_arg(array(
'add-to-cart' => $product_id,
'quantity' => 1
), $checkout_url));
echo '<a href="' . $buy_now_url . '" class="button buy-now-button" style="background: #ff4500; color: #fff; padding: 10px 15px; border-radius: 5px; display: inline-block; text-align: center; margin-top: 10px;">
Buy Now
</a>';
}
// Add "Buy Now" button to product pages
add_action('woocommerce_after_add_to_cart_button', 'add_buy_now_button');
// Add "Buy Now" button to shop pages
function add_buy_now_button_shop_page() {
global $product;
if (!$product) return;
$product_id = $product->get_id();
$checkout_url = wc_get_checkout_url();
$buy_now_url = esc_url(add_query_arg(array(
'add-to-cart' => $product_id,
'quantity' => 1
), $checkout_url));
echo '<a href="' . $buy_now_url . '" class="button buy-now-button" style="background: #ff4500; color: #fff; padding: 5px 10px; border-radius: 5px; display: block; text-align: center; margin-top: 5px;">
Buy Now
</a>';
}
// Add button to loop products (shop/category pages)
add_action('woocommerce_after_shop_loop_item', 'add_buy_now_button_shop_page', 15);
Then, click “Update File” button.
That’s it! You can now see the “Buy Now” button on the product and shop pages of your website. You’ll see this button next/below the “Add to Cart” button. When you click this “Buy Now” button, you’ll visit the checkout page.
Step 3 – Customize the Buy Now Button
As you can see, we’ve already added the WooCommerce Buy Now link to our store. However, it has an orange background. What if we want to change the button background and text colors? How to accomplish this job.
To do that, you need to modify the “inline CSS styles” in the code. Find the style=”background: #ff4500; color: #fff;” part in the code and change the background and color values.
For example:
echo '<a href="' . $buy_now_url . '" class="button buy-now-button" style="background: #0073aa; color: #ffffff; padding: 10px 15px; border-radius: 5px; display: inline-block; text-align: center; margin-top: 10px;">
Buy Now
</a>';
That’s how you can customize the button background and text colors, and that’s all about how to add buy now button in WooCommerce without plugin. We’ll now discuss how to perform this task effortlessly with a plugin.
How to Add Buy Now Button in WooCommerce with Plugin (Method 2)
This section helps you easily add a buy now button to your WordPress store, even if you aren’t a techie. So, let’s read all the steps in this section.
Step 1 – Get a Suitable Plugin
First, we need to select a suitable plugin that allows us to include a buy now button easily. However, the question is, which plugin will we use?
We’ll use ShopBuilder since it’s simple to use and it supports virtually all themes and plugins. Besides, this plugin has everything from 100+ widgets for Elementor to 22+ modules, similar to standalone plugins, we need to create a professional and high-converting WordPress store.
So, get ShopBuilder and use its Quick Checkout module to add a buy now button easily. Note that although ShopBuilder is available in both free and premium versions, its Quick Checkout module is accessible only in ShopBuilder’s pro version.
That means you have to purchase ShopBuilder and activate it with a license. Here’s how to install and activate it.
Once you purchase the premium version of ShopBuilder, you’ll get its zipped file via email, or you can directly download it from the website. You now need to upload this zipped file to your website.
So, go to WP Admin Panel > Plugins > Add New Plugin.
Then, press “Upload Plugin” button.
Hit “Choose File” button to upload the plugin’s zipped file.
Afterward, press “Install Now” button.
Right now, click “Activate Plugin” button.
Okay, you’ve installed the plugin. You’ll now notice a ShopBuilder menu on your WordPress Admin Dashboard.
Navigate to ShopBuilder > License to activate ShopBuilder Pro with your license key.
Now, input the license key you received after purchasing the ShopBuilder pro into “Licence Key” field and press “Activate License” button.
You’ve activated the plugin. It’s showtime. Let’s add a buy now button with this excellent plugin in no time.
Step 2 – Add a Buy Now Button with ShopBuilder
To include a buy now button in your store with this plugin, hover over to your WP Admin Dashboard > ShopBuilder > Settings.
Then, ensure you are on the ‘Modules’ tab and click “Quick Checkout” module.
You’ll now see a pop-up. Toggle on “Enable Quick Checkout?” switch.
Now, we encourage you to learn about every feature of this module. For example, explore all the features under ‘General’ tab. Read the Quick Checkout documentation to understand their functionalities better.
Okay, let’s go back to adding the buy now button. To do so, click “Button Action” drop-down menu under the ‘General’ tab and ensure “Redirect to Checkout” is selected. Then, move to “Button Text” field and type your button name.
Now, scroll down to “Shop Page Settings,” make sure “Show in Shop Page” switch is turned on, click “Shop Page Button Position” drop-down menu, and select your preferred button position. Congrats! You’ve added a buy now button to the shop page.
Now, add a buy now button to the product page. So, scroll down to “Product Page Settings” and follow the same steps you followed to enable a buy now button on the shop page of your website.
Okay, you are a few steps away from professionally displaying a buy now button on your shop and product pages. What do we mean by professionally?
Let us tell you that by performing all the tasks above, you’ve just enabled the buy now button on shop and product pages. You haven’t worked on its appearance. So, click ‘Style’ tab on top beside ‘General’ tab.
You’ll see several options to customize the buy now button according to your needs. You can change its padding, margin, and height for shop and product pages. You can even set the button background and text colors!
Once you stylize the button to align with your brand, make sure to click “Save Changes” button. Otherwise, you won’t see the buy now button on any web page.
Let’s now visit the shop page to see how the buy now button appears there.
As you can see, the buy now button looks excellent and goes well with the add to cart button and our store theme.
That’s how easily we added this essential button and designed it as per needs without touching a line of code. We believe you understand why you need to use a plugin.
Bonus: How Do You Turn Off the Buy Now Button?
Sometimes, you may need to remove the buy now button from your WooCommerce store. Why? You may want to shift your focus from immediate purchases to warming up the audience. Various reasons can drive you to remove the buy now button.
So, let’s remove it. As you’ve already added a buy now button to your store using ShopBuilder, you can easily perform this task. Just navigate to WP Admin Dashboard > ShopBuilder > Settings.
Then, go to Modules > Quick Checkout. Ensure you are on the ‘General’ tab, toggle off “Enable Quick Checkout?” switch, and press “Save Changes” button.
That’s how you remove the buy now button from your WordPress store.
Our Concluding Thoughts
You can simplify the purchasing process for customers and attract impulse buyers just by adding a buy now button. Not only this, but you can also improve user experience and increase sales. In this article, we learned how to add buy now button in WooCommerce.
We discussed two methods: one is quite challenging, and the other is incredibly easy. Choose one method according to your preferences and add this essential button to your store to increase conversions. Our best wishes are with you on your ecommerce journey.
