How to Add a “Buy Now” Button in WooCommerce: A Step-by-Step Guide

Adding a “Buy Now” button to your WooCommerce store is a great way to speed up the checkout process for your customers.

It allows them to skip the cart and go straight to the checkout page, making the buying experience faster and more convenient.

In this guide, we’ll show you how to add a “Buy Now” button to your WooCommerce product pages using simple steps.

Why Add a “Buy Now” Button?

Before diving into the steps, here are some key reasons why a “Buy Now” button can benefit your store:

1. Simplifies the Shopping Process: Customers can quickly complete their purchases without extra clicks.
2. Reduces Cart Abandonment: Streamlined checkout processes can improve conversions.
3. Enhances User Experience: A faster purchase option makes your store more customer-friendly.

Now let’s get started.

---

Step 1: Install and Activate WooCommerce

If you haven’t already set up WooCommerce on your WordPress website, here’s a quick summary:

1. Go to your WordPress Dashboard.
2. Navigate to Plugins > Add New.
3. Search for “WooCommerce” in the search bar.
4. Click Install Now and then Activate.
   Once WooCommerce is set up, your store is ready for customization.

---

Step 2: Use a Plugin to Add the “Buy Now” Button

WooCommerce does not include a “Buy Now” button by default. However, you can easily add this feature using a plugin. We recommend using the Direct Checkout for WooCommerce plugin because it is beginner-friendly and efficient.

How to Install the Plugin:

1. Go to your WordPress Dashboard.
2. Navigate to Plugins > Add New.
3. Search for Direct Checkout for WooCommerce.
4. Click Install Now, then Activate the plugin.

---

Step 3: Configure the Plugin Settings

After installing the plugin, you need to set it up to enable the “Buy Now” button. Here’s how:

1. Go to WooCommerce > Settings in your dashboard.
2. Click on the Direct Checkout tab (added by the plugin).
3. Enable the Skip Cart option. This ensures that customers are taken directly to the checkout page after clicking the button.
4. Customize the button text. You can set it to “Buy Now” or any phrase that fits your store.
5. Save the changes.

Once configured, the plugin will automatically add a “Buy Now” button to your product pages.

---

Step 4: Add the Button Manually (Optional)

If you prefer not to use a plugin, you can add the “Buy Now” button manually using custom code. This method is a bit more advanced but gives you full control.

Steps to Add the Button Manually:

1. Access Your Theme Files:

• Select the file functions.php in your active theme.

• Go to Appearance > Theme File Editor.

2. Insert the Code: Add the following code to your functions.php file:

add_action('woocommerce_after_add_to_cart_button', 'add_buy_now_button');
function add_buy_now_button() {
    global $product;
    $checkout_url = wc_get_checkout_url();
    echo '<a href="' . esc_url($checkout_url . '?add-to-cart=' . $product->get_id()) . '" class="buy-now-button" style="background-color: #0071a1; color: white; padding: 10px 15px; text-decoration: none; margin-top: 10px;">Buy Now</a>';
}

This code creates a “Buy Now” button on the product pages that redirects users directly to the checkout page with the product already added to their cart

3. Save Changes: Click Update File to save your changes.

4. Test the Button: Visit a product page to ensure the button appears and works as intended.

---

Step 5: Customize the Button’s Appearance

Whether you use a plugin or custom code, you may want to style the “Buy Now” button to match your website’s design.

To Customize Using CSS:

1. Go to Appearance > Customize.

2. Click on Additional CSS.

3. Add the following CSS code:

.buy-now-button {
    background-color: #0071a1;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
}
.buy-now-button:hover {
    background-color: #005f8a;
}

4. Save your changes.

---

Step 6: Test Your “Buy Now” Button

Testing is crucial to ensure everything works smoothly. Here’s what to check:

1. Visit a product page on your website.
2. Click the “Buy Now” button.
3. Confirm that the button redirects you to the checkout page with the product already added to the cart.

If you encounter issues, double-check your plugin settings or custom code for errors.

---

Step 7: Promote Your New Feature

Now that your “Buy Now” button is live, let your customers know about it! Here are some tips:

• Highlight the feature in your website’s banner or homepage.
• Send an email to your subscribers explaining how the button simplifies their shopping experience.
• Use social media to announce the update and encourage users to try it.

---

Final Thoughts

Adding a “Buy Now” button to your WooCommerce store can significantly improve the shopping experience for your customers. Whether you choose to use a plugin or add the button manually, the process is straightforward and effective.

By following this guide, you’ll be able to implement the feature seamlessly.

About The Author