One of the biggest things I have seen WooCommerce store owners asking for over the years is the ability to create a custom checkout page. Early on, it was to simply have control over what fields showed up or some other minor detail. But as time went by, it became critical to each component of the checkout page: for ease, speed and most importantly, for conversions.
I have talked before about custom checkout field plugins that do one thing— and do it well. But when it comes to the entire page, most solutions involve using a page builder in one way or another.
Although page builders have their place and can help with the checkout page, not everyone uses one. And to get precisely what you want on your checkout page, often you needed a developer to create a custom template.
I believe WooCurve has hit the nail on the head with Handsome Checkout.
The Handsome Checkout Plugin for WooCommerce Checkout Pages
As we get into this plugin, you are going to find many ways to use it. Today I’d like to walk you through three options:
- Replacing your WooCommerce checkout page
- Creating a custom landing page for your products’ checkout
- Skipping the add-to-cart and going directly to your checkout page
Before I dive into each of these, let’s look a brief overview of the options when creating your checkout page. I will revisit each of these for the three uses I have described.
An Overview of the Custom Checkout Page Options
When you create your custom page on your site, on any page you choose, you have the option of creating a new page or an embed. I will touch on a few slight differences between the features you get with each.
Next some basic info that you will either use or not use, depending on whether you are creating a landing page or replacing your default WooCommerce checkout page.
If you choose to create an embed, your options change significantly, offering a couple of layouts:
This cool feature lets you increase the value of your shopping cart. It’s similar to an upsell, yet different. It’s more like an incentive that you can offer customers in order to channel them through your sales funnel. The settings are the same with both the checkout page and the embed checkout form:
If we toggle it, we get some settings specifically for the order bump. I will show you more specifically how this looks later in this post.
Variations and Quantity
This nice option gives you the ability to do a couple of things with your checkout page.
First, Simple quantity gives your customer the option to order more than one of the product or products.
(Variations and Quantity are not available for embedded checkout forms.)
The second option is to use the variations you have set in WooCommerce for the product: Simple variations and Dropdown quantity and variations.
For example, if I choose one of them, this is what I will see:
You have six templates, which I’ll be showing you later in the post. They are available only for the checkout pages and not the embed forms.
With your embed checkout forms, since they are more streamlined, I have highlighted what is not available for them.
Replacing the WooCommerce Checkout Page
You can use this plugin to replace the WooCommerce checkout page with a more dynamic looking page. There are a couple of things you will want to specifically do for that:
Create a Template Without Assigned Products and Choose Template
First, we will create a new checkout page, give it a name (to remind us it is the template) and, most importantly, leave the Select Product empty.
Next, you will choose the template. You can use any of these, but the Multi Product template was designed specifically for this, as it displays multiple products, which of course you would want if your customers wish to add more than one product to their cart.
Replacing the Default Checkout Page
Now that you have created that template, you will go into your Handsome Checkout settings and find the template you created in the dropdown for Replace default checkout page with:
Of course, you would have also filled in all the other details for your checkout page that you want to display. For this example, I have used them all (with the exception of variations and quantity) to demonstrate what it would look like.
Using the Storefront theme, this is what my default checkout page looks like:
Here is how I set up my new checkout page with the Handsome Checkout plugin:
This is my new checkout page, step 1:
And step 2:
As I said, the appearance will change, depending on what you choose to put on your checkout page.
Creating the Landing Page
You may want to create a specific landing page for a product. Something you can use to share the link and direct people to a single product, or group of products, either by sharing it via email or on social. If I were to take the similar settings and create a page for just the mic, this is how I would set it up:
Now I’ll show you what this would look like as a landing with each of the other 5 templates.
SmartCart Original Template
SmartCart Blue Template
Marketing Pro Template
Two-step Template (screenshot 1)
Two-step Template (screenshot 2)
Embedded Checkout Forms
There may be a time when you want to create your own page and simply embed the checkout form. At the start of this post, I talked about using page builders for creating custom checkout pages. But creating a specific landing page with a page builder, and adding the checkout would be even better.
Earlier I showed what options you have for the embedded page. Of course, you would want everything piled in on an embed, as you can create your own page and simply add the checkout form.
In this example, I am going to create a simple embed form for my eBook. I am setting it up for a 1-step layout but I do have the option of a 2-step. The reason I am going with a 1-step is its a virtual product and I don’t need them to add shipping so that just makes it easier.
I am also not adding a Order Bump as I did before, although the option is there.
This is a pretty simple sample, and I’m sure you would want your landing page to be more robust, but it will give you an idea of what you can do. Also, using a page builder, say, Beaver Builder, you can create some awesome landing pages and simply use the shortcode in a text module to insert it wherever you please. Here is a quick two-column page I put together using the two-step embed.
Skip Cart – Change Your Add to Cart to Buy Now
There is a cool add-on, included with Handsome Checkout for a limited time, but also available by itself, called Skip Cart Pro. It lets you change the Add Cart button to anything you want it to say on your shop page or archives, and skip the cart to go directly to a designated checkout page.
You will simply create a skip rule. To do this, go into the add-ons settings and create it. As you can see, this works seamlessly with Handsome Cart but can also be used for any WooCommerce store.
You can choose between a single product or category, or several. You can also enable it globally for all products and categories. As I said before, you can replace the text for the Add to Cart button.
You will also choose the type of checkout default page. If we choose default, as set above, it goes to the default WooCommerce checkout page.
But you can also choose a custom URL. This allows you to send them to any page, which could be a second upsell.
Or you can send them to a specific Handsome checkout page.
Your Checkout Pages and Embeds
You can see all your checkout pages and embeds here. If you don’t want to reinvent the wheel, you can duplicate any of them using the same settings and tweak as necessary.
One final note. This plugin makes all your checkout pages mobile-responsive, which is a must these days.
I have touched just the tip of the iceberg here. With this plugin, you see how far you can go, with both landing pages and embedded forms. What I really like about it is that it’s tailored for WooCommerce. If you are running a site on WooCommerce, you can easily create landing pages for products that you want to stand out, a sale or even special packages of products. You won’t have to bother with a landing page plugin or having to reinvent the cart with payment gateways and all that comes with that process.
I would highly recommend anyone who is using WooCommerce to consider this plugin to build out their sales and conversions.
So check out the Handsome Checkout plugin for WooCommerce.