How to Build a Global Checkout Using FunnelKit

Tavleen Kaur
December 24, 2020
How to Build a Global Checkout Using FunnelKit

Looking to replace your default WooCommerce Checkout page with a global Checkout?

The default Checkout looks bland, isn't mobile-optimized, and lacks elements that drive conversions. A custom Checkout-built for the storefront can change your game.

If you have a multi-product store where people come in add items to the cart and checkout, then having a custom-built global checkout will allow you to enhance the user's checkout experience.

You don't need to create several checkout pages for your different products.

This post will deeply dive into Global Checkouts and see how you can create one using FunnelKit (formerly WooFunnels).

Let’s dive in!

What is a Global Checkout?

A Global checkout is the standard checkout that a customer sees after they add items to their cart and proceed to checkout.

Having a custom-built checkout instead of the default WooCommerce checkout ensures that all your customer’s questions are answered and they don’t feel anxious at any step of the checkout process.

The page needs to look credible for the users to make the payment without any doubts.

Why Do You Need a Global Checkout Built with FunnelKit?

Global checkout applies to all the products on the website.

The default WooCommerce checkout meets the basic necessities of a checkout page but doesn’t allow the users any control over their purchase once they get to the checkout page.

On the other hand, the FunnelKit checkout page gives the users complete control over their cart and payment.

Before paying for products on the Global checkout page, you can view the images of the products to confirm that you’re buying the right items.

Item images and quantity in the cart

You can adjust the quantity of the products in your cart, delete the products, and even undo deleted items on the checkout page.

Testimonials displayed on the page also strengthen the claims of the offer. Bullet points about why they should buy from you and a guarantee seal just drive the point home even more.

FunnelKit has a collapsible order summary option that saves space on the screen for other details and form fields to be shown.

Collapsible order summary

Single-Step vs Multi-Step Checkout

This is an age-old debate. Is a single-step global checkout better than a multi-step one? Or is it the other way around?

While a single-step checkout has all the required information available for the users to scan in one glance, a multi-step checkout breaks down the information into digestible chunks, making it easier for the customer to navigate.

If you are selling digital products, it has been noted that a single-step Checkout may work better for you simply because the form fields are lesser. You don't need a shipping method and address details from the user.

However, for physical products, a multi-step global Checkout can convert higher!

Top 3 Global Checkout Templates

FunnelKit offers you a range of professionally built Global Checkout templates to replace the default WooCommerce Checkout Page.

Every template has a mini cart with a header, footer, a place for your company logo, and so much more.

Let's look at a few of our very popular and high converting Global Checkout templates:

1. Minimalist

As the name suggests, this template is designed very minimalistically with all the necessary elements displayed over a plain white background.

Different sections are separated by border and margin to make the global checkout page look clutter-free.

Minimalist global checkout page template

This page shows the checkout form parallel to the page's trust-building components, ensuring the customers of their purchase.

You can use the Minimalist template for your storefront by making a few customizations like changing the color of the header, brand color, and logo.

2. ShopCheckout

This Shopify style checkout template is one of our most loved checkouts.

You can view the order summary before making the payments, and in addition to that, even adjust the product quantities.

ShopCheckout global checkout page template

It is a very easy checkout page to navigate. And with a 'Why Buy From Us' section and guarantee seals, this page is very convincing.

3. Classic

The Classic global checkout template has a clean design that does not overwhelm the users.

The order summary shown right next to the checkout form gives the user a chance to modify and confirm the products before paying.

Classic global checkout page template

The 'Why Us?' section pacifies any doubt the buyer might have about the brand and convinces them about their purchase.

With a simple and convincing design, Classic is another popular Global Checkout template.

Apart from this, there are many global checkout templates available in FunnelKit such as Shoppe, Optic, Hific, and many more.

How to Create and Customize a Global Checkout Page?

You can create and customize a Global checkout page for your WooCommerce store easily with FunnelKit.

This is how you can do it:

Step 1: Install the WooFunnels Funnel Builder

Purchase your copy of the Funnel Builder here.

Please note that the WooFunnels Funnel Builder is also available in the Lite (free) version as well. But we will be using the Pro version for setting up store checkout.

Once you have made the purchase, go to your WooFunnels account and download these zip files:

1. Funnel Builder (base plugin)

2. Funnel Builder Pro

Install and activate both plugins by uploading these zip files to your WordPress website.

Next, go back to your account and copy the activation code of the Funnel Builder Pro.

