Sign In

Step-by-step wizard

The bundle builder is a React application loaded on the product page for every BundlePilot Bundle product. It replaces the standard WooCommerce add-to-cart button with an interactive, multi-step UI.

What customers see:

  • A progress bar or step indicators at the top showing their position in the wizard.
  • A product grid for each step with image, name, price, and a selection button.
  • An “X / Y items selected” counter per step (configurable).
  • A sticky price summary panel that updates in real time as products are selected.
  • A “Build Another” option after successfully adding a bundle to the cart.

Mobile first: The wizard is fully responsive. Grid columns collapse to a narrower layout on screens below 480px, controlled by the Mobile grid columns setting.

Loading state: While the React app initializes, a shimmer skeleton UI is displayed to prevent layout shift.

JavaScript requirement: The wizard requires JavaScript. A <noscript> message is shown to customers with JavaScript disabled.