WebWordPress

How To Add ‘Buy Now’ button in WooCommerce for WordPress

Buy now button on WooCommerce has become one of the most required features on all eCommerce websites running on WordPress.

Before going further I assume that you are already familiar with WooCommerce. If you are just a technology enthusiast, out there to learn something new, I will try to help with some basic foundation for this article.

WooCommerce in simple as they say:

A fully customizable, open source eCommerce platform built for WordPress.

To know more about it click this link.

To see an actual website using WooCommerce, check the one I am currently developing. Go to live demo.

The workflow of typical WooCommerce website is as follows:

  1. User clicks on any product displayed on Home/Shop page.
  2. Now he/she is on ‘Single Product Page’. This page gives more in-depth info about the product.
  3. Click on ‘Add to Cart’ button. The product is added to cart.
  4. Visits ‘Cart Page’. Then click on ‘Checkout’ button.
  5. Fill the details on ‘Checkout Page’ and then proceeds for payment.

All this functionality is provided for free with WooCommerce and works great for most of the use cases.

But…

Every solution can be optimized further…

Have you figured out some overhead in above workflow?

Do we really need step 4 if our user just wants to buy that product only?

We should send him directly to the checkout page. Shouldn’t we?

So now we got the problem:

We need to add a simple ‘Buy now’ button aside ‘Add to Cart’ button, which will directly send our user to checkout page instead of cart page.

Let’s find some solution for this.

First thing first. Google it. Search for plugins.

Gotcha!!. found one.

Ohh, wait. I don’t want the button to be displayed there. It’s style don’t match. It’s looking like something out of box.

I’m a non-technical person. I’m stuck now. Should I hire a developer?

Have you been in such situation?

Don’t worry folks. The solution to it is quite simple. Just follow me along.

I assume that you have access to your theme files.

Note: We should never update the theme files directly. Instead, use the child theme. If you want to learn how to create one, read this article. If your theme provider has provided child theme, upload and activate it. Beware, in some cases, you may have to add Customizer settings again. So always cross check your website after it. If something is broken and you don’t know how to fix it, reactivate your Parent theme and everything will be fine.

But for purpose of simplicity, I will make changes to parent theme directly. The file we are interested to change should be located at:

/wp-content/themes/your-theme/woocommerce/single-product/add-to-cart/simple.php

If not, just create it keeping same folder structure. If you are using the child theme, create the same folder structure. It will look like:

your-child-theme/woocommerce/single-product/add-to-cart/simple.php

You will see few lines of code here. The part of code we are interested will look as below:

Don’t worry if your code looks some different. It’s perfectly fine, as your theme developer has added some extra code. We just have to make sure we find code for ‘Add to Cart’ button.

Now as per our task, we have to add ‘Buy Now’ button next to it. Just add following code below it.

Note: Use the same class used by your theme for the ‘Add to Cart’ button. Or just copy and paste same ‘Add to Cart’ button and make necessary changes.

What this code does is, it will add a new ‘Buy Now’ button after ‘Add to Cart’ button.

Did you notice the difference between both buttons?

  1. We have given new button id ‘buy_now_button’, which we will use later while submitting the form.
  2. We have added extra hidden input field with id ‘is_buy_now’ and value 0. It will help us know if the user has clicked ‘Buy Now’ button.

I hope everything worked fine for you. If you are a developer, it’s easy for you. I am explaining it in details for non-tech guys.

Now we have got button in place. If you save and visit your product page, you will see the button added. Now click on it.

Ohh, wait. It works same as ‘Add to Cart’ button. Right. We are yet to handle the main logic.

Now we have to add some javascript for our logic to work. Open functions.php file in your theme folder. It will be at:

your-theme/functions.php

or if you are using the child theme, then create it in your child theme folder.

Add following code at the end of functions.php file:

This code adds javascript code below add to cart form. Our javascript code listens for click event on ‘Buy Now’ button. When someone clicks the button, we set the value of hidden input with id ‘is_buy_now’ to 1. We will later use this value to check if ‘Buy Now’ button was clicked or not.

Note: You can also add this code in main javascript file of your theme. But I preferred to add it here for sake of simplicity.

Now add following php code at the end of same functions.php file:

This is the main code that helps us to redirect the user to checkout page. By default, redirect url is the cart page’s url.

Remember that we have set hidden input with id ‘is_buy_now’ to value 1. Here we make use of it to differentiate whether user clicked ‘Buy Now’ button or regular ‘Add to Cart’ button.

So if ‘Buy Now’ button is clicked we set redirect url to checkout page’s url.

That’s it. We are done!

Save that file and everything should work fine.

In summary:

  1. We added ‘Buy Now’ button aside of ‘Add to Cart’ button to redirect users to checkout page directly.
  2. To differentiate which button was clicked we used a hidden input element with id ‘is_buy_now’.
  3. Using this we changed the redirect url to checkout page’s url if ‘Buy Now’ button was clicked.

If for some case you just need a single button that redirects to the checkout page, you just have to use following code in functions.php file

No need for that javascript code. Also, don’t forget to rename your ‘Add to Cart’ button in simple.php file(If needed).

Note that,

  • This solution will only work for ‘Simple Products’ and will not work for ‘Variable Products’ or any other product type. For that, you have to use same logic we used in simple.php file in other files that are in the same folder (ex. variation-add-to-cart-button.php)
  • This code is only for giving you an idea about the approach you should follow to solve such problems. This solution is not complete and will differ based on the theme you are using e.g some themes use AJAX calls for adding products and this will not work there. Please modify the code accordingly.

Hope you find this article useful!

If you got stuck, please comment below or feel free contact us


Thank you for reading this blog and welcome back again! We are happy to see you here.  Did you like this post? Kindly share the post using the buttons below. Drop your comments below in the comment box. 

Meez Feed

MeezFeed is an online website/blog dedicated to the optimal delivery of news, reviews, tutorials, technology, blogging, Search Engine Optimization(S.E.O), tricks, hacks, guides, tutorials and courses on how to start an online business and how to make money online.

Leave a Reply

Your email address will not be published.

Back to top button
Close
Close

Ad Blocker Detected!

Please consider supporting us by disabling your ad blocker! We majorly depend on your support to keep our services running. Best regards!