If you're creating an order form for your e-commerce store, then you're likely to want a WooCommerce one-page checkout too. Keep reading to learn how to enable WooCommerce one-page shopping.
WooCommerce one-page checkout lets customers select products and complete their purchase within a single page. One-page shopping is excellent for user experience because it's fast, so the customer is less likely to get frustrated and you're less likely to have a high cart abandonment rate.
The perfect WooCommerce one page checkout plugin needs two things:
- An easy way to view and find products, select options, and add them to their order without leaving the page. This involves listing WooCommerce products in a quick one-page order form.
- A WooCommerce checkout form - either underneath the product order form or in a popup on the same page.
Unfortunately, setting up WooCommerce one-page shopping isn't as easy as it sounds. Most order form plugins meet the first requirement but come short with the second one. And the official WooCommerce.com extension for one-page checkout isn't great at displaying products.
This tutorial will tell you how to meet both requirements - no coding required! You'll learn how to list products in a quick order form, with a choice of two types of WooCommerce single page checkout.
But first, let’s cover the basics – what is a one-page checkout?
What is WooCommerce one-page checkout?
As I’ve mentioned in the intro, WooCommerce single page checkout allows customers to select products and complete their purchases – all on one page. While this may seem like it should be a standard feature of WooCommerce, it’s not, as the traditional process is much lengthier.
Typically, a consumer needs to add products to their shopping cart then go to the cart page and then go to the checkout page. There, they need to fill in their personal information, payment information, shipping address, choose shipping options, etc.
So, there are multiple steps a customer needs to go through until they get to the point of making a purchase. And, in the simplest of terms, this is bad. The more steps there are, the more likely the customer is to abandon their cart somewhere along the way.
A WooCommerce single page checkout encompasses all of these steps on one page, allowing for a faster checkout experience and lowering the chance that a customer will give up on a purchase. All in all, one-page checkout allows the customer to make a quick purchase.
Why do I need a WooCommerce one-page checkout plugin?
There's a very basic principle behind letting customers choose products and complete their purchases on a single page. WooCommerce one-page shopping is all about reducing the length of the order process and speeding up the customer journey. In addition, it can also help with reducing your cart abandonment rate.
Research shows that 10% of abandoned carts happen because the checkout flow is too long. Customers simply get fed up and go elsewhere! The number of clicks is a big factor. The more pages the customer has to click through to make a purchase, the less likely they are to complete it.
You can speed up the purchase process by using a WooCommerce single-page checkout plugin to list your products and allow customers to complete their journey. This type of one-page shopping helps increase conversion rates, resulting in more sales for you. You're happy, the customer's happy - everyone wins!
That one-page checkout provides a much better user experience and increases conversions is definitely not new information. This is why even WooCommerce has created its own one-page checkout plugin. But there’s a catch.
The problem with the WooCommerce one-page checkout plugin
The official WooCommerce one page checkout plugin lists products in a very basic way, which is fine for displaying one product or a small number of products with a checkout form underneath. However, the official WooCommerce one-page checkout plugin is useless for product selection if you have a large number of products and product types. And if you want to enable your customers to search, sort, and filter the list of products, the template fails to deliver.
Any eCommerce store with numerous products needs to seriously consider user experience and make things easier for the customer. This involves listing products in a user-friendly way. They have to be easy to find. All the important product data needs to be visible at once, without having to visit multiple pages. Most importantly, customers need to be able to choose quantities and compare variations without too much hassle. Most built-in templates will give you limited capability to achieve this.
Luckily, there are two easy ways to improve on this. I'll tell you about them next so that you can choose which one is best for your WooCommerce store.
2 ways to create a WooCommerce one-page checkout
So far, you've learned how your store can benefit from WooCommerce one-page shopping, as well as how a WooCommerce one-page checkout can optimize your customer journey. Now, we'll explore two ways you can implement one-page checkout in your online store.
Method 1: Display a popup checkout on your main shop pages
I think that the most user-friendly way to enable one-page checkout in WooCommerce is to display the checkout in a popup window on the same page as your products. That way, you don't add clutter to your shop pages - and yet customers can quickly check out on the same page where they add products to their cart.
With this type of WooCommerce single-page checkout, the checkout form appears in a popup instead of below the list of products. In this case, the customer journey looks like this:
- The customer visits the product table page and uses the search, sort and filtering to find the products they want.
- They select the products and add them to their cart.
- A popup immediately appears over the product table. The customer makes any changes to the selected products, enters their details and completes the purchase without having to leave the page.
You can easily add this type of WooCommerce one-page checkout with the Fast Cart plugin. This lets you display a popup cart and/or complete checkout on the same page as your products. When a customer adds a product to the cart, you can either display the popup on-page checkout automatically, or let them click on a floating cart icon to launch it.
Popup one-page checkout setup instructions
- Install WooCommerce Fast Cart on your WordPress site.
- Go to the WooCommerce Fast Cart settings page at WooCommerce → Settings → Fast Cart.
- Choose how you want the fast cart to work. In particular, I recommend enabling the 'Direct Checkout' and 'Auto Open' options. Together, these make the checkout appear as soon as customers add products to the cart. It's the fastest way of using the plugin for a WooCommerce one-page shopping experience.
Method 2: List products in a searchable table with one-page checkout underneath
I realise that when you Googled for one-page checkout solutions (if that's how you found this article!) then you were probably imagining adding the checkout below the list of products. That's possible too, and I'll tell you how to do it now.
At the start of this article, I told you about the limitations of using the WooCommerce One-Page Checkout extension on its own. The main problem was that it lists products in such a basic way, with no way to search or filter them. That's where WooCommerce Product Table comes in.
This bestselling WooCommerce one-page checkout plugin lists products in a searchable order form, allowing for a quick browsing experience. You can list hundreds or even thousands of products, with quick search and sort filters so that customers can easily find what they want. After adding products to their order, customers can add their details and checkout, directly on the order form page!
The customer journey
This option provides a different customer journey from method 1:
- The customer visits the product table page and uses the search, sort and filtering to find the products they want.
- They choose the products and add them to their cart.
- Once the products are added to the cart, your customer can check out using a WooCommerce checkout form directly below the product table. This is where they can review and modify their order, add their name and address, choose shipping and payment methods, and complete the purchase from the single page checkout.
You'll need two plugins to implement this method:
- WooCommerce Product Table to list products in a searchable one-page order form. This will allow you to list all your products in a single easy-to-navigate table which you can place on any page. You can choose which columns of information to include, add product variation dropdowns, and even add a search box and filters. The lazy load option lets you list hundreds or even thousands of products, neatly separated by pagination links.
- WooCommerce One-Page Checkout to display a checkout form underneath the list of products.
Together, this will create a seamless checkout experience for your customers. They won't have to switch between pages to find each product they are interested in. It's true one-page shopping, regardless of how many products you have.
Setup instructions for WooCommerce one-page checkout
Step 1: install WooCommerce Product Table
- Install the WooCommerce Product Table plugin on your WordPress site.
- Once activated, head to WooCommerce → Settings → Products → Product Tables and enter your license key.
- Look through the list of product table options and choose the ones you need. You can basically set up your product tables however you like. Here are some tips for creating an effective WooCommerce one-page shopping experience:
- If you want to list lots of products, you'll probably want to choose the 'Checkbox' add to cart option. This adds a multi-select option so that customers can add lots of products to the cart at once.
- If you're selling variable products, then choose either the 'dropdown' or 'separate' variation options. This lets customers choose variations directly in the order form instead of having to click through to the single product page. (After all, that would defeat the purpose of a WooCommerce one-page checkout!).
- Enable the 'Quantity' option so that customers can buy more than one of each product.
- To prevent people from leaving the one-page order form and clicking through to the single product page, enter 'none' in the 'Links' option. This disables links to the single product page.
- Finally, here are some additional recommendations:
- Do NOT enable 'Ajax Cart' in the 'Add to cart behavior' option. By leaving this box unticked, the page will reload when customers add products to the cart, displaying the one-page checkout underneath with the correct products.
- Keep the number of rows per page fairly low so that customers don't have to scroll too far to view the checkout under the table. If you have more products than the number of rows, then pagination links will appear under the table so that they can view more products without leaving the page
Step 2: create a landing page listing your products
This is where we create the page that we'll be using as our WooCommerce single-page checkout:
- Create a new page (Pages → Add New).
- Add a shortcode to the page:
[product_table]. This will list all your products with the options you chose on the plugin settings page. There are lots of options to edit the shortcode, for example, if you want to list specific products only. You can add as many product tables as you like to the page - just add the shortcode more than once.
Bonus: Add quick view buttons (optional)
The beauty of WooCommerce one-page shopping is that everything happens on one page. Product tables are great because they're an opportunity to show more information about each product.
However, what happens if you want to show more than will fit into a product table - but you still want the benefits of a WooCommerce one page checkout?
The solution is to add quick view buttons to the product tables. You can do this by installing WooCommerce Product Table's sister plugin, WooCommerce Quick View Pro. Naturally, it has full compatibility with the Product Table plugin. Customers can use these buttons to view additional information about a product in a quick view lightbox, without being taken away from the shopping page.
Step 3: Add one-page checkout to WooCommerce
Next, you need to add one-page checkout to your product table page.
- Install the WooCommerce One Page Checkout add-on.
- Edit the product table page that you created in Step 2, above.
- Add the following shortcode underneath the product table shortcode:
Your finished WooCommerce order form page should look something like this in the WordPress back end:
This will create a WooCommerce single-page checkout with a product table at the top, and the checkout form below.
Which type of WooCommerce one-page checkout is better for me?
Now we've looked two methods for adding one-page checkout to WooCommerce. Method 1 involves displaying a popup checkout on the same page as your products. In contrast, method 2 adds a checkout form underneath a searchable product order form.
Both are good layouts from a functionality standpoint. However, you may want to consider your customer's behavior and preferences when choosing the specific WooCommerce single-page checkout you want. If your customers usually buy a single or just a couple of items per session, you may want to go with the pop-up checkout option. It's fast and seamless and allows for a very quick checkout:
On the other hand, if your customers tend to purchase several different items at a time or would prefer a more traditional checkout experience, you may want to opt for the second option and have the checkout form below your products. This way, they can take their time to add products to their cart one by one (or remove products, if they change their mind) and scroll down to the checkout form once they're ready to place the order.
Bonus: add and edit WooCommerce checkout fields
If you want to edit the fields on the WooCommerce checkout, you can easily do this with WooCommerce Checkout Field Editor.
This handy plugin is perfect if you want to streamline your checkout process or even add custom checkout fields. For example, you can use it to collect extra information from each customer. This will appear on the WooCommerce one-page checkout, whether you've added it below the list of products or in a popup checkout.
You can also use the editor to write more persuasive calls to action and change the purchase button - instead of the standard 'buy now' CTA, you can easily do some A/B testing to find out what works best for your customers.
Can I disable the WooCommerce cart completely?
If you're using Method 1 (i.e. Fast Cart with a popup checkout), then you can easily disable the cart. Simply enable the 'Direct Checkout' and 'Skip Cart Page' options on the plugin settings page. That way, customers can only access the checkout and there are no back doors to the cart page.
However, this is a bit trickier if you're using Method 2. Even though the checkout appears below the list of products, there are still ways for customers to access the cart page. For example:
- The cart link will still appear in your navigation menu and/or header (depending on your theme and menus).
- When the customer adds products to the cart, they will see a success message linking to the cart.
- If your WooCommerce order form page includes a sidebar with the 'WooCommerce Cart' widget, then the contents of the cart will show after they add products. This widget includes links to the cart and a separate checkout page.
It's absolutely fine to use these checkout features alongside one-page checkout. It gives customers a choice. For example, if they want to edit the contents of their cart, they can click through to the cart page and check out afterwards. This is handy because WooCommerce one-page checkout lists the products in the cart without any means to edit them.
However, some online store owners prefer to completely disable the WooCommerce cart and just use the one-page checkout. That's fine too. There are 2 ways to do this:
Option 1 - redirect cart to checkout (non-technical solution)
The simplest solution is to add a 301 redirect to stop people from accessing the cart page. You can do this by installing the free Redirection plugin and redirecting the cart page to wherever you like.
For example, you might redirect the cart page to the WooCommerce checkout. This is the checkout page defined in the WooCommerce settings, and is separate from the one where you've added a product table.
Alternatively, you could add an anchor link to a point underneath the product table on your one-page checkout page, and create a redirect so that people are taken there when they click on a cart link. When a customer adds a product to the cart and sees the success message with 'View Cart' link, clicking it will scroll them down the page to the WooCommerce one-page checkout under the product table.
Option 2 - hide all cart links (requires coding)
For a more comprehensive solution, you can write some custom CSS code to hide the success message and all the cart links.
We have partnered with Codeable to provide customization services for our plugins. If you don't know how to hide the cart links yourself, then I recommend posting a job on Codeable. Their WordPress experts will send you a quote.
Get the best WooCommerce one-page checkout plugin now!
In conclusion, a WooCommerce one-page checkout can greatly enhance the shopping experience for your customers. It can increase your conversion rate, and ultimately boost your online sales.
By streamlining the checkout process and reducing the number of steps, you can eliminate unnecessary barriers. This makes it easier for customers to complete their purchases.
With the right implementation and customization, a one-page checkout can be a powerful tool for any WooCommerce store looking to improve their checkout process and drive growth. So, take the time to consider which type of one-page checkout is best for your business.
To add one-page checkout to WooCommerce, you can either:
- Use WooCommerce Fast Cart to add a popup checkout to your main shop pages.
- Use WooCommerce Product Table to list products in a searchable order form; and the One-Page Checkout plugin to display the checkout form underneath.
Both options offer a great way to reduce cart abandonment by optimizing how customers complete their purchases. Choose the right plugins for your needs, and make your customers happy 😄