In this installment of the HelpDesk, one of our team members reveals an elegant method for creating a two-step checkout process. First, he explains a way that creates two separate pages, like most two-step checkout processes. Then, he also shows a method for first displaying just the account details information form and then the payment information as a second, separate step, but on the same page. Note that this second option involves HTML and some basic scripting.
Asked about the boxes:
"I was wondering if there is an easy way to separate the core checkout page into two separate pages. I want to have one page that asks for customer account information (name, email, etc.), and then go to a page to enter payment information after their account is created."
John de MemberMouse respondió:
"There are two approaches to this. The first works exactly as you describe, where there are two separate checkout pages in series. We have a detailed description of how to build this process in our support article Creating a 2-Step Checkout . I'll include the gist below as well.
The first step is to create a new page for the first checkout step and place a Free Signup Form icon on the page.
Next, a Product-Specific list of bahrain consumer email Confirmation Page is created for free memberships, and a copy of the Checkout Core Page Template is placed on this confirmation page, modifying the SmartTag Form slightly to feature a specific product. Since everyone who lands on this page is a registered user, the Account Details section of the checkout process is automatically hidden and we don't ask for that information again. At this point, the user can fill out their payment details and complete the checkout process.
The main drawback to this approach is that it can be difficult to offer the two-step checkout option for multiple products on the same site. All users who sign up for the free tier we've created will be offered the product we've specified. To offer multiple products in this way, one option would be to place a Cambio de producto on the second step of checkout. Alternatively, you'd need a separate free membership tier for each product you sell, and a Decisión de los miembros SmartTag to switch between the checkout code for each on the second step.
The second method is to fake two pages using scripts. With this method, there aren't really two pages, and members aren't actually created until they complete the entire process. What you do is hide and show sections of the page and provide buttons to move through them. This creates the two-step checkout experience without creating a free membership in between.
This is more of an intermediate level page building activity, but if you're interested and somewhat comfortable with HTML and basic scripting, you can follow the demo implementation below to see how it can be done.