CartCubes Multi-step Checkout for FluentCart

Navigation and Validation

Rename Continue and Back, gate the next step until required fields are valid, and add an optional wrapper class. Place Order still uses FluentCart validation.

Settings, Navigation, Validation and Advanced. Progress step buttons let shoppers go back freely. Forward requires a valid current step and only one step ahead.

  • Continue and Back: Defaults: Continue and Back. Show Navigation Buttons starts on. Place Order keeps FluentCart's native label.
  • Block Continue: On by default. Incomplete Step Message: Please complete the required fields before continuing.
  • Real-time Validation: On by default. Fields pick up valid or invalid classes on blur and input. Client-side only.
  • Place Order is FluentCart's: This plugin does not replace FluentCart's order validation on the final step.
  • Wrapper class: Extra Wrapper CSS Class is added to the FluentCart checkout wrapper. Delete Data on Uninstall starts off.

Navigation buttons

Show Navigation Buttons is on. Continue Button Text defaults to Continue. Back Button Text defaults to Back. On the final step Continue is hidden and FluentCart's Place Order shows. Modern UI adds a mobile sticky Pay Now bar.

Navigation tab: Show Navigation Buttons (Enabled), Continue Button Text (Continue) and Back Button Text (Back).
Navigation tab: Show Navigation Buttons (Enabled), Continue Button Text (Continue) and Back Button Text (Back).
Show Navigation Buttons toggle. When it is off, shoppers still change steps from the progress control.
Show Navigation Buttons toggle. When it is off, shoppers still change steps from the progress control.
Continue Button Text field with the default Continue.
Continue Button Text field with the default Continue.
Back Button Text field with the default Back.
Back Button Text field with the default Back.
Checkout footer showing Back on the left and Continue on the right of the current step.
Checkout footer showing Back on the left and Continue on the right of the current step.

Validation

Block Continue Until Required Fields Are Valid is on. Incomplete Step Message defaults to Please complete the required fields before continuing. Real-time Validation is on. Saved billing and shipping addresses skip redundant required checks. Empty shipping steps show Empty Shipping Message instead of field errors.

Validation tab: Block Continue Until Required Fields Are Valid (Enabled), Incomplete Step Message, and Real-time Validation (Enabled). Help text notes that Place Order still uses FluentCart validation.
Validation tab: Block Continue Until Required Fields Are Valid (Enabled), Incomplete Step Message, and Real-time Validation (Enabled). Help text notes that Place Order still uses FluentCart validation.
Block Continue Until Required Fields Are Valid toggle. Continue stays disabled until the current step's required fields pass client-side checks.
Block Continue Until Required Fields Are Valid toggle. Continue stays disabled until the current step's required fields pass client-side checks.
Real-time Validation toggle. Fields are checked on blur and input, with valid and invalid classes applied in the current step.
Real-time Validation toggle. Fields are checked on blur and input, with valid and invalid classes applied in the current step.
Incomplete Step Message field: Please complete the required fields before continuing.
Incomplete Step Message field: Please complete the required fields before continuing.
Checkout showing the incomplete-step message when Continue is clicked with required fields still empty.
Checkout showing the incomplete-step message when Continue is clicked with required fields still empty.

Advanced

Extra Wrapper CSS Class is empty by default and is added to the FluentCart checkout wrapper. Delete Data on Uninstall starts off. Settings live in the cartcubes_fc_checkout_settings option.

Advanced tab: Extra Wrapper CSS Class and Delete Data on Uninstall (Disabled).
Advanced tab: Extra Wrapper CSS Class and Delete Data on Uninstall (Disabled).
Extra Wrapper CSS Class text field. Use it to target the FluentCart checkout wrapper from your theme CSS.
Extra Wrapper CSS Class text field. Use it to target the FluentCart checkout wrapper from your theme CSS.