Step-by-Step Guide To Add WooCommerce "Buy Now" Button on Website

Step-by-Step Guide To Add WooCommerce "Buy Now" Button on Website

Adding a "Buy Now" button to your WooCommerce-powered website is a powerful way to streamline the shopping experience and boost conversions. Unlike the traditional "Add to Cart" process, the "Buy Now" button allows customers to skip the cart page and go directly to the checkout, making impulse buying easier and faster. Whether you're selling a single product or managing a full-fledged online store, this guide will walk you through the exact steps to seamlessly integrate a "Buy Now" button into your WooCommerce site. No matter your technical skill level, you’ll find this tutorial clear, actionable, and easy to follow.

Why To Add a WooCommerce Buy Now Button on Your Website?

Adding a "Buy Now" button to your WooCommerce store offers several key benefits that can significantly enhance user experience and increase sales:

  • Faster Checkout Process: The "Buy Now" button allows customers to skip the cart page and go straight to checkout, reducing the number of steps needed to complete a purchase. This is especially useful for one-product stores or time-sensitive promotions.
  • Improved Conversion Rates: Fewer clicks mean fewer chances for customers to abandon the purchase. By simplifying the buying process, you can convert more visitors into paying customers.
  • Enhanced Mobile Shopping Experience: Mobile users value speed and convenience. A "Buy Now" button provides a quick and seamless way to purchase products directly, improving the overall mobile shopping experience.
  • Better for Impulse Purchases: When customers are ready to buy, any delay can change their minds. The "Buy Now" button helps capture those impulse purchases by enabling immediate action.
  • Customizable for Promotions: You can place "Buy Now" buttons on landing pages, blog posts, or email campaigns to direct users straight to checkout, making it ideal for limited-time offers or featured products.

How to Add WooCommerce “Buy Now” Button on your Website? Well, there are multiple methods through which you can add the WooCommerce Buy Now button easily on your website. There are much more than just a button. Follow our 10 Best Practices For Creating Effective Call-to-Action Buttons. Here, we are using three methods:

Method 1: Adding Woocommerce “Buy Now” button using WordPress Plugin

This is often the easiest and most user-friendly method, especially for those who prefer not to touch code. Several plugins are available that offer various customisation options for the "Buy Now" button.

Step 1: Install and Activate a Woocommerce "Buy Now" Button Plugin

To add a “Buy Now” button without touching any code, the most convenient method is to install a dedicated plugin built specifically for this function. These plugins are designed to enhance the default WooCommerce checkout flow by allowing customers to skip the cart and go directly to the checkout page with a single click. This can significantly reduce cart abandonment and improve conversion rates especially for mobile users or one-product stores. Most of these plugins also offer additional options like redirect behavior, button styling, and display settings, making them perfect for store owners who want both simplicity and flexibility.

Follow these steps to install and activate the plugin:

  • Log in to your WordPress Admin Dashboard
  • Go to Plugins > Add New
  • In the search bar, type “Buy Now Button for WooCommerce” or “Direct Checkout for WooCommerce”
  • Click Install Now on your selected plugin
  • After installation, click Activate to enable the plugin on your website

Here in this Tutorial We will be using the "Quick Buy Now Button for WooCommerce" Plugin for explaining you more easily.

Step 2: Configure the Plugin Settings

Once the plugin is installed and activated, you’ll need to configure its settings to ensure the "Buy Now" button works the way you want. Most plugins provide options to customize the button’s text, placement, and redirection behavior for example, whether users are taken directly to checkout or to a specific landing page. Configuring these settings properly ensures a smooth, user-friendly experience and aligns the feature with your store's conversion goals.

Follow these steps to configure the plugin settings:

  • In your WordPress dashboard, go to WooCommerce > Settings or the plugin’s dedicated settings page (depending on the plugin used)
  • Find the “Buy Now” button or Direct Checkout tab
  • Choose where you want the button to appear (e.g., product pages, shop pages)
  • Set the button label text (e.g., “Buy Now” or “Quick Checkout”)
  • Choose the redirection behavior typically to the checkout page
  • Save the changes after configuring your desired options

Explore the available options. Common settings include:

  • Button Placement: Choose where the "Buy Now" button should appear (e.g., on single product pages or product listings).
  • Button Text: It lets you customise the text appearing on the button. 
  • Redirection: Select where the button should redirect after clicking (e.g., directly to the checkout page, or to the cart page).
  • Button Styling: Some plugins offer options to customise the button's appearance (colours, size, etc.).
  • Conditional Display: Some plugins might allow you to show or hide the button based on certain conditions (e.g., product categories and user roles).

Configure the settings according to your preferences and click Save Changes.

Method 2: Adding WooCommerce “Buy Now” Button Using Theme Customizer

