Blocks, Elementor and shortcodes

Cartless renders each step exactly once. The block editor, Elementor and the shortcodes are three ways to reach the same five renderers, so a checkout built in Gutenberg and one built in Elementor are the same form with different chrome around it.

The five blocks

Block	Belongs on	Shortcode equivalent
Cartless Checkout	a checkout step	[cartless_checkout]
Cartless Offer	an upsell or downsell step	[cartless_upsell]
Cartless Receipt	a thank-you step	[cartless_receipt]
Cartless Buy Button	any page at all	[cartless_button]
Cartless Product	any page at all	[cartless_product]

Find them in the block inserter under Cartless. A block reads which funnel and which step it is on from the page it sits on, so the same layout serves two funnels without reconfiguration. The Checkout and Offer blocks take a Layout (below); the Receipt takes nothing. The Buy Button takes a funnel — a picker that searches by the funnel’s name, its product or the product’s SKU, defaulting to the page’s own funnel — and an optional label. The Product block takes the same plus what to show — see Product images and the Product block.

Elementor widgets

The same five, as widgets in a Cartless category: Cartless Checkout, Cartless Offer, Cartless Receipt, Cartless Buy Button, Cartless Product. They render through the same code and accept the same controls.

The shortcodes

[cartless_checkout layout="side"]
[cartless_upsell layout="centred"]
[cartless_receipt]
[cartless_button funnel="your-funnel" label="Buy now"]

cartless_checkout and cartless_upsell take a layout (below); the receipt takes nothing. cartless_button needs a funnel slug; label defaults to Buy now. A button pointed at a funnel with no checkout step says so instead of rendering.

Layouts

The checkout and the offer each come in three arrangements. The same three are a Layout select in the block inspector, in the Elementor widget’s Content tab, and a shortcode attribute; the default is what you had before the choice existed.

Checkout
side	Form on the left, order summary on the right; stacks on phones. The default.
stacked	The summary first, then the form, full width — for a single product with a big image.
narrow	One centred column, the summary under the pay button without its image — for a landing page with the checkout beneath it.

Offer
centred	Image above the copy, everything centred. The default.
beside	Image on the left, copy, price and buttons on the right; centred again on phones.
text	No image. For a digital product, or an offer without a picture.

A layout only arranges: the fields, the buttons and the order of the two buttons on an offer never change, so a layout cannot break a payment.

In the editor

Inside Elementor’s editor and the block editor’s preview, the Checkout and Offer blocks are pictures: nothing in them can be clicked, a dashed box stands where Stripe’s payment form or PayPal’s buttons will be, and a badge says so. The buttons, the live total and the scripts arrive on the published page. Add the Cartless Checkout widget or block, pick a layout, and publish to see the real thing.

Styling

Every block and widget offers the same controls — accent colour, its contrast and hover, surface, highlight, radius, font size, max width — and each control writes one CSS custom property (--cartless-accent, --cartless-surface, --cartless-radius and so on) on the block. Controls never emit rules of their own. If you would rather style from your theme, set those properties in your stylesheet and leave the controls alone; the result is the same.

Why a block on the wrong page shows a notice

A block resolves its content from the step it is on. Put a Checkout block on a page that is not a checkout step and it renders This block only works on a checkout step — in the editor and on the front end — rather than a form with nothing to sell. Offer and Receipt blocks do the same for their steps. Move the block, or make the page a step on the funnel’s Steps tab.