This Plugin Converts Your WooCommerce Checkout Into Modular Components For Use With Custom Layouts Inside Of CartFlows.
What It Does:
Instead of being limited to using one of three default “skins” that have the six components of checkout in an order you cannot control, this plugin liberates each component for you to use in a drag-and-drop layout created with your favorite page builder or plain html.
This enables virtually ANY creative layout, special effects or organizational structure you desire for your checkout flow!
You can use any or all of the six components:
Billing, Shipping, Additional Fields, Product Info, Product Review, Payment.
Installation & Configuration:
Simply add the plugin to any CartFlows enabled site. When you do, a new meta box will appear on any CartFlows Checkout step, allowing you to paste in a shortcode containing the layout you created with your favorite page builder.
Each page builder has an internal capacity to generate a shortcode of any saved layout (template) or via a free plugin in the WordPress repository.
Elementor: Anywhere Elementor
Elementor Pro: Included
Divi: Simple Divi Shortcode
Beaver Builder: Included
How To Add A Custom Layout To Any CartFlows Checkout Step:
Add the placeholder for any component to your Page Builder via ONE of three ways:
After you’ve added any component, you can simply drag and drop the widget/module anywhere you like in your layout. Likewise, if you use the shortcode in any wysiwyg text/html area such as tabs or accordions, the output of any components will match the order you have used when adding the shortcodes (from top to bottom).
For most efficient editing, we recommend you use two browser tabs. One with the page builder layout (template) on the left, and another with the public-facing CartFlows checkout step on the right. This will make it relatively easy to see the results of your drag and drop positioning as well as any custom effects you apply to the various components with your page builder.
*Note: It is not recommended to rely upon the “preview” mode of any page builder, because the full results of the plugin are not able to be seen until the page fully renders. So please display the actual public page for design purposes instead.**
The plugin used in this LaunchFlow is available for free as part of your LaunchFlows membership.