How to Create a Single Product Sales Page with Blocks – WP Tavern

In today’s edition of our Building with Blocks series, we’ll explore an example of creating a single product sales page. There is by no means a one-size-fits-all approach to building something like this. This particular example aims to demonstrate a quick way to start selling a single product online, while using free plugins and themes available at WordPress.org.

Here’s what you need to create this simple page:

This five-minute video shows how to set up the sales page:

Step 1: Install Automattic blank canvas theme.

The reason I picked this theme is because it makes it easy to build a one-page website without all the unnecessary extra page elements. It doesn’t have a default header, navigation menus, or widgets, so you don’t have to figure out how to disable all of that.

Start by creating a new page, then select the theme’s “About me” pattern in the Pattern Explorer:

Replace the image with your product image and replace the text with the product information. Customize the button text to “Buy Now” or whatever you want for the buy button.

Add testimonials below the product. If you search in the insert block, you can find the Testimonial Block and install it from there.

Step 2: Install and activate it Accept Stripe Payments Connect.

This plugin allows users to accept credit card payments through Stripe payment gateway. Even those who haven’t created a business entity can use Stripe for a small project like this. Select “Individual/Sole Proprietor” when activating a Stripe account.

If you need PayPal or another gateway, just search for a block plugin that offers what you need. If I was creating a full-fledged e-commerce store with multiple products, I would probably use WooCommerce, Easy Digital Downloads, or another more complex plugin. Accept Stripe Payments seemed simpler for this project.

The video does not show how to configure the plugin settings, but you will need to add your Stripe API keys and make some selections for your single-product store.

Step 3: Create a new product and link the payment button.

Go to Stripe Payments >> Add new products. Add a title, default currency, price, variations, shipping, product URL (for digital products), and thank you page URL, if any of these apply to your product. The plugin includes support for setting available quantity and enabling stock control. Be sure to select “Collect billing and shipping addresses” for physical products that need to be shipped.

I am not advocating the use of this specific commerce plugin. It’s just one I’ve seen with a Stripe block that wasn’t necessarily intended to provide a full e-commerce engine. A surprising number of plugins still only support shortcodes and have no block available. In this case, even though the plugin includes a block, I didn’t want to have to restyle the button output. Each product provides a URL that you can paste into the block editor. Once your product is created, paste the product link on the checkout button text.

The last step is to test the purchase process. You can use Stripe Test API Keys and test credit card numbers to make sure it works before putting it online. The payment form launches in a modal window and customers will be redirected to a “Payment Result” page after credit card payment. This page can be further customized in the block editor.

If you want to expand beyond this basic single-product website, the Accept Stripe Payments plugin lets you add multiple products or do different things like collect donations or create “Allow Only” products.


Source link

Comments are closed.