Add a Custom Checkout to Any Post or Page on Your WooCommerce Site

- written by

I have written a lot about checkout pages here on our site. The reason? Because it’s something that Woo builders deal with all the time. And it’s good to know the options out there.

Handsome Checkout Pages for WooCommerce

The plugin Handsome Checkout Pages for WooCommerce is not new, but is one of those plugins that continues to be improved with features that help you get more control over your checkout pages. It includes:

  • Embedded forms can easily turn any page on your WooCommerce site to a sales page.
  • Multi-product templates give the customer the power to easily buy one or dozens of your products.
  • Abandoned cart feature tells you who started to make a purchase and the product and quantity they were interested in.
  • Adjust quantity and variations to highlight and pre-select a set quantity as well as allow your customer to adjust quantity and variations of a product.
  • Add an order bump to any checkout page to increase upsells.
  • Use a template from the library to help you easily create your custom checkout page without having to know code.
  • Replace the default WooCommerce checkout page with any of your custom checkouts.

General Settings

The general settings are basic, but as I mentioned, you can choose to replace your WooCommerce default checkout page with any that you have created.

Creating a New Checkout Page

There are a few steps to creating your checkout page, but the process is easy and time-saving.

First, we’ll walk through creating the checkout page.

We have a few basics as far as adding the product or products you want, a title, description and a product image. The product title will override the page title. And for the title and description, you can control the font, and its size, style and color.

Order Bumps

The option to add an order bump or what you might consider a cross- or upsell, is easy to do. This is one of the cool options that you can add to your store’s strategy.

Variation and Quantity Options

This is another great feature. As I mentioned previously, you are able highlight and pre-select a set quantity as well as allow the customer to adjust quantity and variations of a product.

It has four modes.

Simple quantity

The quantity can be picked on the checkout page and can be set up to give a discounted price to a bigger bundle, as well as the ability to highlight the option you want to.

Simple Variations

This allows the customer to choose any variable, such as a size, color, etc. on the checkout page. The options will be automatically pulled from the variable product.

Dropdown Variations

The options for this will also be pulled from the variable product, but with the feature to allow customers to choose multiple quantity and variations in a dropdown.

Simple Products

Customers can choose from one of the products you select to be displayed.


You have seven templates to choose from, based on your products and needs. Some are more extensive while others are simpler, or broken up into a couple of screens via two steps.

They added an interesting template recently called Vitamin. This one works perfectly if you are selling cosmetics, supplements or other products that might come in the bottle. The reason is it gives you a special tab labeled Custom. Here you are able to add a photo of the ingredients of your product as well as a trust seal. In addition, you can offer different deals on the number of months that include a savings or even a trial product.

As we continue creating the checkout page, here are several options around styling and toggling fields and a couple of other options.

And lastly, for the checkout page you are able to create bullet points and add testimonials and trust points.

And if you want to add more styling and code, there are some advanced options.

Although I don’t have room here to give you an example of each of the various layouts and different strategies you may use the plugin for, here are two:

The first one is a page I created to use as a default checkout page, meaning it will be used for any product that someone purchases. You need to remember this as you obviously won’t be adding products, etc.

What I have done:

  • Added a Title, Description and Image that would be generic, for example, I sell only microphones.
  • Added a more general testimonial.

If I look at the default checkout on the Storefront theme, it looks like this:

But if I chose the checkout page I created, using the Marketing Pro template, this is what it looks like now:

page custom default checkout

Or, as another example, using the same template, I created a landing page specifically for a single, variable product and added several other options such as order bump, variable and quantity dropdown and bullet points.

custom product landing page checkout

Embedding a Checkout Form

The other option is to create an embedded checkout form you can use in a post or page. It has several of the same features as a checkout page.

You can either have this as a form embedded or as a popup.

After saving it, you will get a shortcode:

For example, I wrote this post about starting a podcast. At the end I have added a video series that people can buy and have embedded the checkout form. You might want to add more details and make this look a bit better, but you get the idea of how flexible this could be on both pages and posts, especially using blocks and/or a page builder.

embedded checkout on post

Or I could have used the two-step form to reduce the size.

Embedded Popup Checkout

The other option for an embedded checkout form is a popup. You might consider this if you would rather not clutter a page with a form.

When you toggle it as display embed form as popup, you will get this shortcode.

embed code for popup

When you add it as a shortcode on your page or post, you can simply change the text for the link.

If we look at the post that we had used as an example before, we now find our link.

And if we were to click on that link, the checkout form appears as a popup.

Abandoned Carts

This plugin will also keep track of your abandoned carts, which is a huge way to increase your conversions. These will be listed here. And you can connect and integrate Zapier to set up a system to follow up with those who left items in their cart.

Handsome Checkout for WooCommerce works with the major payment gateways, the most popular WordPress page builders and the WooCommerce extensions WooCommerce Subscriptions and Memberships. It also works with AffiliateWP.

In addition, it integrates with their other plugin One Click Upsells.

As you can see, this plugin gives you a ton of flexibility and options to fine-tune your checkout page or form.

And because it give you these options, you need to make sure you are not creating forms that will be non-converting. You will want to test out different layouts and maybe, even do some A/B testing with a couple of landing pages.

You can check out the Handsome Checkout for WooCommerce plugin here.

Only the posts on the builder blog here may include affiliate links. If you click on them and make a purchase, I'll get a commission, at no cost to you.