Put Checkout on Any Page

Your pricing page lists three plans, and every Buy button sends the buyer to another page to pay. They lose the comparison they were reading, and anything already in their cart ends up in the order.

On-page Checkout puts plan cards and your real checkout form on the same page. Buyers pick a plan and pay right there. Each plan checks out from its own cart, so the store cart is left alone.

Turn It On

Switch on On-page Checkout under Stackless → Dashboard, then add the On-page Checkout block or the [stackless_checkout] shortcode to any page or post. Modal Checkout needs this module too, because its modal shows the same embedded checkout.

Add the Block

Add On-page Checkout from the WooCommerce block category. The Product and plans panel picks what it sells:

• Product: search for a simple or variable product. A simple product is one plan, and a variable product offers each variation as a plan.
• Plans (product or variation IDs): optional. Comma-separated IDs in display order. They can come from different products and replace the product above.
• Preselected plan (ID): the plan picked first. Without it, the first available plan is picked.

The Display panel sets how it looks:

• Heading: an optional heading above the plans.
• Layout: Checkout form shown on the page (default), or Button that opens the form in place.
• Button text: for the button layout. Defaults to “Buy now”.
• Let buyers choose a quantity: off by default. Adds a Quantity field from 1 to 100, hidden for products sold individually.
• Coupon to apply: optional. When it’s empty, a ?coupon= code in the page address is applied.

Use the Shortcode

[stackless_checkout product="12" plans="34,35" default="35" layout="inline" quantity="no"]

Attribute	What it does	Default
product	A product ID. A variable product offers each variation.	none
plans	Product or variation IDs in display order, separated by commas or spaces. Replaces product.	none
default	ID of the plan picked first.	first available plan
layout	inline shows the form, button shows a button that opens it in place.	inline
button	Button text for the button layout.	Buy now
title	A heading above the plans.	none
quantity	yes adds the Quantity field.	no
coupon	A coupon applied to the checkout, up to 64 characters.	none
url_coupon	no ignores a ?coupon= code in the page address.	yes

The block has no url_coupon option. It always applies a coupon from the page address when its own is empty.

How Plan Cards Work

Two or more plans show as cards to pick from. A single plan shows no picker, and with the button layout it gets a one-line summary above the button instead.

• Each card shows the plan name, its price and a short note: “One-time payment”, a free trial, a signup fee, or how often it renews.
• A plan on sale shows the regular price struck through.
• A plan that’s out of stock or can’t be bought shows “Unavailable” and can’t be picked. If no plan can be bought, the block says “This product is not available right now.”
• Grouped and external products are skipped. A variable product adds every visible variation.
• Products must be published. A private product shows only to users who can read private products.

If nothing in the block can be offered, anyone who can edit posts sees “On-page checkout: choose a published product or list its product or variation IDs.” Visitors see nothing.

Subscriptions and Savings Badges

Subscription products work as plans. The cards take their terms from the Subscriptions module, so they show what checkout charges: the price per period, such as “/ month” or “/ 3 months”, a free trial such as “14-day free trial”, and any signup fee. Set up the plans themselves as described in Create Subscription Products.

A plan billed every few months or yearly gets a “Save N%” badge when it costs less than a monthly plan of the same product in the block, over the same months. A $100 yearly plan next to a $10 monthly plan shows “Save 16%”. The percentage is rounded down, and without a monthly plan in the block there’s no badge.

Its Own Cart for Each Plan

Each plan checks out from its own cart, kept in the visitor’s session apart from the store cart. The mini-cart and cart page don’t change, and nothing from the store cart ends up in the order.

• Switching plans keeps each plan’s form loaded, so switching back is instant.
• Reloading the page picks up the same plan’s cart.
• A visitor keeps up to six plan carts. Opening a seventh drops the oldest.
• Only the cart is separate. The buyer’s details are shared with the rest of the store.
• If another plugin replaces WooCommerce’s session handler, a plan checkout replaces the store cart instead, and Stackless logs a notice in WooCommerce → Status → Logs.

How the Form Loads

• With the inline layout, the form loads as the block scrolls near the screen. With the button layout, it loads when the button is clicked.
• The form is your checkout page’s own checkout: the Checkout block if the page uses it, otherwise the classic checkout, without your theme’s header and footer. It isn’t cached or indexed, and only your own site’s pages can embed it.
• If it hasn’t loaded after 20 seconds, the block shows “Checkout could not load. Reload the page to try again.”
• Without JavaScript, a “Continue to checkout” link adds the plan to the store cart and opens the checkout page.

What Happens After Payment

After Place order, the whole page moves to the receipt or the payment page, not just the embedded form. Hosted payment pages open in the full window too.

On the receipt, the store cart stays as it was. A form whose cart was already paid or has expired shows “This checkout has finished or expired. Reload the page to start again.”

Limit New Checkouts

Stackless → Settings → On-page Checkout has one setting:

• New checkouts per connection: how many new plan carts one connection may open in ten minutes. Defaults to 30, up to 1,000. Reopening a plan doesn’t count, store managers aren’t limited, and 0 turns the limit off.

It stops bots from filling your sessions table. Over the limit, the form shows “Too many checkouts were opened from this connection. Wait a few minutes and reload the page.”

Limits

• The block and shortcode show nothing on the checkout page itself.
• Payment method classes belong to Modal Checkout. The on-page form shows the same payment methods as your checkout page.
• Developers can change the plans with the stackless_on_page_checkout_plans filter, allow other product types with stackless_on_page_checkout_supports, and change the quantity cap with stackless_on_page_checkout_max_quantity.
• A stackless:on-page-checkout event fires for select, ready, error and complete. The embedded page’s template can be overridden at yourtheme/stackless/on_page_checkout/frame.php.