WooCommerce One Page Checkout The Ultimate Guide

If you’re using WooCommerce, there’s something you should know. Chances are your WooCommerce checkout page is hemorrhaging money. What you need is a WooCommerce one page checkout system.

Nobody likes bleeding money except for Jeff Bezos, that guy has a shed load of moolah, I mean, he’s sending rockets into space, for crying out loud.

It’s hard running an online store irrespective of what platform you use, be it WooCommerce, Shopify, or BigCommerce. It takes time and effort to create products, quality descriptions, fantastic imagery, and more.

All of that is for nothing if your checkout page goes against you.

Q. How can you improve upon your checkout page and increase sales for your online store?

The short answer? Using a WooCommerce one-page checkout solution, but why? 

Let’s kick things off the standard WooCommerce checkout system and explain why it could be holding you back and how to increase sales using a one-page system.

The Standard WooCommerce Checkout Page

You might think me harsh for saying that the WooCommerce checkout page needs some work. It does, stern but fair.

Don’t get me wrong; it’s perfectly serviceable for what it is; just because it’s serviceable doesn’t mean there’s no room for improvement.

In our example, we have some standard products that WooCommerce provides upon installation. You know the products, Hoodie with Zipper, Hoodie with Pocket, etc., etc.

So I’ve added a few of the products to my cart as you do; what wonders await with the standard WooCommerce checkout page:

Standard WooCommerce Checkout Page

That’s a whole lot of information required from a user; I mean, looking at it looks like you’re about to file for benefits or something.

What Have We Got? Well:

First name / Last name – 1 field each
Company name – 1 field
Country / Region – 1 field
Street address – 2 fields
Town / City – 1 field
State – 1 field
Zip – 1 field
Phone -1 field
Email address – 1 field
Order notes (optional – text area)

Ten fields in all, not counting order notes, which is quite a few, and if you decide to Ship to a different addresswell, that throws up another nine fields.

You’ll see your order on the right-hand side, itemizing your cart and any associated costs for shipping, taxes, and I’ve added two payment methods, one for Direct Bank Transfer and one for PayPal.

Let’s face it; there’s quite a lot going on here.

As a busy online store owner, you don’t have to know code to achieve results. Want an example? Here’s something that many don’t know about.

How to Remove Fields From a WooCommerce Checkout Page (the Easy Way)

There’s a shedload of fields in a standard WooCommerce checkout page, and as I said, many don’t know about this little trick. A bonus? No plugins are required, and more importantly, no code.

Navigate to your store page on the front end, from there, in your WordPress admin bar, hit Customize:

Customize your checkout page in WooCommerce

Once you’ve clicked on Customize, you’ll see the below options:

Customizing your WooCommerce checkout page

You’ll want to click on the WooCommerce option in the native WordPress customizer:

Altering your WooCommerce Checkout page easily

Using the WordPress customizer, we can narrow down a few fields from showing:

Removing fields you do not need

If you need the following fields:

Company name field
Address line 2 field
Phone field

Then leave them as is; if you’d like to remove them, it’s a piece of cake.

If you’re selling business to consumers (B2C), it makes no sense to keep the Company name field. Do you really need the Address line 2 field, or for that matter, the Phone field?

If you’re selling business to business (B2B), then, of course, your mileage will vary, and you may well need these additional fields.

From the dropdown menu, for each field, you have three options, which are:

Hidden
Optional
Required

To remove the fields, you can select Hidden or mark them as either Optional or Required. In my case, I don’t want to show the Company name field, the Address line 2 field, or the Phone field.

This simple trick has just removed three fields from our WooCommerce checkout page.

A quick tip: whatever WordPress theme you’re using, always check the WordPress customizer; chances are the theme you are using could have more options available in terms of WooCommerce customization.

Reducing Steps Required to Checkout

WooCommerce, as a standard, offers a cart page for customers to view the contents of their shopping basket and a separate checkout page.

Once a customer is happy and decides to purchase an item, they checkout, but it’s a three-step process.