Then, paste the license key into the 'Settings' section of Funnel Builder and click on the ‘Activate’ button.

Hit the 'Save Changes' button when done.

Step 2: Add a store checkout

Go to the 'Store Checkout' from your WordPress dashboard.

Go to Store Checkout from your WordPress dashboard

Next, click on the 'Create Store Checkout' button.

Create a new store checkout

You'll be directed to import your global checkout templates.

Please note that 2-step signifies that the particular template will import two pages - a Checkout and Thank You page. While the 3-step template will import an additional One-Click Upsell page.

Furthermore, Funnel Builder deeply integrates with popular page-building tools such as Elementor, Divi, Oxygen, and Gutenberg.

If you want to use other page builders such as Thrive, Beaver, or any other, choose Others and create it with the help of shortcodes.

Select the page builder and click on 'Preview' on the template you want to import.

Select the page builder and click on the template you would like to import

Next, make sure to choose the number of steps you want on your global checkout page and import the template.

Then, name your store checkout.

Name your store checkout

Enter the name of your store checkout and click on 'Add'.

Step 3: Customize your global checkout page

Now, we will customize the look and feel of our store checkout.

Hit 'Edit' next to your checkout page.

Edit store checkout

After importing the template of your choice, click on the Edit button you customize the page in Elementor.

Edit Template to customize the checkout page design

FunnelKit offers you two custom build widgets to optimize your checkout pages - Checkout Form and Mini Cart.

Customize the look and feel of your store checkout page

Design the page as you want - adjust the form field widths, enable progress bar at the top, and more.

Step 4: Customize the form fields

In case you wish to add or delete any of the default checkout form fields, you can do that in FunnelKit.

In the Fields tab, you can add a new step, field, or section to the checkout form.

To re-arrange the fields and sections to your liking, drag & drop them around the page.

Customize the form fields

After that, click on 'Save Changes' once you’re happy with the structure of the global checkout form.

Step 5: Optimize the checkout page

Optimizing your checkout form would ensure a smoother checkout experience for your customers.

Add checkout page optimizations like Google Address Autocomplete, Auto Apply Coupon, Express Checkout, Preferred Countries, etc.

First, click on the Optimization tab.

Optimize your store checkout

Enable all the optimizations you wish to add to your checkout page and click on Save changes when done.

Now, make sure to publish your store checkout from here:

Publish your store checkout or global checkout

That's it! You have successfully created your store checkout or global checkout funnel with the FunnelKit Funnel Builder.

However, if you're a FunnelKit standalone product - FunnelKit Checkout (AeroCheckout) user, then the process is simple.

Mark the Checkout page as a Global Checkout (for AeroCheckout Users)

If you're a FunnelKit Checkout (AeroCheckout) user, you have to mark a checkout page as 'Global' in the settings section.

Once you have a checkout page in place, you can mark it as global checkout.

Click on the FunnelKit tab in the sidebar, and choose the Settings option from the list.

Select the Checkout option to search and choose your checkout page to override the default WooCommerce Checkout Page.

Override default checkout

From the dropdown menu, find and select the checkout page name you’d designed before to set it as the Global Checkout.

After that, click on Save changes to apply the page as a Global Checkout for all products.

Add AOV-Boosting Offers to the Store Checkout

With FunnelKit, you can add multiple complimentary offers - Order Bumps and One-Click Upsells - that would help you increase the AOV on every purchase.

Adding an Order Bump

An Order Bump is the offer made on the checkout page. It is often a low-dollar, impulse purchase that doesn't require a lot of explanation.

You can add more than one order bump on the same checkout page. And customers can add whichever bump they like to their cart by clicking on the checkbox.

Let's see how you can add a bump to your global checkout page.

Step 1: Add a Bump

To add a bump to the checkout page, click on Add Order Bump next to the checkout page.

Add order bump to global checkout funnel

A window would open, prompting you to name the order bump. Add the name you want and hit Add.

Name the order bump

Step 2: Begin Editing

Click on the pencil icon next to the bump name to begin editing the page.

Click on Edit next to the order bump

Step 3: Add Product

The first thing you need to do is add a product to the order bump.

Click on 'Add Product' to start.

Add product to your order bump

Search for the product you wish to offer and click on 'Add Product'.

After you’ve added the product, modify the quantity and discount rate to make the offer more appealing.

Product added to the order bump

Click on 'Save Changes' when you’re done.

