---
title: How to Set Up the One Page Checkout in WPCafe
description: "Long checkout flows kill conversion. Customers browse the menu, click into a product, hit the cart page, then a separate checkout page — every step a chance to drop off. WP Cafe Pro's **One Page Checkout** collapses this into a…"
url: "https://themewinter.com/docs/plugins/wp-cafe/how-to-set-up-the-one-page-checkout-in-wp-cafe/"
updated: "2026-10-22"
category: WPCafe / Food Ordering
---

# How to Set Up the One Page Checkout in WPCafe

Long checkout flows kill conversion. Customers browse the menu, click into a product, hit the cart page, then a separate checkout page — every step a chance to drop off.

WP Cafe Pro's **One Page Checkout** collapses this into a single screen. Customers can browse, add to cart, and check out without ever leaving the page. No reload, no extra navigation — just a faster path from menu to paid order.

This guide walks you through enabling the feature and dropping the shortcode onto a page in your WordPress site. Watch our step-by-step guide on setting up the **WPCafe One Page Checkout** for a faster restaurant ordering experience. Or continue reading the guide below!

[WPCafe One-Page Checkout: The Ultimate Single-Page Ordering Experience for Restaurants](https://www.youtube.com/embed/vcnExjWhX9o?feature=oembed)

| **Prerequisite:** 1. The free **WP Cafe** plugin and **WP Cafe Pro** are both installed, activated, and the Pro license is verified. 2. The **Food Order** module is enabled and you have at least one food category with published items. |
| --- |

- The **Food Order** module is enabled and you have at least one food category with published items.

## Step 1: Open the Shortcode Generator

From your WordPress dashboard, go to **WP Cafe → Settings** and click the **Shortcode** menu. Switch to the **Food Order** tab and locate the **One Page Checkout** entry. Click it to open the shortcode generator modal.

![[Screenshot 1: locating the One Page Checkout shortcode]](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/04/SCR-20260427-nixg.png)

## Step 2: Configure Attributes and Generate the Shortcode

The modal exposes the attributes that control the layout. Adjust them to match how you want the page to behave:

- **Style** — pick the layout style for the product grid (default: `style-1`).
- **Description length** — set how many characters of the product description appear under each item (default: `100`).
- **Product Categories** — set how many categories you want to show. By default it will show all if not selected.
- **Menu Order** — Food items order to show ascending or descending.

Once the attributes look right, click the **Generate** button. The modal returns a ready-to-paste shortcode such as `[wpc_one_page_checkout description_length="100" style="style-1"]`. Copy it.

![[Screenshot 2: generating the shortcode for one page checkout]](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/04/SCR-20260427-nkfh.png)

## Step 3: Paste the Shortcode on a Fresh Page

In the WordPress dashboard, go to **Pages → Add New**. Give the page a clear title (for example, *Order Online* or *Quick Order*). Paste the generated shortcode into a Shortcode block — keep the page free of other dynamic blocks that might wrap or escape it. Publish the page.

## Step 4: Preview and Verify

Click **View Page**. The One Page Checkout view should now render with three regions on a single screen:

![[Screenshot 3: front-end preview of the One Page Checkout page]](https://themewinter.com/docs/plugins/wp-content/uploads/sites/3/2026/04/SCR-20260427-nkpc.png)

## How Customers Use It

1. Land on the One Page Checkout page.
2. Browse or search the menu and filter by category, location, pickup/delivery, or price.
3. Click **Add to Cart** on items — the cart panel updates inline.
4. Adjust quantities, apply a coupon, or remove items from the right sidebar.
5. Click **Proceed to Checkout** to reveal the billing form on the same page.
6. Fill in details, choose a payment method, and place the order.

End-to-end ordering on a single URL with zero page reloads.

## Frequently Asked Questions (FAQ)

**Q1: Does One Page Checkout work without WP Cafe Pro?**

A: No. It is a Pro-only feature. The free WP Cafe plugin must be active alongside Pro for the shortcode to register and render on the front end.

**Q2: Why is my page blank after pasting the shortcode?**

A: Most often the Food Order module is disabled or no products are published. Re-check WP Cafe → Settings → Modules and confirm at least one food item exists, then reload the page.

**Q3: Does it work with my existing WooCommerce checkout fields and payment gateways?**

A: Yes. One Page Checkout uses the WooCommerce cart and checkout APIs underneath, so existing payment gateways, tax rules, and any custom checkout fields all apply without extra setup.

**Q4: Does it support pickup and delivery?**

A: Yes. If pickup and delivery are configured in WP Cafe settings, the relevant filter and selectors appear on the same page so customers can choose the option before placing the order.

**Q5: Can I place the shortcode in a sidebar or popup?**

A: Not recommended. The layout is designed for a full-width content area. Use a fresh page with a full-width or canvas template for best results.

**Q6: Can I customize the design?**

A: Yes. Standard theme styles apply, and the shortcode output uses prefixed CSS classes (`wpc-opc-*`, `wpc-one-page-checkout-*`) that you can override from your child theme. Primary and secondary colors are pulled from WP Cafe settings.

## Wrapping Up

One Page Checkout shortens the path from menu to paid order. Enable Pro, drop the shortcode on a fresh page, and your customers get a frictionless ordering experience that mirrors the speed of native food-ordering apps.