| 1 |
# Getting Started |
| 2 |
|
| 3 |
This guide walks you through installing CartFlows, setting up your first funnel, and understanding the core concepts. |
| 4 |
|
| 5 |
## Requirements |
| 6 |
|
| 7 |
| Requirement | Minimum | |
| 8 |
|-------------|---------| |
| 9 |
| WordPress | 5.0+ | |
| 10 |
| WooCommerce | 3.0+ | |
| 11 |
| PHP | 7.2+ | |
| 12 |
|
| 13 |
## Installation |
| 14 |
|
| 15 |
### For Developers (from source) |
| 16 |
|
| 17 |
```bash |
| 18 |
# 1. Clone into your WordPress plugins directory |
| 19 |
git clone <repo-url> wp-content/plugins/cartflows |
| 20 |
cd wp-content/plugins/cartflows |
| 21 |
|
| 22 |
# 2. Install PHP dependencies |
| 23 |
composer install |
| 24 |
|
| 25 |
# 3. Install JS dependencies |
| 26 |
npm install |
| 27 |
|
| 28 |
# 4. Build the React admin apps |
| 29 |
npm run build |
| 30 |
|
| 31 |
# 5. Activate in WordPress admin |
| 32 |
# WordPress Admin → Plugins → CartFlows → Activate |
| 33 |
``` |
| 34 |
|
| 35 |
### For End Users |
| 36 |
|
| 37 |
1. Download the CartFlows plugin ZIP |
| 38 |
2. In WordPress Admin: **Plugins → Add New → Upload Plugin** |
| 39 |
3. Upload the ZIP and click **Install Now** |
| 40 |
4. Click **Activate Plugin** |
| 41 |
|
| 42 |
## Setup Wizard |
| 43 |
|
| 44 |
On first activation, CartFlows launches a setup wizard that guides you through: |
| 45 |
|
| 46 |
1. **Welcome** — Plugin overview |
| 47 |
2. **Page Builder** — Select your preferred page builder (Elementor, Gutenberg, Divi, Beaver Builder, Bricks, or Other) |
| 48 |
3. **WooCommerce** — Verify WooCommerce is installed |
| 49 |
4. **Analytics** — Optional non-sensitive data sharing |
| 50 |
5. **Ready** — Create your first funnel |
| 51 |
|
| 52 |
You can skip the wizard and configure settings later in **CartFlows → Settings**. |
| 53 |
|
| 54 |
## Core Concepts |
| 55 |
|
| 56 |
### Flows (Funnels) |
| 57 |
|
| 58 |
A **Flow** is a container that groups multiple steps into a sequential sales funnel. Each flow has: |
| 59 |
- A name and URL slug |
| 60 |
- One or more steps in a defined order |
| 61 |
- Analytics tracking for conversions and revenue |
| 62 |
|
| 63 |
### Steps |
| 64 |
|
| 65 |
A **Step** is an individual page within a funnel. There are six step types: |
| 66 |
|
| 67 |
| Step Type | Purpose | |
| 68 |
|-----------|---------| |
| 69 |
| **Landing** | Sales/marketing page before the checkout | |
| 70 |
| **Checkout** | WooCommerce checkout form | |
| 71 |
| **Order Bump** | Pre-purchase add-on (displayed on the checkout page) | |
| 72 |
| **Upsell** | Post-purchase upgrade offer | |
| 73 |
| **Downsell** | Alternative offer if upsell is declined | |
| 74 |
| **Thank You** | Post-purchase confirmation page | |
| 75 |
| **Optin** | Lead capture form (email signup) | |
| 76 |
|
| 77 |
### Flow Canvas |
| 78 |
|
| 79 |
The **Flow Canvas** is the visual editor where you design your funnel: |
| 80 |
- Each step appears as a node |
| 81 |
- Drag to reorder steps |
| 82 |
- Click a node to open its settings |
| 83 |
- View per-step conversion analytics |
| 84 |
|
| 85 |
## Creating Your First Funnel |
| 86 |
|
| 87 |
### 1. Create a New Flow |
| 88 |
|
| 89 |
1. Go to **CartFlows** in the WordPress admin sidebar |
| 90 |
2. Click **Add New Flow** |
| 91 |
3. Enter a flow name |
| 92 |
4. Choose a template or start from scratch |
| 93 |
|
| 94 |
### 2. Add Steps |
| 95 |
|
| 96 |
In the flow canvas: |
| 97 |
1. Click **+ Add Step** |
| 98 |
2. Choose a step type (Checkout, Landing, Thank You, etc.) |
| 99 |
3. Optionally import a pre-designed template from the CartFlows library |
| 100 |
4. Click **Create Step** |
| 101 |
|
| 102 |
### 3. Configure Each Step |
| 103 |
|
| 104 |
Click any step node to open its settings: |
| 105 |
|
| 106 |
**Checkout step settings:** |
| 107 |
- Products to sell |
| 108 |
- Checkout form fields (enable/disable, labels, order) |
| 109 |
- Layout (Standard, Modern Checkout, Instant Checkout) |
| 110 |
- Order bump products |
| 111 |
- Design (colours, fonts) |
| 112 |
|
| 113 |
**Thank You step settings:** |
| 114 |
- Order details display |
| 115 |
- Next step or external redirect |
| 116 |
|
| 117 |
### 4. Design the Page |
| 118 |
|
| 119 |
Click **Edit with [Page Builder]** to open your page builder: |
| 120 |
- Use CartFlows blocks/widgets to embed checkout forms |
| 121 |
- Customise the page layout and content |
| 122 |
- The checkout form block is the core element — it renders the WooCommerce checkout |
| 123 |
|
| 124 |
### 5. Publish and Test |
| 125 |
|
| 126 |
1. Set the flow status to **Published** |
| 127 |
2. Visit the checkout step URL to test the flow |
| 128 |
3. Complete a test purchase using WooCommerce test mode |
| 129 |
|
| 130 |
## Store Checkout (Global Checkout) |
| 131 |
|
| 132 |
**Store Checkout** replaces the default WooCommerce checkout with a CartFlows-designed checkout for all purchases on your store: |
| 133 |
|
| 134 |
1. Go to **CartFlows → Settings → General** |
| 135 |
2. Enable **Store Checkout** |
| 136 |
3. Select or create the flow to use as your global checkout |
| 137 |
|
| 138 |
When enabled, the "Proceed to Checkout" button on the WooCommerce cart page will send customers through your CartFlows funnel instead of the default WooCommerce checkout. |
| 139 |
|
| 140 |
## Global Settings |
| 141 |
|
| 142 |
Go to **CartFlows → Settings** to configure: |
| 143 |
|
| 144 |
| Tab | Settings | |
| 145 |
|-----|---------| |
| 146 |
| **General** | Default page builder, Store Checkout | |
| 147 |
| **Permalink** | Flow and step URL slugs | |
| 148 |
| **User Role Manager** | Who can manage flows and settings | |
| 149 |
| **Integrations** | Facebook, Google Analytics, TikTok, Pinterest, Snapchat, Google Ads | |
| 150 |
| **Other** | Data retention, email reports, analytics opt-in | |
| 151 |
|
| 152 |
## Permalink Structure |
| 153 |
|
| 154 |
CartFlows steps have their own URL structure: |
| 155 |
|
| 156 |
``` |
| 157 |
https://yoursite.com/{flow-slug}/{step-slug}/ |
| 158 |
``` |
| 159 |
|
| 160 |
Default: `https://yoursite.com/wcf/my-funnel/checkout/` |
| 161 |
|
| 162 |
Customise the slug base in **CartFlows → Settings → Permalink**. |
| 163 |
|
| 164 |
After changing permalink settings, visit **Settings → Permalinks** in WordPress admin and click **Save Changes** to flush rewrite rules. |
| 165 |
|
| 166 |
## Analytics Dashboard |
| 167 |
|
| 168 |
Go to **CartFlows → Analytics** to view: |
| 169 |
- Total conversions and page views |
| 170 |
- Revenue per visit and revenue per unique visitor |
| 171 |
- Offer and order bump conversions |
| 172 |
- Optin form performance |
| 173 |
- Top performing funnels |
| 174 |
- Per-step conversion data |
| 175 |
|
| 176 |
## Development Quick Start |
| 177 |
|
| 178 |
For developers contributing to CartFlows: |
| 179 |
|
| 180 |
```bash |
| 181 |
# Start local WordPress environment |
| 182 |
npm run env:start |
| 183 |
|
| 184 |
# Watch and rebuild JS on change |
| 185 |
npm run start |
| 186 |
|
| 187 |
# Run tests |
| 188 |
composer test |
| 189 |
npm run test:e2e |
| 190 |
``` |
| 191 |
|
| 192 |
See [](Environment-ConfigurationEnvironment-Configuration](Environment-Configuration](Environment-Configuration), [](Contributing-GuideContributing-Guide](Contributing-Guide](Contributing-Guide), and [](Testing-GuideTesting-Guide](Testing-Guide](Testing-Guide). |
| 193 |
|
| 194 |
## Related Pages |
| 195 |
|
| 196 |
- [](Architecture-OverviewArchitecture-Overview](Architecture-Overview](Architecture-Overview) |
| 197 |
- [](Feature-ModulesFeature-Modules](Feature-Modules](Feature-Modules) |
| 198 |
- [](Environment-ConfigurationEnvironment-Configuration](Environment-Configuration](Environment-Configuration) |
| 199 |
- [](WooCommerce-IntegrationWooCommerce-Integration](WooCommerce-Integration](WooCommerce-Integration) |
| 200 |
- [](Troubleshooting-FAQTroubleshooting-FAQ](Troubleshooting-FAQ](Troubleshooting-FAQ) |
| 201 |
|