Many modern WordPress themes that support WooCommerce come with built-in options accessible through the Theme Customizer. The Theme Customizer is a powerful WordPress feature that lets you modify the look and feel of your website with live previews all without touching any code. Some themes provide settings specifically designed for WooCommerce stores, including options to control how product pages are displayed and which buttons appear. If you are new to WordPress and don't know where to start then you can follow our Guide To Use WordPress Customizer. 

Using the Theme Customizer to add a “Buy Now” button is a clean and efficient way to enhance your store because it avoids installing additional plugins, which can slow down your site or cause compatibility issues. This method depends on your theme having the feature built in, so it’s worth checking the available customization options carefully.

Step To Access and Edit the Theme Customizer

To check if your theme supports adding or customizing the “Buy Now” button, follow these steps:

  1. Go to your WordPress dashboard. This is the backend area where you manage your website.
  2. Navigate to Appearance > Customize. This will open the Theme Customizer panel, where you can see various customization options on the left side and a live preview of your website on the right.
  3. Look for WooCommerce-specific sections. These may be labeled as WooCommerce, Product Page, Buttons, Layout Settings, or something similar. The naming depends on your theme.
  4. Explore the available options. Within these sections, look for settings related to buttons on product pages. You might find options to enable or disable buttons like “Add to Cart” or “Buy Now,” change button text, or control button placement.
  5. Make your desired changes. If your theme allows, enable the “Buy Now” button and customize its appearance or behavior.
  6. Preview your changes live on the right side of the customizer before publishing.
  7. Click Save & Publish to apply the changes to your website.

Method 3: Adding the Woocommerce Buy Now button Manually

If you’re comfortable with coding or want full control over your WooCommerce store’s functionality, you can add a “Buy Now” button manually by editing your theme files or adding custom code snippets. This method allows you to tailor the button’s appearance, behavior, and placement exactly as you want but it requires basic knowledge of PHP, WordPress hooks, and WooCommerce functions.

Manually adding the “Buy Now” button usually involves creating a custom button that links directly to the checkout page for a specific product. When customers click this button, they bypass the cart and proceed straight to payment, speeding up the purchase process.

This approach is best suited for developers or store owners who want a lightweight, no-plugin solution with full customization options.

Step 1: Add Custom Code to Your Theme’s functions.php File

To add a “Buy Now” button manually, you typically insert a code snippet into your theme’s functions.php file or use a site-specific plugin to safely add custom functions. Here’s a simple example of how you can create a “Buy Now” button that redirects users directly to checkout. For effective checkout page you can also customize Woocommerce checkout page according to the niche of your business and your website's theme colour.

Paste the below code content at the bottom of the file:

<?php
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( add_query_arg( 'buy-now', $product->get_id(), $checkout_url ) ) . '" class="button buy-now-button">Buy Now</a>';
}

add_action( 'template_redirect', 'handle_buy_now_redirect' );

function handle_buy_now_redirect() {
    if ( isset($_GET['buy-now']) ) {
        $product_id = absint($_GET['buy-now']);
        if ( $product_id > 0 ) {
            WC()->cart->empty_cart();
            WC()->cart->add_to_cart($product_id);
        }
    }
}

 

Step 2: Style the Buy Now Button 

You can style the “Buy Now” button by adding WordPress custom CSS rules either in your theme’s stylesheet (style.css) or via the WordPress Customizer under Appearance > Customize > Additional CSS:

Paste this code:

 .buy-now-button {
    background-color: #27ae60;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    font-weight: bold;
}
.buy-now-button:hover {
    background-color: #219150;
}

Step 3: Test the Buy Now button 

After adding the PHP code and CSS, save your changes and visit a product page on your website. You should see the new “Buy Now” button next to the “Add to Cart” button. Clicking it will add the product to the cart and redirect the user immediately to the checkout page.

Conclusion 

Adding a "Buy Now" button to your WooCommerce store is a simple yet powerful way to streamline the customer journey and boost conversions. Whether you use a plugin for ease or custom code for more control, the goal remains the same: reduce friction and make purchasing as quick and effortless as possible. By implementing this feature, you're not only improving the user experience but also encouraging faster decision-making, especially for mobile users and impulse buyers.

Ultimately, the "Buy Now" button is a powerful tool in your e-commerce arsenal. By implementing this guide, you're well on your way to providing a more efficient and enjoyable shopping experience, which can translate into increased sales and customer loyalty.

VW Themes’ premium WordPress themes make it easy to create a modern and interactive WooCommerce checkout experience. With clean layouts, mobile-responsive design, and distraction-free styling, these themes ensure a smooth and fast checkout process that keeps users engaged. The themes also support advanced customization options, allowing store owners to tailor the checkout fields, display trust badges, and include step indicators that guide customers through each stage. Additionally, VW Themes offer highly customizable “Buy Now” buttons that can be styled with ease adjusting colors, typography, hover effects, and placement without writing a single line of code. These buttons can also be set to skip the cart and redirect users straight to checkout, making the purchase journey faster and more efficient. Together, these features help boost conversions and create a seamless shopping experience for any WooCommerce store.

Back to blog