Step one add to cart, step two view cart, step three checkout.

While it may seem minimal in terms of steps, what if you could reduce them and focus on a visitor checking out?

Removing steps/fields helps customers purchase goods without jumping through hoops, and they’re more likely to checkout as a result.

As we’re demonstrating the no-code approach to simplifying the checkout experience, we’ll use WooCommerce plugins. 

WooCommerce Plugins & Altering the Checkout Experience

We’ve installed and tested each of the listed plugins. We’ve carefully gone through each one, and below you’ll see our findings.

Are you sitting comfortably? Then let’s begin.

WooCommerce One Page Checkout Plugin

WooCommerce has a plugin specifically for creating a one-page checkout experience and weighing in at $79.00 for a single site license.

Right off the bat, it’s bad news for Gutenberg users; as it currently stands, the plugin isn’t compatible, you’ll need to be using the classic editor.

WOPC (WooCommerce One Page Checkout) lets you create pages or posts, housing products, and displaying a checkout all in one swoop.

See the example below:

WooCommerce One Page Checkout

In our example, we’ve added products manually; let’s take a look at the Product Table option:

Product Table WooCommerce One page checkout

Next, the Product List view:

WooCommerce One Page Checkout Product List view

We’ve cut the screenshot here to show you the output of the list itself. Now, let’s take a look at the Single Product view:

Single product WooCommerce One Page checkout

Lastly, the Product Table view:

WooCommerce One Page Checkout Table

As you can see (well, maybe not on the cut-off screenshots), the checkout is on the page itself, reducing the steps required to checkout and generate sales with less restriction.

Using WOPC, you can create landing pages for specific products or even add one to the end of a blog post.

What about existing products in your store?

A good question and WOPC answers this with a new addition to the Product data tab when administering products:

Enabling one page checkout on single product

Clicking the One Page Checkout checkbox enables the checkout form inside of a product page:

Single product with one page checkout

An important tip, in your WooCommerce backend, click on Settings, and you’ll see the below:

Scroll to product option WooCommerce One Page Checkout

If a user adds/removes a product, the page will scroll to the notification section; see below for an example:

Auto scroll feature

Verdict On WooCommerce One Page Checkout

Using the WooCommerce One Page Checkout plugin could help you generate more sales; it’s straightforward enough to use, and there’s a lot more you can do with it; there’s detailed documentation should you like to find out more.

One drawback is the product archives, and of course, the shop archive. They’ll still follow the same three-step process, add to cartview cart, and checkout.

Another drawback is for those of you who would like to enable one-page checkout on every single product in one hit; you can’t. It’s a manual process at the product level, and if you have 1k plus in your catalog, prepare for numb fingers.

Direct Checkout for WooCommerce

There are lots of checkout-related plugins for WooCommerce; all aim to do one thing over another. Next, we’re taking Direct Checkout for WooCommerce plugin for a spin.

If you haven’t heard of this particular plugin, you may have heard of it under its previous name: WooCommerce Direct CheckoutThey had to change it due to legal reasons.

The plugin offers an easy way to remove checkout fields and a way to skip the cart page, so you’re left with a one-page checkout.

Available for free and with the option of a premium version should you need more bells and whistles. We’re testing the free version for the record. 

Once installed, options for the plugin are located in the WooCommerce menu.

General Settings for Direct Checkout

Direct Checkout for WooCommerce plugin

As you can see from the above, we have five options in the General tab:

Added to cart alert, this will redirect the cart notice to your checkout page.

Added to cart link, selecting yes here will redirect the view cart link to your checkout page.

Added to cart redirect, selecting yes here will affect the behavior of the add to cart button. When selecting yes, the next option will appear.

Added to cart redirect to, you can choose from Cart, Checkout, or a Custom URL.

Replace cart URL, choose from No, Checkout, or Custom URL.

Unlike the WooCommerce One Page Checkout plugin, the options you set here will be sitewide and affect all products.

Archive Settings

Direct Checkout for WooCommerce plugin archive settings

