How to Setup WooCommerce One Page Checkout (4 Methods)

Did you know that 7 out of 10 shoppers leave their carts behind without completing a purchase? And a big reason for this is a complicated checkout page. 

So, as a WooCommerce store owner, you’re probably always looking for a quick and easy checkout process to enhance your customers experience.

That’s where WooCommerce One Page Checkout steps in! 

This simple one page checkout allows customers cart management, order review, and complete payment all in one place. 

In this guide, I’ll walk through the following 4 powerful methods to setup a one-page checkout in WooCommerce with and without plugins. 

1. Theme template (custom)
2. Checkout shortcode (built-in code)
3. Custom code or CSS (programmetically)
4. One page checkout plugins (best one page plugin)

There’ll also be some killer customization tips to boost your sales like never before.

So, let’s dive in.

What is WooCommerce One Page Checkout?

A WooCommerce One Page Checkout is a combined product and checkout page that lets you add products to the cart, fill out checkout forms, and finalize orders, all on a single page.

Whereas in a traditional checkout process, customers go through multi-steps on different pages, WooCommerce one-page checkout brings the entire shopping experience together just in one place. 

With One Page Checkout, a customer can:

• Add or remove products and view their cart page without leaving the checkout page.
• Enter their shipping and billing details on the same page.
• Choose payment methods and order reviews all in one place.

Even you can transform any page into a checkout page with this single checkout page. So, your customers will have a faster checkout experience with full order confirmation on one page. 

How does One Page Checkout work in Woocommerce?

Woocommerce one page checkout mainly combines everything that your customers need, like product selection, shipping details, and payment options, on one page to complete the purchase.

And here’s a Woocommerce one page checkout example:

Here’s a breakdown of how it works:

Product Selection: Your customers choose the products they want to purchase and add or remove them from their Woocommerce cart.

Shipping Information: Then, they enter their shipping address and choose a shipping method on the same page.

Payment Details: Next, your customers add their payment gateways, such as credit card details or other preferred methods, without additional navigation.

Review and confirm order: Once done, they can view a final order summary to review their selections, make any necessary changes, and confirm their purchase, all without leaving the page.

And that’s how this single page checkout significantly reduces cart abandonment with a smooth purchase experience and also leads to higher conversion rates.

What are the benefits of one page checkout?

Enabling one-page checkout for your store can bring different advantages to your store. Like what? 

Let’s find out the 5 key benefits of using one page checkout:

• Reduce the cart abandonment rate quickly.
• Boost conversion rate
• Increase your store revenue effortlessly.
• Make shopping more convenient for your customers.
• Save time compared to conventional process.

So, it’s not just about giving your customers a quicker checkout experience, using one-page checkout can really boost your business.

Even though there are several benefits of single page checkout, sometimes it increases the load time because of the multiple fields in one place.

Again, if your products actually require a WooCommerce multi-step checkout process, placing them all on a single place can eventually affect your conversions.

How to set up WooCommerce one page checkout?

Unfortunately, WooCommerce doesn’t have any built-in option to completely create a fully integrated one-page checkout. The standard WooCommerce checkout page features multiple pages, where your customers complete different steps separately.

So, to customize the default multi-step checkout page, you’ll either need to use custom template codes or a plugin.

However, we’ll cover 4 methods to set up a Woocommerce one-page checkout:

1. WooCommerce one–page checkout template
2. WooCommerce one–page checkout page shortcode
3. WooCommerce one-page checkout using custom code or CSS
4. Woocommerce one-page checkout plugins

So, let’s check out the step-by-step process of each method and then pick the best option for your store.

Method 1: WooCommerce one-page checkout theme template:

The easiest way to create your one-page checkout is by using a pre-made WooCommerce checkout page template. These templates are already built and can be easily customized to match your store’s style. 

A one page checkout includes multiple built-in templates with pricing tables and product lists. Whether you want to reorder the shipping and billing fields or style the page to reflect your brand, these templates smoothly create an easy checkout flow.

To create a one page checkout template, simply build a folder structure in

your-theme/woocommerce/checkout. 

Then, copy the checkout page template from woocommerce/templates/checkout/form-checkout.php) and place it in your new folder. 

Again, if you’re using tools like Elementor, it becomes even easier to set up and design your checkout page with a drag-and-drop interface. 

This way, you can create a smooth and attractive checkout experience without any coding.

But if you want to have full control over your checkout layout, WooCommerce also allows you to override the default checkout template directly in your theme. 

Many themes and plugins use action hooks to make it easy for you to modify and customize your checkout page. These hooks or filters allow you to add or remove elements and insert your own custom code.

