WooCommerce One Page Checkout The Ultimate Guide

Featured Image for 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. He’s sending rockets into space, for crying out loud.

It’s hard running an online store regardless of what platform you use, be it WooCommerce, Shopify, or BigCommerceIt 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.

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 we’re harsh for saying that the WooCommerce checkout page needs some work. It does; stern but fair.

Don’t get us 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 we’ve added a few of the products to our hypothetical cart. What wonders await with the standard WooCommerce checkout page.

Screenshot of the standard WooCommerce Checkout Page

That’s a whole lot of information required from a user just to buy a hoodie; you’re not about to file for benefits or something.

What Have We Got?

  1. First name / Last name – 1 field each
  2. Company name – 1 field
  3. Country / Region – 1 field
  4. Street address – 2 fields
  5. Town / City – 1 field
  6. State – 1 field
  7. Zip – 1 field
  8. Phone -1 field
  9. Email address – 1 field
  10. 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 address throws up another nine fields.

You’ll see your order on the right-hand side, itemizing your cart and any associated costs for shipping and taxes. In this example, we’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 we mentioned, 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.

Screenshot of Customize Store Button

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

Screenshot of WooCommerce in Twenty Twenty-One's Customizer

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

Screenshot of Checkout in Customizer

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

Screenshot of Customizer for the Company Info

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 our case, we 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

Whichever WordPress theme you’re using, always check the WordPress customizer; chances are the theme you are using has 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. Those are all opportunities for checkout abandonment.

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:

  • WooCommerce One Page Checkout Plugin(1);
  • Direct Checkout for WooCommerce(2);
  • YITH WooCommerce One-Click Checkout Premium(3); and,
  • YITH WooCommerce Quick Checkout for Digital Goods Premium(4).

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 display a checkout all in one swoop.

See the example below.

Screenshot of WooCommerce One Page Checkout

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

Product Table Screenshot in WooCommerce One Checkout

Next, the Product List view.

Screenshot of the product list view in One Page Checkout for WooCommerce

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 Screenshot in WooCommerce One Page Checkout

Lastly, the Product Table view.

Screenshot of the Table View of WooCommerce One Page Checkout

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 generating 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.

Screenshot on how to enable one page checkout for a single product

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

Screenshot of One Page Checkout

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

Screenshot to allow auto-scroll on WooCommerce One Page Checkout

If a user adds/removes a product, the page will scroll to the notification section. See below for an example.

GIF for one page 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 (5) 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 (2) 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 Checkout. They 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

Screenshot of Direct Checkout for WooCommerce

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.

Direct Checkout Archive Settings

Screenshot of plugin archive settings for Direct Checkout for WooCommerce

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 button; it’s greyed out as it’s only available in the premium version.

Why Change the Archive Settings for Direct Checkout?

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.

Screenshot of Product Archive differences for Direct Checkout

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 generating more sales for your online store.

Direct Checkout Product Settings

Screenshot of the 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.

GIF of quick purchase in Direct Checkout for WooCommerce

We’re sure we can all agree this looks good and helps customers checkout quickly.

Direct Checkout Settings

screenshot of 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 (7).

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 (3).

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 (it’s a mouthful) has its own settings panel once activated.

Screenshot of YITH One-Click Checkout

Let’s take a look into YITHWCOCC or YWOCC for short; it’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 it more easily.

YWOCC Settings Part One

Screenshot of General Options for YITH One-Click Checkout for WooCommerce

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:

Screenshot of link to activate one-click checkout

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

Screenshot of activate one-click 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

One-Click Checkout Settings Part Two Screenshot

Although we’ve split this into two parts, all the settings are on one page. They are straightforward settings-wise so far; and have 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.

Screenshot of One-Click Button in Archive

For individual product pages, see below.

Screenshot of one-click button at 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.

screenshot of one-click checkout button needs css

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:

screenshot on adjusting shop catalog

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.

screenshot of shop 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 make an exception. 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.

screenshot of additional css for shop buttons

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

screenshot of shop archive without the cart icon

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.

screenshot of the green checkout now buttons custom css

We don’t think we need a big red box highlighting the buttons, they stand out 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.

screenshot of YITH One-Click Checkout exclude products

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.

screenshot of the inverted selection in YITH One-Click Checkout

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.

Screenshot of settings for One-Click Checkout for existing customers

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 add 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 (6).

Screenshot of YITH's shortcode description
Find the link to the documentation in Footnote 6.

We 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, we lost a few hours.

The correct structure is:

[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.

Screenshot of Buy Now button in a blog post via YITH shortcode

Using this method, you could add one-click checkout products to blog posts which is 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.

Screenshot of how to find a product ID

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

It’s a shame that we had to jump through hoops to figure this out. Hopefully, we’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 straightforward 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 (3) comes in at $69.99 for a single site license, six sites at $149.99, and for those of you who run a development agency, a thirty-site license is available at $249.99.

Creating a WooCommerce One Page Checkout for Digital Downloads

The plugins, as mentioned earlier, can help you make a WooCommerce one-page checkout, but 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. We’ll refer to this one as YWQCDG; that’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.

Screenshot Digital Goods settings for YITH WooCommerce Quick Checkout

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.

Screenshot of YITH Digital Downloads on Quick Checkout Page

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. We’ll be honest. We 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.

screenshot of categories and tags in YITH Quick Checkout

It’s 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.

screenshot of toggle to turn off YITH Quick Checkout

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

Screenshot of quick checkout 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.

Screenshot of YITH Quick Checkout Page

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.”

YITH (4)

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 (4) on their website.

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.

Screenshot of Billing Details on YITH Quick Checkout Page

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.

Which WooCommerce OnePage Checkout Will You Use?

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.

Of course, we’re biased but we think our checkout solution is well-suited for any WooCommerce store. What’s better? Our checkout solution is completely free to the store owner thanks to our partnerships. Register for your free account today.

Standardizing eCommerce.

Article Footnotes

  1. WooCommerce One Page Checkout Plugin
  2. Direct Checkout for WooCommerce
  3. YITH WooCommerce One-Click Checkout Premium 
  4. YITH WooCommerce Quick Checkout for Digital Goods Premium
  5. WooCommerce One Page Checkout Documentation 
  6. YITH One-Click Shortcode Documentation
  7. Quadlayers Direct Checkout Demo

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.