Replace Add to cart text, choose from yes or no, selecting yes, and the Replace Add to cart text in option will appear.

Using this option, you can nominate products you’d like to change the Add to cart text for, from Simple Products, Grouped Products, Virtual Products, Variable Products, and Downloadable Products.

Replace Add to Cart text content; here, you can add whatever text you like for the button.

Lastly, you’ll see an Add quick view buttonit’s greyed out as it’s only available in the premium version.

Why Change the Archive?

Imagine you have products with options; customers would need to navigate to the product page to choose their options and checkout.

Using the blanket approach of making all products within archives redirect to the checkout would not be the best way to handle things.

So why not only replace the add to cart text in Simple products and leave the rest. See below for an example:

Product archive differences

All of the simple products shown in the above screenshot will redirect to the checkout page.

The two products highlighted will redirect to the product page, where customers can choose options; once selected, they’ll be redirected to the checkout page.

For simple products, this solution is ideal for removing restrictions in the purchasing process and generate more sales for your online store.

Product Settings

Product settings for Direct Checkout

As this is the free version, there’s not much to choose from here; there are two options: Replace Add to cart text, and add text for the button.

These settings deal with the product page itself, not archives.

A large percentage of the options here deal with something called Quick Purchase. In the premium version, you can enable Quick Purchase; see below for a quick demo:

Quick Purchase

I’m sure we can all agree this looks good and helps customers checkout quickly.

Checkout Settings

Remove checkout fields

In a similar vein to the Product settings, options are limited here unless you have the premium version.

That being said, you can still make some changes to the checkout page to streamline things down.

Remove checkout fields; here, you can remove as many fields as you like from your checkout page.

Other removal options worth noting are: checkout shipping address, order comments, checkout policy text, terms and conditions, and even the checkout gateway icons.

Verdict on Direct Checkout for WooCommerce

Using a combination of redirecting to the checkout and removing fields, you can make the process incredibly easy for customers and boost sales.

The ability to set redirects site-wide, or disable on a specific product type, makes Direct Checkout hard to ignore. The plugin was straightforward to use and achieved the desired results quickly.

The free version is perfectly acceptable as it is if you’d like more bells and whistles, such as the Quick Purchase option, the premium version comes in at $19 for a single site license$39 for five site licenses, and $79.00 for unlimited.

If you’d like to find out more about the premium version of Direct Checkout, take a look at the demo here.

YITH WooCommerce One-Click Checkout Premium

As this post is all about the WooCommerce one-page checkout method, we’d be remiss if we didn’t mention the plugin YITH WooCommerce One-Click Checkout.

Wouldn’t it be great if you had an option to enable a one-click checkout at the product level and in shop pages/categories?

Well, this plugin aims to do just that, helping customers with a smooth path to checking out once they’ve found something they wish to purchase.

Unlike the other two plugins we’ve already mentioned, YITHWCOCC (I know it’s a mouthful) has its own settings panel once activated:

One click checkout settings

Let’s take a look into YITHWCOCC; you know what I’m going to call it YWOCCit’s easier to mention it this way. 

There’s quite a lot to get through here settings wise, so let’s break things down; first, let’s split the settings page into sections so that you can follow more easily.

YWOCC Settings Part One

YITH WooCommerce One-Click Checkout Premium settings part one

To enable a WooCommerce one-page checkout, we’ll need to make some changes to the settings. YWOCC, makes life very easy here, and everything is clearly labeled, let’s dive into each one.

Activate after first order, here you can enable the “One-Click Checkout” after the customer places an order.

Activate with link, setting this to yes, and you’ll see the below on a WooCommerce product page:

WooCommerce one page checkout link

Activate in shop page, activating this option will see the link on product archives, think shop page, categories, and anywhere that houses products:

WooCommerce one page checkout in archives

Activate for guest; using this setting; you can enable one-click checkouts for guest accounts, which is a valuable addition if you’re looking to streamline things and create a WooCommerce one-page checkout experience.

Exclude Categories, here; you can search for categories you’d like to exclude the one-page checkout for.

