In today’s edition of our Building with Blocks series, we’re going to explore one example of building a single-product sales page. There is by no means one approach for building something like this. This particular example aims to demonstrate a fast way to start selling a single product online, while using free plugins and themes available on WordPress.org.
Here’s what you need to build this simple page:
- Theme: Blank Canvas
- Plugins: Accept Stripe Payments and Testimonial Block
- Stripe Account
This five-minute video walks through the sale page setup:
Step 1: Install Automattic’s Blank Canvas theme.
The reason I selected this theme is because it makes it easy to build a one-page website without all the extra unnecessary page elements. It has no header, navigation menus, or widgets by default, so you don’t have to figure out how to turn all that stuff off.
First, create a new page and then select the theme’s ‘About me’ pattern from the pattern explorer:
Replace the image with your product image and replace the text with product info. Customize the button text to “Buy Now” or whatever you want for the purchase button.
Add testimonials below the product. If you search in the block inserter, you can find the Testimonial Block and install it from there.
Step 2: Install and Activate the Accept Stripe Payments Plugin.
This plugin enables users to accept credit card payments via the Stripe payment gateway. Even those who have not established 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 look for a block plugin that offers what you need. If I was setting up a full-blown 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’s settings, but you will need to add your Stripe API keys and make a few selections for your one-product store.
Step 3: Create a New Product and Link the Checkout Button.
Go to Stripe Payments >> Add New Products. Add a title, default currency, price, variations, shipping cost, product URL (for digital products), and thank you page URL, if any of these are applicable to your product. The plugin includes support for setting the quantity available and enabling stock control. Make sure to select “Collect Both Billing And Shipping Addresses” for physical products that need to ship.
I am not advocating using this specific commerce plugin. It’s just one I saw with a Stripe block that wasn’t necessarily aimed at providing a full e-commerce engine. A surprising number of plugins still only support shortcodes and have no block available. In this instance, even though the plugin includes a block, I didn’t want to have to re-style the button’s 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’s text.
The last step is to test out the purchasing process. You can use Stripe ‘s Test API keys and test credit card numbers to make sure it is working before making it live. The checkout form launches in a modal window and customers will be redirected to a “Checkout Result” page after the 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 allows you to add multiple products or do different things like collect donations or create “Authorize Only” products.