For example, if you want to add a custom content to the billing details section, you can use the woocommerce_before_checkout_billing_form hook in the theme editor section. 

And the best part?

Even if you update to the latest version of WooCommerce, your customized theme file will still work perfectly for your customers without losing the changes.

This method is great for those with minimal coding experience but still want to customize one-page checkouts and layouts for WooCommerce. 

Method 2: WooCommerce One Page Checkout Shortcode

If you don’t want to rely on pre-built templates and have sound coding knowledge, you can use shortcodes to manually add the One Page Checkout.

This checkout page shortcode allows you to customize the checkout process using various attributes. Each attribute controls a specific part of the checkout.

Setup One Page Checkout using Shortcode:

Step 1: First, go to your WordPress dashboard and navigate to Pages > Add New or Posts > Add New.

Step 2: Then, in the page, post, or custom post page, type / and find the shortcode option from the dropdown.

Now, simply keep inserting the following shortcodes one by one into the content editor.

1. [woocommerce_one_page_checkout] 

Step 3: Next, specify which products should be displayed on the checkout page by using the product_ids attribute. This will allow your customers to choose from a pre-selected list of products.

2. [woocommerce_one_page_checkout product_ids=”12, 34, 56″]

Here, replace “12, 34, 56” with the actual product IDs you want to showcase.

Step 4: If you want to display the products to the cart along with the specific category, you can use the category_ids attribute. You can use this attribute with one or multiple category IDs.

3. [woocommerce_one_page_checkout category_ids=”27, 11, 45″]

Change the “27, 11, 45” with the corresponding category number of your store.

Step 5: Now, customize the checkout display by adding the template=”” attribute. This allows you to choose a particular layout for the checkout process. 

4. [woocommerce_one_page_checkout template=”my-custom-template”]

Replace “my-custom-template” with the slug of your desired template.

Step 6: Once you’ve added the shortcode and customized it, save the page or post. Then, preview or publish it to make the One Page Checkout available to your customers.

That’s it. You’re now ready to offer a checkout experience directly on a single page for your customers.

Reminder:

It’s important to note that you can use each attribute once within a single shortcode. If you try to use the same attribute more than once, the second value will be applied.

Method 3: Woocommerce one page checkout using custom code or CSS 

The another best way to create a one checkout page programmatically without plugins is with custom code, or CSS. 

This custom checkout page using CSS is a complete free solution that gives you full control over your checkout section.

So, to create a one page checkout for WooCommerce using a custom code or CSS free, first, you’ll need to log in to your WordPress dashboard. 

Then, Go to Appearance > Background and click on the Additional CSS tab. This is where you’ll add your custom CSS code to style the checkout page.

Once you’re there, it’s time to style your one-page checkout using custom CSS. You can customize everything, from the layout to the colors and fonts. 

For a basic quick single page checkout order form using custom code or CSS, start with the default CSS classes for Woocommerce. 

Now, here’s the simple code snippet for one page checkout using custom code or CSS example.

/* Customize WooCommerce One page Checkout */

.woocommerce-checkout form .form-row input[type="text"],

.woocommerce-checkout form .form-row input[type="email"],

.woocommerce-checkout form .form-row input[type="tel"],

.woocommerce-checkout form .form-row select {

width: 100%;

margin-bottom: 20px;

}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {

margin-top: 30px;

}

.woocommerce-checkout #billing_address_2_field,

.woocommerce-checkout #shipping_address_2_field {

display: none;

}

.woocommerce-checkout #billing_country_field,

.woocommerce-checkout #shipping_country_field {

width: 100%;

margin-bottom: 20px;

}

.woocommerce-checkout #billing_state_field,

.woocommerce-checkout #shipping_state_field {

width: 100%;

margin-bottom: 20px;

}

You just have to copy the custom code and paste it in the Additional CSS section and then hit the Publish button.

This code makes each form row full-width and adds some spacing between the elements to make the checkout process easier to navigate.

One special note: 

When using custom CSS, always test the layout on both desktop and mobile to ensure a smooth experience for all users.

Bonus Tip:

To keep your checkout page customizations safe during updates, I highly recommend using a child theme. By doing this, your changes won’t be overwritten when you update your theme. 

Again, if you face any issues, inspect the elements rendered on screen using your browser’s developer tools to identify the exact CSS classes.

Method 4: WooCommerce one page checkout plugins

When it comes to creating WooCommerce one-page checkout pages in the easiest way, most people rely on plugins to simplify the process.

These checkout plugins are more advanced than the templates again, you can manage to do all the customizations without any coding.

