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.
A true one-page checkout lets customers select products and complete their purchase on a single page. One page shopping is excellent for user experience because it's so fast, and the customer won't get fed up and abandon their cart.
The perfect WooCommerce one-page checkout needs these things:
- An easy way to view and find products, before selecting options and adding them all to one page. This involves listing WooCommerce products in a quick one-page order form.
- A WooCommerce one-page checkout underneath the product order form.
Unfortunately, setting up WooCommerce one page shopping isn't as easy as it sounds. Most order form plugins meet the first requirement but don't work with one-page checkout. 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!
The problem with the WooCommerce One-Page Checkout plugin
The official WooCommerce plugin for one page checkout lists products in a very basic way. It's fine for displaying one product or a small number of products with a checkout form underneath. However, it's useless if you have a large number of products and want to use WooCommerce one page checkout. And if you want to enable your customers to search, sort and filter the list of products, forget it.
All e-commerce stores with lots of products need to make things easier for the customer. This involves listing products in a way that maximizes conversions. 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 variations from the one-page checkout.
That's where WooCommerce Product Table comes in. This bestselling plugin lists products in a searchable order form above the one-page checkout. You can list hundreds or even thousands of products, with quick search, sort and filters so that customers can easily find what they want. They can then scroll down below the table and checkout, directly on the order form page!
Keep reading to learn how to set up the Product Table plugin with WooCommerce one page shopping. There are full written instructions, plus a video tutorial.
Why do I need a WooCommerce one page checkout plugin?
Before we get started, it's worth thinking about whether your WooCommerce store actually needs one-page checkout.
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, speeding up the customer journey. Using a WooCommerce one page checkout can reduce your cart abandonment.
Research shows that 10% of abandoned carts happen because the checkout process 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 buying process by listing products on the same page as the WooCommerce checkout. This type of one page shopping helps to increase conversions, resulting in more sales for you. You're happy, the customer's happy - everyone wins!
You'll also be able to create new landing pages with a one page checkout on them. Again, this makes for a faster checkout. An improved shopping experience results in increased conversions.
How does WooCommerce Product Table work with one-page checkout?
You can use one-page checkout with our WooCommerce Product Table plugin. I'll tell you how to do this in a minute.
WooCommerce Product Table adds more sophisticated options for listing your products. You can choose which columns of information to include, add product variation dropdowns, and even add search box and filters. The lazy load option lets you list hundreds or even thousands of products, neatly separated by pagination links. And all this appears directly on the one-page checkout. It's true one-page shopping, regardless of how many products you have.
This transforms the buying process as follows:
- The customer visits a page that lists some or all of your products using WooCommerce Product Table.
- They use the table's search, sort and filters to find the products they like, tick the ones they want to buy, and then click the 'Add Selected to Cart' button.
- Once there are products in the cart, customers can check out on the same price via a WooCommerce checkout directly below the product table. The customer just needs to scroll down to the one-page checkout where they review their order, add their name and address, choose shipping and payment methods, and complete the purchase. And if you're using the official One-Page Checkout plugin, then customers can even edit and delete products without clicking elsewhere. All on one page!
How to set up WooCommerce one-page checkout (3 easy steps)
So far, you've learned why your store needs a WooCommerce one page checkout plugin. You also understand how one page shopping speeds up the customer journey by letting customers choose products and purchase from a single order form page. Next, I'll tell you how to set it up.
Step 1 - Install WooCommerce Product Table
- Get WooCommerce Product Table and install it on your site (Plugins → Add New).
- Once activated, head to WooCommerce → Settings → Products → Product Tables and enter your license key.
- Look through the list of product table options and choose all the ones you need. You can basically set up your product tables however you like. Here are some tips for creating effective WooCommerce one page shopping:
- DO NOT tick the 'Ajax Cart' option for 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.
- If you want to list lots of products, you'll probably want to choose the 'Checkbox' add to cart option. This adds a neat 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 (which would defeat the purpose of a WooCommerce one page checkout!).
- Tick the 'Quantity' options so that customers can buy more than one of each product/variation.
- If you want to prevent people from leaving the one page order form and clicking through to the single product page, add 'none' for the links option. This disables links to the single product page.
- I recommend keeping the number of rows per page fairly low so that customers don't have to scroll too much 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 pages.
We'll use WooCommerce Product Table to list your products in step 3. But first, you need to install the One Page Checkout plugin.
Step 2 - Install WooCommerce One Page Checkout
The official WooCommerce One Page Checkout extension adds a checkout underneath your product tables. It works just like a normal WooCommerce checkout. Since you're skipping the cart page, it also provides extra cart-like features such as the ability to change quantities and remove quantities from the checkout form.
Step 3 - Add the checkout under your product tables
Next, create the page which you'll use for your one page WooCommerce product list and checkout (Pages → Add New):
- At the top of the page, add some simple instructions for your customers. This should be a friendly sentence telling them to choose their products, add them to the cart, and then scroll down to checkout underneath.
- Add a shortcode to the page:
[product_table]. You can add this using the Classic WordPress editor or to a Gutenberg block. 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.
- Add the following shortcode underneath the product table shortcode(s):
Your finished WooCommerce order form page should look something like this in the WordPress back end:
This will create a WC one page checkout with a product table at the top, and the checkout form below.
Bonus #1: Add quick view buttons to your WooCommerce one-page checkout
The beauty of 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 one-page WooCommerce 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. Customers can use these buttons to view extra information about a product in a quick view lightbox, without being taken away from the one-page shopping page.
Note: Please be aware that with one-page checkout, it's not possible to add to the cart from the quick view lightbox. This is because the one-page checkout only updates when the page refreshes after adding to the product to the cart, and the add to cart buttons in WooCommerce Quick View Pro use AJAX instead of refreshing the page. To use quick view with WooCommerce one-page checkout, I therefore recommend disabling the add to cart buttons on the Quick View Pro settings page. Customers will use the lightboxes to learn more about each product, and then add to the cart from the product table.
Bonus #2: Add and edit the 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 the checkout fields or add new ones. For example, you can use it to collect extra information from each customer. This will appear on the one-page checkout.
If you set up WooCommerce Product Table with a one-page checkout and it's not working, then try adding a product to the cart. If the page does not reload, then this is the problem. You must disable Ajax add to cart in order for the checkout to update when you add products to the cart.
Do this by unticking the 'Ajax Cart' option on the WooCommerce Product Table plugin settings page. If the page is still not reloading when you add products to the cart, then go to WooCommerce → Settings → Products and untick 'Enable AJAX add to cart buttons on archives'.
Can I disable the WooCommerce cart completely?
The above instructions will create an order form with WooCommerce one page checkout underneath. By default, this will be used alongside the WooCommerce cart. 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 features alongside one-page checkout. It gives customers a choice. For example, if they want to edit the contents of their cart then they can click through to the cart page and check out afterwards. This is handy because the WooCommerce one-page checkout lists the products in the cart without any means to edit them.
However, some 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 page 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 to code 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 and their WordPress experts will send you a quote.
Get the best WooCommerce one page shopping plugin now!
As you can see, WooCommerce Product Table is ideal for creating a WooCommerce one-page checkout because it lists products in a superior way:
- You can choose exactly what information to display about your products.
- Customers can find specific products quickly and easily, even if you're listing a large number of items.
- You can reduce abandoned carts by displaying the WooCommerce checkout directly below the product order form.
To get started, install WooCommerce Product Table today. Follow the instructions above to add one-page checkout to your own WooCommerce store.