Sarah Gooding
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:
This five-minute video walks through the sale page setup:
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.
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.
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.
I absolutely love these tutorials! Some of the best content since the old Pixel2Life days, and super practical ways to use the block editor for building. The video version was a nice bonus too! Please continue this series, and consider a tutorial on theme building with the block editor. Thank you, thank you, thank you!
Thanks, John! What kind of theme would you like to see built with the block editor?
Oh! Any really – I’ve was thinking something along the lines of newspaper / magazine / blog theme. Something simple that could be used as a base for building out all kinds of different applications – i.e.; non-profits, agencies, local businesses, etc… Just a jumping-off point that could walk through the universal basics, and maybe a row or two with icons or a call to action. Either way, I’m learning a tremendous amount from the recent tutorials!
Your email address will not be published.
document.getElementById( “ak_js_1” ).setAttribute( “value”, ( new Date() ).getTime() );
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
