With the Express Checkout block introduced in 1.2, users can now buy your products on any page of your site. They no longer need to add the product to the shopping cart and go to the checkout page. Instead, users can use a digital wallet to buy the product in a few clicks.
You can test this on our demo site.
Adding such a section to your site is done entirely via the block editor, but it requires several steps.
Hide/Show block
Start with the Hide/Show Block introduced in Mindspun Responsive Blocks 0.15.0. By default, there are three inner blocks, but we only need two: the initial one to show the product and the initially hidden one to show the Express Checkout block.
Using the list view from both remaining inner blocks, delete the third inner block and the ‘Show #3’ buttons.
In the second inner block with the red background:
- Change the button type to ‘Link’.
- Change the button text to ‘Continue Shopping.’
- Clear the button background color.
- Set the button text color to white.
Finally, change the transition on the Show/Hide parent block to ‘Slide Down’ or whatever you want the transition to be.
Above should be the result. Preview your page and try it live.
Product block
The next step is adding the product you want to sell to the first Inner Block.
Using the list view, delete the contents of the Inner Block container and add a product block. The ‘Pricing Page Column’ block variation works well for this, but you can use whichever.
Select the correct product and remove any information you don’t want to display.
In the block settings for the product block, change the Checkout Mode to ‘Continue Shopping’. This will prevent the block from showing a modal or redirecting to the checkout page.
Make the event generated by the ‘Add to Cart’ button show the second inner block. Click the Show/Hide parent block and click ‘Advanced’ in the block settings. Enter the value pay.cart.item.added for the event type.
Go to the second Inner Block and change the Event Target to the product’s price ID. The value can be found in the product description of the WordPress admin dashboard.
If everything is configured correctly, the block should work like the above when you preview the page. When you click the ‘Add to Cart’ button, the inner block slides down. Clicking ‘Continue Shopping’ takes you back to the first Inner Block.
Note that the ‘Add to Cart’ text has been replaced by ‘Checkout,’ and when you click it, you are taken to the checkout page.
Delete the item from the shopping cart and return to the page to continue testing.
Add the Express Checkout block.
Next, add the express checkout block to the second inner block. It replaces the default paragraph block with the ‘Inner Block 2’ text.
Some users won’t want to use a digital wallet, so you’ll also want to add a button that allows them to pay with a credit card. That button is just a link to the regular checkout page.
That’s it! Style the blocks however you like, and you’re ready to sell.
Mailing Address