In this lesson, we will show you how to create a custom checkout page for WP Ultimo, using the free version of the Elementor page builder. This is great because your WP Ultimo register page will look in accordance with the overall appearance of your multisite platform.

We will first show you how to create a custom WP Ultimo checkout form, and then we will show you how to create the page with Elementor, so that your registration process looks beautiful.

1- Create a custom WP Ultimo checkout form

To create and manage WP Ultimo checkout forms, go to Network Admin > WP Ultimo > Checkout Forms.

Once you’re there, hit Add Checkout Form.

In this example, we will create a Multi-step checkout form. We want our customers to follow a registration process with these steps:

1. Choose a membership plan
2. Choose a template site (optional)
3. Add the site information
4. Add the user information
5. Payment step

WP Ultimo‘s Multi-step registration form adds all the steps we have mentioned. However, it doesn’t include the template selection step.

Therefore, we need to hit the Add New Checkout Step button to add that step to our checkout form.

Once we hit the Add New Checkout Step button, we’ll see a popup form asking us to add the step slug, title, and description.

Once you add that information, hit the Add Step button.

As you’ll see, a new step section will be added to the checkout form.

Now let’s move the Template selection step to the second place. For this, we just need to drag the section up and place it below the first step.

Once you move it, hit the Add new field button because we need to add a new Templates button to allow customers to select a site template.

Click on Templates to choose it from the list of fields.

Now you need to add the following values:

• Field Label: Add a label for this field. We’ll enter something like “Choose your template”.
• Template sites: Here you need to select which template sites will be available for selection. In this example, we’re using the default site template added by WP Ultimo when we installed the plugin. However, if you’ve created other template sites, you’ll see them all here, and you can select which templates you want to make available. This will also depend on the plan selected by the customer. If there are templates not available for a specific plan, the customer won’t see it in this step.
• Template selector: Here you can select the template selector style.
• Once you select the necessary values, hit Save Field.

Now we’ll add a “Next-step“ button. For this, click the Add New Field button and select the Submit Button field from the list of fields.

This submit button should be called Next Step.

Now it’s time to add the Checkout Form Slug and make sure the checkout form is Active.

Once you’re done, hit Save Checkout Form.

2- Create a Custom Checkout Page with Elementor

Now that you have created a checkout form, let’s create a custom checkout page using the free version of Elementor. This is great because you can create a checkout page with your own style and design.

For this, you will need the checkout form shortcode to paste it on the page you will create.

Hit Generate Shortcode in the checkout form.

You’ll see a popup showing the checkout form’s shortcode, and you just need to hit Copy Shortcode.

Once you’re done, go to your multisite network’s main site and add a new page or edit the default registration page added by WP Ultimo.

In this case, we’ll create a new page called “Checkout Process” and we will Edit with Elementor.

Once in Elementor, we need to add all the elements we want. In this example, we have just added a page background, a heading and a Shortcode element where we’ve pasted the checkout form shortcode.

Here’s a page template you can download:

If you don’t download it, here are some basic parameters to manually create it:

We will add 25px paddings to the shortcode element.

Also, we’ll add a white background and a border radius of 7px.

Once we’re done editing our page, let’s hit Publish and our page will be ready.

3- Test the WP Ultimo custom checkout process

This is what the page will look like once it’s published. As you can see, our customers will be able to select a membership plan in the first step of the checkout process.

In the second step, our users will view the available templates and be able to choose one template for their sites. This is great because they will be able to configure their site’s appearance with one click.

After that, our users need to enter the Site Title and the Site URL.

Finally, the customers will view the detailed information of their order, they will be able to use coupon codes, and complete the order.

Once their order has been completed, they will see the “Thank You” step where they will be able to go to their Admin Panel or Visit the site.

If they choose to go to the Admin Panel, they won’t use the normal wp-admin dashboard. Instead, we’ll show you in future lessons how to create a beautiful frontend dashboard using WP Frontend Admin. This plugin allows you to display any wp-admin page on the frontend to create beautiful frontend dashboards, convert WordPress plugins into web apps, etc.

Optional – Add the registration page to your homepage

Now that you have created the checkout page, you can add a “Sign Up” button and add the URL of this page to it.

These are the steps you need to create a checkout form with WP Ultimo, and then display that checkout form in a beautiful registration page created with Elementor. You can design your checkout process as you wish.

We’ve already shown you how to create membership plans with WP Ultimo.

Here we’ll show you how to create a pricing page with Elementor to display the membership plans on a custom page on your network’s main site for users to purchase a membership plan.

In addition, we’ll see how to add a “Sign Up” button on the homepage linking to the pricing page. We’ll do these two things with the Elementor plugin.

Just follow these steps:

1- OPEN YOUR MAIN SITE’S DASHBOARD

Go to Network Admin > Sites.

Now click Dashboard on the main site.

2- CREATE A NEW PAGE ON YOUR MAIN SITE

Once you have opened the dashboard of your main site, you need to create a new page.

Go to Pages and click Add New.

3- CREATE YOUR PRICING PAGE WITH ELEMENTOR

Enter the page title and then click on Edit with Elementor.

You need to select a new page layout:

1. Click on Settings.
2. Select Elementor Canvas in Page Layout.
3. Click Add to enter a new element to the page.

Select a one-column structure in Select your structure.

After that, add a new shortcode element.

• Go to Elements.
• Search for Shortcode.
• Draw the Shortcode element to the section you just added.

Now you need to enter the following shortcode and click Apply.

[wu_pricing_table]

After applying the shortcode, change the page background to make it look better.

Click the Edit section button.

Do this to change the section’s background:

1. Go to Style.
2. Go to Background.
3. Click Choose Image and select the background image from your computer or from the media library.

After setting the page background, you can click the Preview button and the page will look something like this:

Finally, you can Publish the page if everything’s OK.

4- ADD THE PRICING PAGE TO THE HOMEPAGE OF YOUR PLATFORM

Once your pricing page has been created, you need to link to it from the Sign-Up button on the homepage.

1. Open the main site’s dashboard.
2. Go to Pages and open the homepage with Elementor.
3. Edit the Sign-Up button and enter the pricing page URL into the Link field.
4. Save changes to the homepage.

DONE!

Now people can visit your homepage and go to the pricing page with one click on the sign-up button.