YWOCC Settings Part Two

WooCommerce one page checkout settings part two

Although we’ve split this into two parts, all the settings are on one page, very straight-forward settings-wise so far, and a clean user interface.

We’ll save Invert Exclusion for later, and there’s a reason for that; for now, let’s cover the rest of the options.

Redirect after creating the order; here, you have four different options to choose from.

To product pageTo payment pageTo thank you page, or To custom pageIn our case and the whole point of us talking about WooCommerce one-page checkouts, it makes sense to redirect to the payment page.

It is good to know there are other options available should you need to use them.

Choose default shipping address; here, you can choose from none, billing address, or shipping address.

The following two options, Text of activation link and Button label, allow you to enter different text on your store’s front-end.

All the other options deal with the color of buttons, text color, and whether you’d like to show a form divider.

It’s worth noting that if you’d like to show a button instead of a link to show the one-click checkout button, you can; all you have to do is set the Activate with link to no.

See below for an example of the button activated instead of the link in archive/shop pages:

WooCommerce One click button in archive

For individual product pages, see below:

WooCommerce one click checkout product level

On individual product pages, the button looks clean; on the shop page/category pages, it seems messy.

They are easily rectified by changing the text on the button using YWOCC settings, or are they? See below:

Checkout button needs some work

It’s the checkout icon that’s causing issues and the products’ layout; here, our products are in a row of four; we need to add more space, so the button doesn’t look messy.

To change the layout of the shop pages, you’ll need to use the native WordPress customizer. To access this, view your website from the front end; in the WordPress admin bar, click on Customize.

Once the customizer has loaded, click on WooCommerce, then Product Catalog, see the below example:

adjust the layout of the shop page

Here we’ve changed the Products per row to three and the Rows per page to three; this is how it looks on the front end:

button alignment

Clean and clear. The main issue with YWOCC is that there is no way to disable the cart icon from the button. So if you have and require more products in a row, you’ll need to hack it a little.

We promised no code in this guide, and unfortunately, we’ve had to renege on that, don’t worry, we’ll show you how to remove the icon easily!

How to Remove the Cart Icon in YITH Woocommerce One-Click Checkout

Using the Google Chrome inspector tool and hovering over the icon, we can see the icon has the following CSS code:

.yith-wocc-button:before {
font-family: “occ-icons”;
content: “\e805”;
display: inline-block;
vertical-align: middle;
padding: 0 5px;
}

The easiest way to get get rid of the icon is to use the following CSS:

.yith-wocc-button:before {
display: none;
}

Access the WordPress customizer, and in the menu on the left, click on Additional CSS; see below for an example:

cut and paste

Now, let’s change the layout back to four columns/rows and see what happens:

Cart icon gone

Much better, but it could still do with some work to make it more eye-catching; using the color options, we can make the button more prominent:

Checkout now buttons

We don’t think we need a big red box highlighting the buttons, they standout themselves!

Using the CSS hack and the Show form divider setting, our Checkout Now buttons are very obvious and should help generate more sales.

Excluding Products From One Click Checkout

Adding a WooCommerce one-page checkout system is all well and good, but sometimes, you might have specific products you’d like to prevent from using this method.

Thankfully, YWOCC allows you to do this with a Product Exclusion list; see the below example:

Excluding products from WooCommerce one page checkout

Here you can manually add products to an exclusion list by typing in a search query. Add as many as you like here, and whatever you add, the one-click checkout will be disabled for customers on the front-end of your store.

In the main settings for YWOCC, and something we mentioned earlier, is an option called Invert Exclusion.

Once you’ve added the products you’d like to exclude from a one-click checkout, you can invert them.

This means all products in your exclusion list will invert to being enabled; see below for an example:

Inverted selection

As we added the Beanie to the exclusion list and used the Invert Exclusion option, only products on the list will display the one-click checkout.

Existing Customers & One Page Checkouts

We know we can enable a one-page checkout for guests, but what about existing customers? It sure would be great to allow them to have the option of checking out quickly:

