Set up FrameWoo

1. Create or access your FrameWoo account

Open FrameWoo from the Framer Plugins menu. Create a free account if this is your first visit, or sign in with your existing FrameWoo account. This is separate from your WooCommerce store login.

1. Select Continue with Google, or enter your account details.
2. For a new account, accept the Terms and Privacy Policy and select Create account.
3. For an existing account, select Sign in.

2. Open the store setup

FrameWoo presents three milestones in order: WordPress helper, Store access, and Framer CMS. Complete each milestone before moving to the next.

1. Select WordPress helper to begin.
2. Return to this screen after each milestone to continue.

3. Install the WordPress helper

The helper enables product imagery, CORS, and the account and order APIs used by your Framer site.

1. Select Download in FrameWoo, or download the helper here.
2. In WordPress, go to Plugins → Add New → Upload Plugin.
3. Upload the zip, select Install Now, then Activate.
4. Publish your Framer site so FrameWoo can detect its domains.
5. Add each detected domain to the helper CORS whitelist.

Plugins → Add New → Upload Plugin
framerwoo-helper.zip → Install Now → Activate

Configure permalinks

In WordPress, go to Settings → Permalinks. Choose a human-readable structure other than Plain. Post name is recommended.

1. Open Settings → Permalinks.
2. Select Post name.
3. Select Save Changes.
4. Return to FrameWoo and select Continue.

Reference: WooCommerce REST API requirements.

4. Connect your WooCommerce store

Enter your store URL and connect with read-only REST API access. Read permission is sufficient for FrameWoo product sync.

Generate read-only API keys

1. In WordPress, go to WooCommerce → Settings → Advanced → REST API.
2. Select Create an API key or Add Key.
3. Enter FrameWoo as the description and choose a WordPress user.
4. Set Permissions to Read.
5. Select Generate API Key.
6. Copy the Consumer Key and Consumer Secret into FrameWoo.
7. Enter the Store URL and select Test connection.

Copy the secret before leaving WordPress. WooCommerce displays the Consumer Secret only once.

You can select Use one-click connect instead when your store supports the approval flow. FrameWoo requests read and sync permissions only.

Reference: WooCommerce: Generate API keys.

5. Create the Framer Products collection

After the store connection succeeds, create the managed Framer CMS collection that will receive WooCommerce product data.

1. Keep Products as the collection name, or enter a new name.
2. Select Create collection.
3. Open the new collection in the Framer CMS panel.

6. Run the first product sync

Open FrameWoo from inside the Products collection. Select the collection, start the sync, and wait for the success confirmation.

1

2

3

1. Open the Products collection in Framer CMS.
2. Open FrameWoo from the collection Plugins control.
3. Select the Products collection marked Ready.
4. Select Sync Products.
5. Wait until FrameWoo reports Sync successful.

7. Manage sync and add store components

After the first import, use Manage for later syncs and Components to insert WooCommerce elements into your Framer pages.

Choose the correct sync mode

• Continue from last sync: imports only new or changed products.
• Sync from scratch: re-imports every product.
• Custom CMS Fields: maps WooCommerce metadata to collection fields.

Add a component

1. Open the Components tab in FrameWoo.
2. Select the site and Products collection from the top controls.
3. Find a component such as Product Price, Stock Indicator, or Add To Cart.
4. Select the + button to insert it on the Framer canvas.