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 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.
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.
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?
- 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 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.
Once you’ve clicked on Customize, you’ll see the below options:
You’ll want to click on the WooCommerce option in the native WordPress customizer.
Using the WordPress customizer, we can narrow down a few fields from showing.
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.
In our example, we’ve added products manually; let’s take a look at the Product Table option.
Next, the 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.
Lastly, the Product Table view.
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.
Clicking the One Page Checkout checkbox enables the checkout form inside of a product page.
An important tip, in your WooCommerce backend, click on Settings, and you’ll see the below.
If a user adds/removes a product, the page will scroll to the notification section. See below for an example.
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 cart, view 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
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
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.
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
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.
We’re sure we can all agree this looks good and helps customers checkout quickly.
Direct Checkout Settings
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.
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
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:
Activate in shop page, activating this option will see the link on product archives, think shop page, categories, and anywhere that houses products:
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
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 page, To payment page, To thank you page, or To custom page. In 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.
For individual product pages, see below.
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.
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:
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.
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.
Now, let’s change the layout back to four columns/rows and see what happens.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
Next, we’ll need to add a shortcode to the product page. Using the shortcode generator as below.
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.
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.
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.