Important: Only the products already added to WooCommerce can be searched for and added to the Bump.

Step 4: Customize the Bump

To customize the page click on the Design Tab. Here you can change the Bump skin, Copy on the bump, color scheme, and more.

Customize the order bump

Step 5: Rules and Settings

You can define when a particular order bump is added to the checkout page. Be it based on the order total, a specific product added to the cart, or something else.

This ensures that the additional offers are in line with the products being purchased.

Set these conditions under the Rules tab.

Set rules for your order bump - global checkout

In case a single item is linked with multiple bumps, then priority decides which of those will get triggered.

Not only that, you can even set the priority of your order bumps from the Settings tab.

Set priority for your order bumps

Adding a One-Click Upsell Offer

One-Click Upsells are the offers a customer sees after making the payment, and before landing on the Thank You Page.

The users can accept the offers made on these pages with just one click. They don't even need to enter their payment details again.

Let's learn how to design an Upsell offer for your Global Checkout.

Step 1: Add a Step

Similar to the Checkout Page and the Thank You Page, the Upsell Page can also be added.

First, click on the 'Add New Step' button.

Add new step

Step 2: Choose one click upsells and import the template

From the steps options, choose One Click Upsells and click on the template you like.

You'll be directed to the preview page. Here you can see the full preview of your upsell template.

Once you're satisfied with the design, click on 'Import This Template' and name your upsell offer.

Name your upsell offer

Your upsell page step will get added to your global checkout funnel.

Step 3: Add Product

Click on the 'Edit' button to customize the upsell page.

The first thing you’d need to do is add a product to this offer and name it.

Then you’d need to add a product to the said offer.

Search and add the product you want to offer on the page.

Modify the quantity of the product and discount rates offered. Also, turn on the Offer toggle to apply it to the checkout page.

Upsell added

You can also add more than one offers. In addition to that, you can interlink them with Dynamic Offer Path

On the acceptance or rejection of an offer, the customer will either be led to another offer or the thank you page, depending on the conditions you define.

Dynamic offer path

Important: Only the products already added to WordPress can be searched for and added to create an Upsell offer.

Step 4: Customize your upsell page

Similar to the Global Checkout page, you can easily customize your upsell template.

Click on the 'Edit Template' under the Design tab.

Edit upsell template

FunnelKit offer 10 specially designed widgets for you to use and customize the Upsell Page with.

Customize your upsell template the way you want

Drag & drop these widgets to the workspace and build the page to your liking. Click on the green Update button once you’re happy with how the page looks.

Step 5: Rules and Settings

Just like with Order Bumps, here also you can set conditions for when to make a particular Upsell offer, and when not.

This is done from the Rules tab.

Set the rules for your upsell offers

In Settings, you can choose if you want to merge the upsell with the main order or create a separate order for the upsell.

Not just that, you can set the priority sequence of the Upsell offers, among many other personalizations.

Settings - Upsell offer

These settings, yet again, ensure a better checkout experience for the customers.

Click on Save changes to lock in all the changes made to the page.

You can even create and customize a Thank You page that follows this Checkout page after the purchase is complete.

Just follow the same steps as you did to build the Checkout Page, and you will have yourself a beautiful Thank You Page to complement the rest of the pages.

Thank you page - global checkout

There you go! We've finally built our global checkout funnel.

Ready to Swap Your Default Checkout With a Global Checkout By FunnelKit?

A Global Checkout Page with FunnelKit (formerly WooFunnels) is designed to keep the users in mind.

These pages want to reassure and convince the customers of their purchase and make the whole process easier for them to maneuver through.

We saw how you can design a checkout page and apply as to all the products as a Global Checkout.

Not only that, but we also showed you how you can add additional offers that would help boost up the AOV with every sale.

With FunnelKit, you can create Checkout Pages with ease, and customize them to your liking.

Check out the FunnelKit Funnel Builder to learn more and build one for your business now!

Author: Tavleen Kaur
Do you know after Amazon implemented the 1-click buy system, their sales shot up year-on-year hitting $88.9 Billion mark in 2014? Jeff Bezos attributed it to a friction-free & streamlined buying process. At FunnelKit (formerly WooFunnels), we're determined to give you the tools you need to do the same in your business. I am Tavleen and I help you get there faster.
Ready to create revenue-generating funnels in Wordpress?
Click Here

Increase your sales, starting today.

Grab Our Exclusive Bundle