But with so many options available, are there any good WooCommerce one-page checkout plugins? 

Yes, and one of the best OnePage checkout plugins is the WooCommerce Cashier. 

This all-in-one WooCommerce checkout optimization plugin that allows you to set up a one-page checkout, direct checkout with Buy Now buttons, and even customize the checkout fields.

I’ve tried various Woocommerce custom checkout plugins, and Cashier stands out for its flexibility and ease of use for optimizing your one click checkout experience.

Whether you sell simple or variable products, Cashier handles it all with ease. And the best part is you can switch the checkout option on or off anytime based on your needs.

So, how to enable one page checkout in WooCommerce?

To enable the WooCommerce one-page checkout, go to WooCommerce > Cashier > Settings and toggle the ‘One Page Checkout‘ option. 

And, if you want to disable it, just turn off the toggle.

You can enable one-page checkout in three ways; pre-selected products, product IDs, or product categories. 

So, the steps to create a one-page checkout with Cashier for all product types are following:

Step 1: First, go to your WordPress Admin Panel > Pages > Add New.

Step 2: Then, give the title of the shop page something like ‘One Page Checkout.’ Now, on the Classic Editor menu, locate the ‘OPC‘ option (One Page Checkout).

Special Note:

If you’re using the Gutenberg editor, you might not see the OPC option. In that case, just go to the product page >> the Classic editor’s OPC feature, and generate the shortcode. Then, simply paste it into your page in the Gutenberg editor.

Step 3: Now, back on the page you’re editing, and there’re be three options for one page checkout:

• Pre-selected Products,
• Product IDs, or 
• Product Categories

Choose depending on what you want to feature on your one-page checkout.

Step 4: Next, click on the ‘Create shortcode‘ and then publish the page.

Step 5: Once your page is live, you can customize products for one-page checkout in your product settings. Here, make sure to check the one-page checkout box and update the product.

Step 6: Continue to tick the one page checkout option for each product you want and finally hit Update.

That’s it, you’re done. 

And this is the final WooCommerce One-Page Checkout Demo on your website:

So, you’ll have a streamlined, fast checkout process with this Woocommerce checkout page customization plugin, Cashier.

Bonus Tip:

Even if I recommend Cashier as the best checkout plugin for WooCommerce, I still suggest checking out the other best one page checkout plugins for WooCommerce. 

In fact, you can test plugins like YITH or the WooCommerce mobile checkout plugin when you need a quick buy for Woocommerce, especially if your audience is mobile-first. 

So, whether you’re focusing on your customer experience, conversion, or payment, with any WooCommerce quick checkout plugins, just make sure it ensures your users a smooth conversion process with flexible payment options.

How to add products to one page checkout in Woocommerce?

Adding products to the checkout page is a breeze. To add products to one page checkout in Woocommerce, simply go to WooCommerce > Cashier. Under the Generate Buy Now link section, enter the products you want to include under Products to add to the cart. 

You can also remove products from your cart on the checkout page by clicking the “Remove” button next to each product. 

But just adding products isn’t enough. So, to make things more personalized, you may ask, “Can I display product images and descriptions on the one-page checkout?” 

Yes, you can! 

WooCommerce advanced checkout settings let you show product images and a short description of what they’re buying on the checkout page. 

However, you’ve to optimize your Woocommerce product image and descriptions to attract the customers.

In fact, if you’re offering free products, WooCommerce enables direct checkout for those products. However, if you want to focus on a single product checkout in WooCommerce, this feature can be handy for quick purchases.

How to customize the WooCommerce one page checkout?

People often ask, “How can I improve conversion rates with WooCommerce One-Page Checkout?”

Well, customizing the WooCommerce one-page checkout can make a huge difference in boosting your conversion rate. It’s all about creating cart and checkout blocks to offer a more smooth experience.

So, let’s dive into the ways of customizing woocommerce one-page checkout. 

WooCommerce One Page Checkout with Product Selection

Enabling product selection directly on your checkout page can significantly increase your store’s sales rate. 

When you display multiple product options, like choose products or adjust quantity on the single checkout page, your customers can easily complete their purchase without any confusion.

And to make things even better, you can add WooCommerce product direct checkout link. This lets customers jump straight to a product-specific checkout page, without having a multi-step product selection process. 

WooCommerce One Page Checkout for Subscriptions

What if you’re selling subscriptions rather than any physical or digital products, but still want one page checkout?

Well, WooCommerce makes it super easy to set up subscriptions for WooCommerce one-page checkout. 

Even, many WooCommerce subscriptions plugins or extensions offer your customers to subscribe and pay right on the same page without any extra steps.

