All documentation · Plugin overview
Set up your first checkout design
Choose a composition, preview it and apply it deliberately.
Version 0.4.0-alpha.1 · Development alpha · Updated 20 September 2026
Before you start
Use a staging store with WooCommerce active, a configured checkout page and a product in your cart. Sign in with manage_woocommerce permission. Back up your store before changing its purchase flow. Test the payment and field plugins you use with the chosen engine.
From a draft to an active checkout
- Open HookSpark → Checkout Customizer → Templates & editor.
- Choose Split. The classic engine is selected automatically. The form appears on the left and the order summary on the right on desktop.
- Set a primary color and enter an optional help message. Save draft preserves these settings without changing the live checkout.
- Inspect Desktop (1280 px) and Mobile (390 px). The preview uses your current cart.
- Choose Apply to checkout. Open active checkout in a separate tab and complete your test scenarios.
Check the result
Check the active design label, then the actual checkout. A saved draft and an active checkout can intentionally use different designs. With a synthetic €30 item and no taxes or delivery, the expected total is €30; the layout does not change prices.
If it does not look right
An empty cart can hide the checkout form. Prepare a cart first. If a gateway or custom field disappears, confirm it supports the classic engine. Use Restore previous to revert the active configuration, or disable the layout and apply to return to the original WooCommerce page.