1Days
17Hrs
56Mins
35Secs

HUGE BLACK FRIDAY SALE

30% off all plugins - no coupon code needed
Plugin Sale

The best WooCommerce one page checkout plugin

November 7, 2021

WooCommerce One Page Checkout Plugin

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:

  1. 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.
  2. A WooCommerce one-page checkout - 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 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! You'll learn how to list products in a quick order form, with a choice of two types of one-page checkout.

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. After adding products to their order, customers can add their details and checkout, directly on the order form page!

WooCommerce one page checkout with product table
An example of one page shopping in WooCommerce

Keep reading to discover two ways to set up the Product Table plugin with WooCommerce one page shopping. There are full written instructions, plus a video tutorial.

WooCommerce Product Table
Create a one page checkout plugin for your WooCommerce store today!

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.

Demo page: See a WooCommerce one-page checkout in action.

2 ways to create a WooCommerce one-page checkout

So far, you've learned why your store needs a WooCommerce one page checkout plugin. You also know how one page shopping speeds up the customer journey by letting customers choose products and purchase from a single order form page.

WooCommerce Product Table makes it easy to list products in a quick one-page order form. 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.

After installing WooCommerce Product Table, you need to enable the WooCommerce checkout on the same page as your product order form. There are 2 easy ways to do this:

  • Method 1: Use WooCommerce Fast Cart to display a popup one-page checkoutWith this type of WooCommerce one-page checkout, the checkout appears in a popup instead of below the list of products. The customer journey goes like this:
    1. The customer visits the product table page and uses the search, sort and filtering to find the products they want.
    2. They select the required products and add them to their cart.
    3. A popup WooCommerce checkout immediately appears over the product table. The customer makes any changes to the selected products, enters their details and completes the purchase without leaving the page.
  • Method 2: Use the One-Page Checkout extension to add a checkout below the list of productsThis option provides a different customer journey:
    1. The customer visits the product table page and uses the search, sort and filtering to find the products they want.
    2. They select the required products and add them to their cart.
    3. 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. Customers can also edit and delete products.

To show you the difference between the two methods, here's what they look like:

Which is the best type of one-page WooCommerce checkout?

Both are good options. However, I really Method 1 because the popup checkout makes the process incredibly clear to the customers. You're not relying on them to scroll down to see the checkout at the bottom of the page. Instead, the checkout opens automatically in a way that they can't miss.

Choose which method you like best, and then follow the setup instructions below. I'm assuming you already have a WordPress website with the free WooCommerce plugin installed and some products added. You can then easily implement either type of one page checkout.

Step 1: Install WooCommerce Product Table

  1. Install the WooCommerce Product Table plugin on your WordPress site.
  2. Once activated, head to WooCommerce → Settings → Products → Product Tables and enter your license key.
  3. 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:
    • 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!).
    • Enable the 'Quantity' option 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, enter 'none' in the 'Links' option. This disables links to the single product page.
    • Finally, here are some additional recommendations for if you're planning to add the checkout form below the product table (Method 2). Ignore these if you're planning to add a popup checkout instead (Method 1):
      • 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 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 products without leaving the page

Step 2: Create a page listing your products

Gutenberg for WooCommerce Product Table block
WooCommerce Product Table lists your products above the one-page checkout, like this

This is where we create the page that we'll be using as our WooCommerce one-page checkout:

  1. Create a new page (Pages → Add New).
  2. 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 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?

WooCommerce Product Table Quick View Magnifying Glass

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.

Get Quick View

Notes:

  • If you decide to add quick view buttons then I recommend using Method 1 in step 3, which involves adding a popup checkout. This works better with quick view than having a checkout below the list of products.
  • If you really want to use Method 2 with quick view then you need to disable the add to cart buttons in the lightbox because these won't work with that type of one-page checkout. Customers can still view extra product information in the lightbox, and can add to the cart from the product table instead. 

Step 3: Add one-page checkout to WooCommerce

Next, you need to add one-page checkout to your product table page. Follow the instructions for whichever type of one-page checkout you've decided to add.

Method 1: Add a popup one-page checkout to your list of products

WooCommerce one page checkout popup
WooCommerce Product Table with Fast Cart popup checkout
  1. Install WooCommerce Fast Cart on your WordPress site.
  2. Go to the WooCommerce Fast Cart settings page at WooCommerce → Settings → Fast Cart.
  3. 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 WooCommerce one-page checkout.

Method 2: Add a checkout form below the list of products

  1. Install the WooCommerce One Page Checkout extension.
  2. Go to the edit the product table page that you created in Step 2, above.
  3. Add the following shortcode underneath the product table shortcode: [woocommerce_one_page_checkout].

Your finished WooCommerce order form page should look something like this in the WordPress back end:

Woo One Page Checkout Plugin

This will create a WC one page checkout with a product table at the top, and the checkout form below.

WooCommerce Product Table with checkout on same page

Bonus: Add and edit the 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 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, whether you've added it below the list of products or in a popup checkout.

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.
WooCommerce add to cart success message
An Add to Cart success message with a link to the Cart 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.

Redirect WooCommece cart to checkout

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.

Need professional assistance?
We've partnered with Codeable to provide our customers with expert help if required.

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 makes it so easy to find and select products. To enable one-page checkout, use it with either:

Both options offer the perfect way to reduce abandoned carts by making it quick and easy for customers to complete their purchase.

WooCommerce Product Table
Create a one page checkout plugin for your WooCommerce store today!

8 Comments

  1. John
    December 5, 2020 Reply

    looks very promising, will add to my wishlist.

    thanks

    • Edge
      December 7, 2020 Reply

      Hi, John.

      Thanks for your interest in WooCommerce Product Table! Should you have any questions, please let me know. You can also get in touch with us via our dedicated Support Center.

      Best regards and keep safe,

  2. Kristof Gheyssens
    October 24, 2019 Reply

    "You’ll also need method 2 if you want the checkout to be visible even when the cart is empty (with method 2, the checkout magically appears after products are added to the cart)."
    Shouldn't the first "method 2" be "you'll also need method 1 if you want"?

    • EJ
      November 11, 2019 Reply

      Hi, Kristof. Well spotted! We have now corrected this. Many thanks.

  3. LoadPinas
    May 1, 2019 Reply

    Is it possible to remove all the billing details? i just want the table layout and paypal payment checkout without the users filling in any details.

  4. John Gayle
    August 8, 2018 Reply

    One Page Checkout displays product selection and checkout forms on a single page. Customers can add products to an order (or remove them) and complete payment without leaving the page.

  5. vipin
    June 12, 2018 Reply

    thanks for such a detailed content on woocommerce,, it helps a lot

Please share your thoughts...

Your email address will not be published.