One click checkout for existing users

Using the settings, we can enable this option for all users, existing customers, and guest customers.

Existing shoppers have an option on their My Account page, enable One-Click Checkout, making their lives easier, as well as adding a new shipping address for future purchases.

Using a Shortcode to Display One-Click Checkout in a Blog Post

YITH Documentation isn’t the best for the One-Click Checkout plugin; in fact, it wasn’t practical as a new user. See below from the documentation page:

shortcode explanation

I wasted a lot of time tinkering with this and eventually solved it. Adding the shortcode [yith_wocc_button] does nothing on its own it requires a parameter to display. With no apparent structure of how to add a parameter, I lost a few hours.

The correct structure is thus:

[yith_wocc_button product=”34″ label=”Buy Now!”]

Where product=”34” is the product we’d like to display, and label=”Buy Now!” is the text displayed on the button:

Output of custom parameter

Using this method, you could add one-click checkout products to blog posts, useful if you write blog posts about new products available to buy in your store.

How Do You Find the Product ID for the Shortcode?

To save you the store owner some time, here’s how to find the product ID you’d like to display in the shortcode.

Go to Products in your WooCommerce admin, then hover over a product, and you’ll see the below:

How to find product IDs in WooCommerce

Make a note of the product ID and add it to the parameter to display a one-click checkout button.

A shame, I had to jump through hoops to figure this out; hopefully, I’ve saved you some time if you decide to use YWOCC!

Verdict On YITH WooCommerce One-Click Checkout

The plugin works well; the settings are straight-forward and to the point. If you’re looking for a WooCommerce one-page checkout solution that’s easy to use, YWCOC is a good fit.

Using the hack mentioned or adjusting your product archive layout can help with the display of buttons. It would have been nice to have an option to remove the icon, a minor quibble.

It’s also worth noting that you won’t see anything on your front-end as an administrator using the plugin, which may seem weird.

You’ll need to create a customer account and use a new browser window to see how it looks, this in part, is because the plugin targets the user role of Customer instead of an administrator.

So remember to check the front-end in a private browser. Other than that, it’s a pretty solid solution for adding a one-page checkout to your WooCommerce store.

Pricing for YITH WooCommerce One-Click Checkout comes in at $69.99 for a single site license, six sites at $149.99, and those of you who run a development agency, a thirty-site license is available at $249.99.

For more information on YWCOC or view a demo, take a look here for details.

Creating a WooCommerce One Page Checkout for Digital Downloads

The plugins, as mentioned earlier, can help you make a WooCommerce one-page checkoutbut what if you’re selling digital downloads?

Do you need all the information that the standard WooCommerce checkout page requires?

If you’re selling music online, do you need a customer’s physical address or, for that matter, a telephone number?

In short more than likely not, so how can you streamline the checkout process further? Well, by now, you’ve probably guessed, there are plugins for that.

YITH WooCommerce Quick Checkout for Digital Goods Premium

Another tongue twister granted this plugin aims to offer a quick checkout for digital downloads. I think we’ll refer to this one as YWQCDGthat’s much better.

Why mention YWQCDG? Well, it can work hand in hand with their One-Click Checkout plugin; more on that later. For now, let’s take a look at the settings.

Once installed, the settings page is nowhere near as in-depth as the YITH WooCommerce One-Click Checkout plugin. It doesn’t need to be:

YITH WooCommerce Quick Checkout for Digital Goods Premium

We’ve changed two items in our store to digital downloads to test this particular plugin out.

Looking through the settings, the first one deals with enabling quick checkout on all digital products.

The second and perhaps more interestingly option Fields shown, this setting allows you to add or remove specific fields from displaying on our store’s front-end.

The email address is a default option, and there’s no need to add it to your quick checkout form.

So in our case, we only want the First Name/Last Name shown in our checkout; we don’t care about the physical address or phone number; we don’t need them.

Hide order notes, enable or disable. Do we need customers to make notes on their digital downloads? No, it’s not like we’re going to ask them to leave it with a neighbor in case they’re not in.

