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

In at the moment’s version of our Building with Blocks collection, we’re going to discover one instance of constructing a single-product gross sales web page. There may be on no account one strategy for constructing one thing like this. This specific instance goals to display a quick strategy to begin promoting a single product on-line, whereas utilizing free plugins and themes obtainable on WordPress.org.

Right here’s what it’s essential construct this easy web page:

This five-minute video walks by means of the sale web page setup:

Step 1: Set up Automattic’s Blank Canvas theme.

The rationale I chosen this theme is as a result of it makes it simple to construct a one-page web site with out all the additional pointless web page parts. It has no header, navigation menus, or widgets by default, so that you don’t have to determine tips on how to flip all that stuff off.

First, create a brand new web page after which choose the theme’s ‘About me’ sample from the sample explorer:

Substitute the picture along with your product picture and change the textual content with product information. Customise the button textual content to “Purchase Now” or no matter you need for the acquisition button.

Add testimonials under the product. In case you search within the block inserter, you will discover the Testimonial Block and set up it from there.

Step 2: Set up and Activate the Accept Stripe Payments Plugin.

This plugin allows customers to just accept bank card funds by way of the Stripe fee gateway. Even those that haven’t established a enterprise entity can use Stripe for a small undertaking like this. Choose “Particular person/Sole proprietor” when activating a Stripe account.

In case you want PayPal or one other gateway, simply search for a block plugin that provides what you want. If I used to be organising a full-blown e-commerce retailer with a number of merchandise, I’d in all probability use WooCommerce, Simple Digital Downloads, or one other extra advanced plugin. Settle for Stripe Funds appeared less complicated for this undertaking.

The video doesn’t present tips on how to configure the plugin’s settings, however you have to so as to add your Stripe API keys and make a couple of alternatives in your one-product retailer.

Step 3: Create a New Product and Hyperlink the Checkout Button.

Go to Stripe Funds >> Add New Merchandise. Add a title, default forex, worth, variations, delivery price, product URL (for digital merchandise), and thanks web page URL, if any of those are relevant to your product. The plugin consists of help for setting the amount obtainable and enabling inventory management. Be certain to pick out “Gather Each Billing And Transport Addresses” for bodily merchandise that must ship.

I’m not advocating utilizing this particular commerce plugin. It’s only one I noticed with a Stripe block that wasn’t essentially aimed toward offering a full e-commerce engine. A shocking variety of plugins nonetheless solely help shortcodes and don’t have any block obtainable. On this occasion, despite the fact that the plugin features a block, I didn’t need to need to re-style the button’s output. Every product gives a URL which you can paste into the block editor. As soon as your product is created, paste the product hyperlink on the checkout button’s textual content.

The final step is to check out the buying course of. You should utilize Stripe ‘s Test API keys and check bank card numbers to verify it’s working earlier than making it stay. The checkout type launches in a modal window and prospects can be redirected to a “Checkout End result” web page after the bank card fee. This web page could be additional custom-made within the block editor.

If you wish to increase past this fundamental single-product web site, the Settle for Stripe Funds plugin lets you add a number of merchandise or do various things like accumulate donations or create “Authorize Solely” merchandise.