WP Simple Pay Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Easily Add a Buy Now Button to WordPress (Step by Step)

By

|

Last updated on

Do you want to create a Buy Now button on your website? Building a customizable Buy Now button and embedding it on the most prominent location on your website helps you generate more sales and revenue.

In this article, we’ll show you to create a Buy Now button on your WordPress site.

Creating a Buy Now Button With WordPress

With WordPress, there are so many ways to create a Buy Now button.

The easiest way is to use WP Simple Pay. WP Simple Pay lets you add a Buy Now button anywhere on your website without having to set up a complex shopping cart.

WP Simple Pay is hands down one of the best WordPress Stripe plugins. It lets you accept payments via 10+ payment methods that are supported by Stripe such as Google Pay/Apple Pay, ACH Direct Debit, credit card, and more

Here’s what we’re going to create with this tutorial: A Buy Now button that triggers a payment popup form when clicking on it.

buy now button popup preview

Step 1: Install and Activate WP Simple Pay

To add a buy now button, the first thing you’ll need to do is to install and activate the WP Simple Pay plugin on your site.

After purchasing the WP Simple Pay plugin, download it from your purchase email receipt or from your WP Simple Pay account.

Remove the additional 3% fee! 

Most Stripe plugins charge an additional 3% fee for EVERY transaction
…not WP Simple Pay Pro!

To install it, go to your WordPress backend, navigate to Add New under Plugins, and then Upload Plugin. Click Choose File and find the WP Simple Pay .zip file on your computer. Click Install Now. When the upload is complete, press the Activate Plugin button.

If you want to install WP Simple Pay via FTP, follow this guide.

After activating the plugin, you’ll be navigated to the setup wizard, where you’ll need to set up a Stripe account and connect it to your site. Click Let’s Get Started.

wp simple pay setup wizard

If you didn’t see the setup wizard, you can navigate to WP Simple Pay » Settings and then go to Stripe where you can find the Connect with Stripe button. Just click on it to connect your Stripe account to your site.

Step 2: Connect WordPress to Stripe  

Next up, click Connect with Stripe to create a new Stripe account or connect with an existing account.

connect to stripe

To connect a Stripe account to your site, enter your Stripe email address and complete the authentication. You can also set up a new Stripe account if you don’t have a Stripe account yet.

If you’re not setting up WP Simple Pay on a test site, don’t select the Skip this form option as this will create a temporary Stripe account that cannot be recovered or moved to Live Mode.

create a stripe account

Upon completing this process, you’ll be shown a success page that says Setup Complete. Then proceed by clicking the button Create a Payment Form.

setup complete

Step 3: Create a Buy Now Button

Now you’re all set to start creating your Buy Now button.

WP Simple Pay comes with tons of pre-built templates you can use to create a payment form or a Buy Now button. For this tutorial, let’s choose the template Payment Button.

choose payment button template

You’ll be landed on the General configuration page. Here you can add name and description for your form.

payment button configuration

In the Type field, you can configure whether you want to host the form on your own site or Stripe checkout page. Let’s choose On-site payment form. You can also select the checkbox Open in an overlay model. That way, when someone clicks on your buy now button, a modal popup will be triggered where they can complete their payment. For more details, check out this post on selecting the right payment form types.

To change the payment success page, choose Specific Page. You’ll now be shown a drop-down to select your preferred success page. If you want to choose an external URL as your success page, then select Redirect URL and then type in the URL.

Next, click on the Payment option from the left, and you’ll be able to customize the currency, amount, and even choose between one time and subscription payment.

payment mode

In the Form Fields option, you can add new fields or customize any existing form fields the way you want.

Since you’ve selected the Payment Button template, the Payment Button field is preselected. Click on the field and customize its text and style.

customize the buy now button

Keep in mind that any field that you add here will only be shown on the overlay modal form that pops up after clicking your Buy Now button.

You can save your button as a draft and then preview it. Make sure you test the form first before it goes live. You can toggle your entire site or individual payment forms between test and live modes (read more about Test mode).

If it looks good, go ahead and publish it.

There you have it! You’ve now successfully created a Buy Now button.

Step 5: Add the Buy Now Button to a Page

Now that your Buy Now button is ready, it’s time to embed it on your website.

add-wp-simple-pay-block-to-page

To embed your button, go to the post or page where you want to publish it. Then click on the + icon to add the WP Simple Pay block. Then choose a form you just created. And then, click Publish or Update.  

That’s it!

We hope this article helped you learn how to add a Buy Now button to WordPress.

Get started with WP Simple Pay and start accepting online payments.

To read more articles like this, follow us on Facebook and Twitter.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Start Accepting Payments Today

Start accepting one-time and recurring payments or donations on your WordPress website.