Enable quick checkout on; this section allows you to enable quick checkout on all downloadable/virtual products.

Show in product page; selecting this option will show the quick checkout on the physical product page. See below for an example:

digital downloads quick checkout

It’s not the prettiest of solutions for a one-page checkout, that in part is due to the fact it’s using the short product description space.

If you have a short product description already and use a sidebar for your store, this could look ugly in truth.

Add to cart; enabling this will add products to the cart automatically; I’ll be honest. I can’t figure this out, tested and retested, and cannot find what it does.

Enable for all users, a toggle for showing to logged in users as well as unregistered customers.

Quick Checkout List

In a similar vein to their other plugin, YWQCD offers a quick checkout list; here, you can add products on an individual basis, per category, or by product tag:

Quick checkout category tag or individual

Useful if you have specific products, categories, or tags that house your digital downloads.

A Quick Hack for WooCommerce Quick Checkout for Digital Goods

We’ve mentioned that the output isn’t the greatest; what if you wanted to use the short production description area to promote some features and sell the product?

We can use a shortcode for this purpose; firstly, we’ll need to stop the automatic display in product pages:

Turn off quick checkout

Next, we’ll need to add a shortcode to the product page. Using the shortcode generator as below:

Shortcode example

We’ve searched for a product in our case, Album (as it’s a digital download), and added the shortcode under our title. This is how it looks on the front-end:

Shortcode display

Again not the prettiest solution; however, we can use our short description to push the product.

You can use the shortcode anywhere on your website, not only on a product page, and there is a caveat with this method (taken from YITH website):

When users access the page where you have added the shortcode, the cart is immediately emptied and re-filled only with the product selected by the admin.

So it’s far from an ideal solution and more than likely best used only for a store selling digital downloads, not a mix of physical products and downloads.

Verdict on YITH WooCommerce Quick Checkout for Digital Goods

The main issue with this plugin is it doesn’t change the shop archive buttons, and they’ll still display the add to cart button, so it’s not precisely a WooCommerce one-page checkout system.

YWQCD is excellent at what it does in terms of removing the fields required on digital/virtual products, the main drawback?

Using the product short description as the output space, it’s unsightly on a single download product page. Sure, you can work around it with a shortcode, but it’s not ideal.

Pricing-wise, it’s a little steep, coming in at $69.99 for one site, $179.99 for six, $299.99 for thirty sites.

You can find more information on the WooCommerce Quick Checkout for Digital Goods here.

Combining YITH WooCommerce One-Click Checkout & Quick Checkout for Digital Goods

To create an actual WooCommerce one-page checkout experience and remove the required fields for digital downloads, you can combine the two plugins.

You’ll remember we discussed the WooCommerce One-Click Checkout plugin, enabling that alongside YWQCD means that our digital downloads will now be available for a one-page checkout.

Users can click the Checkout now button and be redirected to the cart where the fields are minimal for digital downloads as below:

One-click checkout digital downloads

Entirely down to you whether or not you combine the two solutions or opt for one over the other, you know your store better than anyone, and we hope we’ve highlighted what’s possible using either of the plugins.

Wrapping Things Up

We’ve covered some of the more prominent WooCommerce one-page checkout solutions and hopefully given you some insight into what they offer.

Each solution has its own way of handling things; by now, you’ll have a better idea of whether or not they’re suitable for your WooCommerce powered store.

There’s more we could do, and a one-page checkout might not be suitable for your needs; next time, we’ll be looking at some plugins that deal with removing fields in the WooCommerce checkout, streamlining things, and helping you sell more.

Get Started with Perfect for Free

Upgrade your store’s checkout experience with our cutting edge UX/UI in about two minutes to instantly increase your conversion rate. Discover a whole suite of additional benefits without touching a single line of code.

*Free Beta may end at any time.

Try Perfect Today

Start increasing your online store’s conversion rate and making more money.

Try Perfect Today

Start increasing your online store’s conversion rate and making more money.