Plus, if you’re just getting started, you can even check out some WooCommerce subscriptions free options to test how it works for you.

WooCommerce One Page Checkout for Variable Products

You might be wondering, “Can I use WooCommerce One-Page Checkout for different product types?”

Yes, absolutely.

You can even customize your checkout to handle product variations, like size or color, directly on the checkout page. This personalized option creates a more tailored shopping experience without overwhelming your customers.

WooCommerce One Page Checkout Layout and Design

Even if your checkout process is very simple, a great layout and design can make all the difference. 

The goal is to make it visually appealing while keeping the checkout process straightforward.

But, how?

Well, you can use WooCommerce checkout design plugins to easily customize your layout. Whether you’re adjusting one-page checkout templates or completely redesigning your entire page layout, you have plenty of options. 

For further customization, think about the overall design. You can add a WooCommerce Custom Add to Cart button or Custom Checkout Layouts for a more engaging appearance. 

WooCommerce One Page Checkout and Order Bumps

We all know how order bumps can boost your average order value, right? 

So, you may ask, “Can I use order bumps with WooCommerce One Page Checkout?” 

Yes. In fact, it becomes even easier with one page checkout.

Again, you can use the WooCommerce order bump plugin to easily show multiple order bumps or upgrades right before customers finalize their purchase. 

This tactic not only increases your revenue but also provides your customers with relevant options to enhance order, all without disrupting their checkout experience.

WooCommerce One Page Checkout and Upsells

If you want to understand the customer’s buying intent and improve your profit margins accordingly, upsells and cross-sells are the true game changers.

But people often ask, “Can I offer upsells and cross-sells on the one page checkout?”

Yes. And not only you can offer, but also you can simply use WooCommerce One-Page Checkout and Upsells plugins to make it some simple and effective.

Whether you’re implementing one-click upsells or a more strategic approach, these Upsells plugins turn your checkout page into a powerful sales tool.

WooCommerce one-page checkout with custom fields

If you want to create a truly unique checkout experience, you need to customize the fields on your one page checkout. 

But, how do you customize the fields on My One Page Checkout?

To create a custom field on your one-page checkout, you can either modify the custom checkout fields or even redesign the entire checkout form in a single page. This includes adding or removing fields based on your needs.

Even better!

You can add the “Customers also bought” module in your checkout page to encourage your customers to explore and buy more additional products.

Why is my WooCommerce One Page Checkout not working?

Sometimes people face WooCommerce One-Page Checkout isn’t working problem. And it can be more frustrating, especially when you’re unsure what’s causing the issue. Here are some common issues and solutions to help you troubleshoot effectively.

WooCommerce payment gateway not showing on the checkout page: 

This problem often arises due to conflicts between two or more different plugins or even for an outdated one with deprecated code. To solve this, you’ve to ensure all plugins and WooCommerce are updated. 

If that doesn’t help, deactivate all other installed tools and reactivate them one by one to find the conflicting one.

WooCommerce Checkout Page Keeps Loading: 

A never-ending loading checkout screen? That’s likely a sign of an incorrect AJAX URL or a pesky JavaScript error. 

But don’t worry. Just open your browser’s console, check for any errors, and make sure your AJAX URLs are set up correctly.

WooCommerce Empty Cart on Page Load: 

This often happens due to incorrect theme functionality. Even if your customers face the Woocommerce order received page not working, the reason may be the same.

So, if you face this error, the best solution will be to switch to a default theme. 

Then, update everything and check for any theme functionality that might be interfering.

Checkout button not showing WooCommerce: 

This can occur if your hosting environment isn’t designed to be compatible with WooCommerce. In this case, you’ve to make sure your server meets the WooCommerce requirements and double-check your theme’s compatibility.

WooCommerce Checkout field Editor not working: 

If you’re trying to customize fields and they’re not updating, it could be a caching issue. Even, for such a cashing problem, logged-out users can’t use Woocommerce one-page checkout. To solve this, clear your browser’s cache and cookies and try again.

Sometimes, having too many plugins can create conflicts or slow down your site, affecting the checkout process.

Troubleshooting the checkout issue may take time, but if you can address these areas, it should help to get your WooCommerce One-Page Checkout back on track.

FAQs:

Conclusion:

WooCommerce One Page Checkout is a powerful tool that can truly drive your sales. In this guide, I’ve explored several ways to set it up and customize it to fit your store’s needs. While many people generally use plugins for a quick fix, I recommend testing out the different methods we’ve discussed. 

So, find out what works best for your store and your customers, and make your checkout page an ultimate sales magnet.