Add WooCommerce Buy Now Button Without Plugin

In the world of e-commerce, a seamless and efficient shopping experience can significantly boost sales. One essential element of this experience is the “Buy Now” button, a feature that enables customers to make instant purchases with a single click. While WooCommerce, a popular e-commerce platform for WordPress, provides a default “Add to Cart” button, it does not include a Buy Now button out of the box. In this tutorial, we will show you how to create a WooCommerce Buy Now button without the need for additional plugins. But First, let us understand why do we need WooCommerce Buy Now button.

The Buy Now button streamlines the purchase process, especially for customers who want to make quick decisions and finalize their transactions instantly. Instead of adding products to a cart and navigating through multiple steps, a Buy Now button allows customers to skip the cart entirely and proceed directly to the checkout page. This feature can be a game-changer for improving conversion rates and enhancing the overall shopping experience on your WooCommerce store.

To implement a WooCommerce Buy Now button, you don’t need a third-party plugin. With a bit of code customization, you can create a sleek and effective Buy Now button that blends seamlessly with your website’s design. Using the provided code, you can add the “Buy now” button to single and variable products in WooCommerce.

Placing the WooCommerce Buy now Button Code

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and save it. You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update. As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

// Add custom styles for the Buy Now button
add_action('wp_footer', 'custom_buy_now_button_styles');

function custom_buy_now_button_styles() {
    if (!is_admin()) {
        $custom_button_color = ''; // Customize button color here
        ?>

        <style>
            a.custom-checkout-btn {
                margin: 0px 8px !important;
            }
        </style>

        <?php if ($custom_button_color != '') : ?>
            <style>
                a.custom-checkout-btn {
                    background: <?php echo $custom_button_color; ?> !important;
                    transition: 0.4s filter ease;
                }

                a.custom-checkout-btn:hover {
                    filter: saturate(2);
                }
            </style>
        <?php endif;
    }
}

// Replace Add to Cart button with Buy Now button
add_action('woocommerce_after_add_to_cart_button', 'replace_add_to_cart_with_buy_now');

function replace_add_to_cart_with_buy_now() {
    global $product;
    $is_simple_or_variable = $product->is_type('simple') || $product->is_type('variable');
    $add_to_cart_url = wc_get_checkout_url() . '?add-to-cart=' . $product->get_id();
    $button_class = 'single_add_to_cart_button button alt custom-checkout-btn';
    $button_text = __("Buy now", "woocommerce");

    if ($is_simple_or_variable) {
        ?>

        <script>
            jQuery(function ($) {
                var url = '<?php echo $add_to_cart_url; ?>',
                    qty = 'input.qty',
                    button = 'a.custom-checkout-btn';

                // Update button URL based on quantity input
                $(qty).on('input change', function () {
                    $(button).attr('href', url + '&quantity=' + $(this).val());
                });
            });
        </script>

        <?php if ($product->is_type('variable')) : ?>
            <script>
                jQuery(function ($) {
                    var url = '<?php echo wc_get_checkout_url(); ?>?add-to-cart=',
                        vid = 'input[name="variation_id"]',
                        qty = 'input.qty',
                        button = 'a.custom-checkout-btn';

                    setTimeout(function () {
                        if ($(vid).val() != '') {
                            $(button).attr('href', url + $(vid).val() + '&quantity=' + $(qty).val());
                        }
                    }, 300);

                    $(qty).on('input change', function () {
                        if ($(vid).val() != '') {
                            $(button).attr('href', url + $(vid).val() + '&quantity=' + $(this).val());
                        }
                    });

                    $('.variations_form').on('change blur', 'table.variations select', function () {
                        if ($(vid).val() != '') {
                            $(button).attr('href', url + $(vid).val() + '&quantity=' + $(qty).val());
                        }
                    });
                });
            </script>
        <?php endif;

        echo '<a href="' . $add_to_cart_url . '" class="' . $button_class . '">' . $button_text . '</a>';
    }
}

After adding the above code to the site theme’s “functions.php” file, you will see the “Buy now” button on the product pages.

Customizing the Buy Now Button

You can easily customize the Buy Now button’s appearance and text by following these steps:

Changing Button Color: To change the color of the button, locate the below code labeled “change color of button.” Replace the empty $custom_button_color variable with your desired color code.

 $custom_button_color = ''; // Customize button color here

Modifying Button Text: To change the text displayed on the button, locate the section labeled “change the text of the Buy now button.” Replace “Buy now” with your preferred text.

Conclusion

By following these steps and using the provided code snippets, you can easily add a WooCommerce Buy Now button to your online store without the need for additional plugins. This enhancement can help streamline the purchase process, improve user experience, and ultimately boost your sales. Customizing the button’s appearance and behavior allows you to tailor it to your brand’s style and meet your customers’ needs efficiently.

Enhance your WooCommerce store today by implementing the WooCommerce Buy Now button and providing your customers with a seamless shopping experience.

To learn how to install custom font in visual code studio, read the following article here