{"id":14610,"date":"2021-09-27T12:27:26","date_gmt":"2021-09-27T17:27:26","guid":{"rendered":"https:\/\/launchflows.com\/?p=14610"},"modified":"2021-09-27T13:06:41","modified_gmt":"2021-09-27T18:06:41","slug":"how-to-create-one-click-checkouts-with-woocommerce-launchflows","status":"publish","type":"post","link":"https:\/\/launchflows.com\/how-to-create-one-click-checkouts-with-woocommerce-launchflows\/","title":{"rendered":"How To Create One Click Checkouts With WooCommerce & LaunchFlows"},"content":{"rendered":"\n

In this video, you’ll learn how to use two of the popular features of LaunchFlows to register and log in a new buyer to your WooCommerce site and then subsequently upsell them another product with one-click checkout. <\/h1>\n\n\n\n
\"Save<\/a><\/figure>\n\n\n\n

Register a new user with WooCommerce and LaunchFlows when a product is purchased<\/h2>\n\n\n\n


The first part of this video will take you through the nuts and bolts on how you can use LaunchFlows to trigger your sign up and sign in process.

After we created those, we’ll move onto the second part of the video where I show you how to use one-click checkout and upsell an additional product that compliments your main offer.<\/p>\n\n\n\n

As you can see in the diagram below, we are going to start by registering and automatically logging-in a new or existing user to our WordPress site via a free or paid checkout.

This can be what we call a “leadmagnet” offer (free) or a “tripwire” (inexpensive paid) offer. Both would work to get the new user into your site, but it would save the extra step if you simply offered a tripwire up front, so that they new user would need to add their credit card immediately.

At the time they make the initial purchase of the tripwire product, the user would be asked to add their credit card via Stripe (or Square). This is the point where we add the LaunchFlows Save Stripe Credit Card<\/a> feature via a native block, shortcode or Elementor widget.

This component will hide the normal checkbox and request to save the credit card from the user, so that their card information is automatically and invisibly saved to their account for later use.

After they have purchased the main product, we present them with a post-checkout offer using our LaunchFlows Upsell Component<\/a> or our own custom sales page design.

The important thing to note here, is that the upsell product should be configured with LaunchFlows so that it will send the person on the Next Step to a second checkout page, specially configured with the LaunchFlows Auto Click (one click) Checkout<\/a> component.

Simply choose this from the Upsell Product’s “Select Next Step Page” in the LaunchFlows tab of the Product Data options area as shown here:<\/p>\n\n\n\n

\"Setup<\/a><\/figure>\n\n\n\n

When configuring the second checkout page for Auto Click (one click) checkout, simply add the block, shortcode or Elementor widget that triggers Autoclick.

As shown in the video, we also recommend that you put this component at the top of your checkout layout and that you either setup the section for “full height” or add the CSS option for “100vh” to the element or block holding the component. This will ensure that the buyer only sees the animated standby graphics while waiting, but if there is any failure of the checkout, they can scroll down to see the remaining checkout to fix any errors.

Finally, we suggest you may want to hide the default WooCommerce coupon from this checkout by using the Elementor toggle option or in a block or shortcode, simply use “lf-hide” as the class for this component so that it will be hidden on the front end.

Whether you use this same special Auto Click checkout page with other products is up to you. Simply select this page as the product “Next Step” option as shown above, or clone this page and make a unique flow for other products.<\/p>\n\n\n\n

\n