WooCommerceとWebflowの連携イメージ
【簡単設定】WooCommerceのデータをWebflowに自動的に連携する方法
Yoomを詳しくみる
この記事のテンプレートを試す
WooCommerceとWebflowの連携イメージ
フローボット活用術

2025-10-23

【簡単設定】WooCommerceのデータをWebflowに自動的に連携する方法

Kanade Nohara
Kanade Nohara

■概要

ECサイトの運営でWooCommerceをご利用の場合、デザイン性の高いWebflowでサイトを構築している方も多いのではないでしょうか。しかし、WooCommerceに新商品を追加するたびに、Webflow側にも手作業で情報を反映させるのは手間がかかります。このワークフローは、そうしたWooCommerceとWebflow間の手作業による連携を自動化し、商品登録のプロセスを効率化します。

■このテンプレートをおすすめする方

  • WooCommerceとWebflowを利用し、商品情報の手入力による二度手間を解消したいECサイト担当者の方
  • 商品登録からサイト反映までの時間を短縮し、マーケティング活動を迅速化したい方
  • WebflowとWooCommerceの連携を自動化し、サイト運営の効率を高めたいと考えている方

■このテンプレートを使うメリット

  • WooCommerceへの商品登録をトリガーにWebflowへ自動でアイテムが追加され、手作業での転記にかかっていた時間を削減できます。
  • 手動でのデータ入力で起こりがちな入力ミスや更新漏れといったヒューマンエラーを防ぎ、サイト情報の正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとWooCommerceをYoomと連携します。
  2. 次に、トリガーでWooCommerceを選択し、「商品が作成されたら」というアクションを設定します。これにより、WooCommerceに新しい商品が登録されるとフローが自動で起動します。
  3. 最後に、オペレーションでWebflowの「コレクションにアイテムを追加」アクションを設定します。トリガーで取得した商品名や価格、説明などの情報を紐付け、Webflowの指定したコレクションにアイテムとして追加します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、どのコレクションに追加するかを指定する必要があります。ご自身のWebflowサイトの構成に合わせて、対象のコレクションIDを設定してください。
  • アイテムとして追加する各項目(名前、スラッグ、商品説明など)に、トリガーであるWooCommerceから取得したどの情報を割り当てるかをマッピングしてください。これにより、WooCommerceの商品情報がWebflowの正しいフィールドに反映されます。

■注意事項

  • WooCommerce、WebflowのそれぞれとYoomを連携してください。

「WooCommerceとWebflowを使ってECサイトとコーポレートサイトを運営しているけど、商品情報を両方に手入力するのが面倒…」
「WooCommerceで受けた注文情報をWebflowのCMSに手動で反映させているが、手間がかかるしミスも起きやすい…」
このように、EコマースプラットフォームとWebサイトビルダー間の手作業によるデータ連携に限界を感じていませんか?

もし、WooCommerceの商品情報や注文データを、自動的にWebflowのCMSアイテムとして登録・更新する仕組みがあれば、これらの定型業務から解放され、サイトコンテンツの企画やマーケティング戦略といった、より重要な業務に集中できる時間を生み出すことができます。

今回ご紹介する自動化の設定は、専門的なプログラミング知識がなくてもノーコードで簡単に構築でき、日々の更新作業にかかる手間や時間を削減できるので、ぜひこの機会に導入して、サイト運営業務をもっと楽にしましょう!

とにかく早く試したい方へ

YoomにはWooCommerceとWebflowを連携するためのテンプレートが用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう!


■概要

ECサイトの運営でWooCommerceをご利用の場合、デザイン性の高いWebflowでサイトを構築している方も多いのではないでしょうか。しかし、WooCommerceに新商品を追加するたびに、Webflow側にも手作業で情報を反映させるのは手間がかかります。このワークフローは、そうしたWooCommerceとWebflow間の手作業による連携を自動化し、商品登録のプロセスを効率化します。

■このテンプレートをおすすめする方

  • WooCommerceとWebflowを利用し、商品情報の手入力による二度手間を解消したいECサイト担当者の方
  • 商品登録からサイト反映までの時間を短縮し、マーケティング活動を迅速化したい方
  • WebflowとWooCommerceの連携を自動化し、サイト運営の効率を高めたいと考えている方

■このテンプレートを使うメリット

  • WooCommerceへの商品登録をトリガーにWebflowへ自動でアイテムが追加され、手作業での転記にかかっていた時間を削減できます。
  • 手動でのデータ入力で起こりがちな入力ミスや更新漏れといったヒューマンエラーを防ぎ、サイト情報の正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとWooCommerceをYoomと連携します。
  2. 次に、トリガーでWooCommerceを選択し、「商品が作成されたら」というアクションを設定します。これにより、WooCommerceに新しい商品が登録されるとフローが自動で起動します。
  3. 最後に、オペレーションでWebflowの「コレクションにアイテムを追加」アクションを設定します。トリガーで取得した商品名や価格、説明などの情報を紐付け、Webflowの指定したコレクションにアイテムとして追加します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、どのコレクションに追加するかを指定する必要があります。ご自身のWebflowサイトの構成に合わせて、対象のコレクションIDを設定してください。
  • アイテムとして追加する各項目(名前、スラッグ、商品説明など)に、トリガーであるWooCommerceから取得したどの情報を割り当てるかをマッピングしてください。これにより、WooCommerceの商品情報がWebflowの正しいフィールドに反映されます。

■注意事項

  • WooCommerce、WebflowのそれぞれとYoomを連携してください。

WooCommerceとWebflowを連携してできること

WooCommerceとWebflowのAPIを連携させることで、WooCommerceで発生したイベントをトリガーに、WebflowのCMSアイテムを自動で作成・更新することが可能になります。
これにより、これまで手作業で行っていた二重のデータ入力をなくし、ヒューマンエラーを防ぎながら、サイト間の情報同期を迅速かつ正確に行うことができます。

ここでは具体的な自動化の例を複数ご紹介しますので、気になる内容があれば、ぜひクリックしてみてください!

WooCommerceで商品が作成されたら、Webflowにアイテムを追加する

WooCommerceに新しい商品を追加するたびに、その情報をWebflowで構築したサイトの製品紹介ページやブログ記事に手動で転記する作業は、非常に手間がかかり、入力ミスが発生する原因にもなります。

この連携を利用すれば、WooCommerceに商品が作成された瞬間に、商品名、価格、画像などの情報がWebflowのCMSアイテムとして自動的に追加されるため、商品登録にかかる二度手間をなくし、迅速なサイト更新を実現します。


■概要

ECサイトの運営でWooCommerceをご利用の場合、デザイン性の高いWebflowでサイトを構築している方も多いのではないでしょうか。しかし、WooCommerceに新商品を追加するたびに、Webflow側にも手作業で情報を反映させるのは手間がかかります。このワークフローは、そうしたWooCommerceとWebflow間の手作業による連携を自動化し、商品登録のプロセスを効率化します。

■このテンプレートをおすすめする方

  • WooCommerceとWebflowを利用し、商品情報の手入力による二度手間を解消したいECサイト担当者の方
  • 商品登録からサイト反映までの時間を短縮し、マーケティング活動を迅速化したい方
  • WebflowとWooCommerceの連携を自動化し、サイト運営の効率を高めたいと考えている方

■このテンプレートを使うメリット

  • WooCommerceへの商品登録をトリガーにWebflowへ自動でアイテムが追加され、手作業での転記にかかっていた時間を削減できます。
  • 手動でのデータ入力で起こりがちな入力ミスや更新漏れといったヒューマンエラーを防ぎ、サイト情報の正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとWooCommerceをYoomと連携します。
  2. 次に、トリガーでWooCommerceを選択し、「商品が作成されたら」というアクションを設定します。これにより、WooCommerceに新しい商品が登録されるとフローが自動で起動します。
  3. 最後に、オペレーションでWebflowの「コレクションにアイテムを追加」アクションを設定します。トリガーで取得した商品名や価格、説明などの情報を紐付け、Webflowの指定したコレクションにアイテムとして追加します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、どのコレクションに追加するかを指定する必要があります。ご自身のWebflowサイトの構成に合わせて、対象のコレクションIDを設定してください。
  • アイテムとして追加する各項目(名前、スラッグ、商品説明など)に、トリガーであるWooCommerceから取得したどの情報を割り当てるかをマッピングしてください。これにより、WooCommerceの商品情報がWebflowの正しいフィールドに反映されます。

■注意事項

  • WooCommerce、WebflowのそれぞれとYoomを連携してください。

WooCommerceで注文が作成されたら、Webflowにアイテムを追加する

WooCommerceで受けた注文情報を、顧客実績や導入事例としてWebflowサイトに掲載する場合、手動でのデータ移行は更新漏れや遅延につながりがちです。

この自動化を導入することで、WooCommerceで新規注文が作成されると、注文情報をリアルタイムでWebflowの指定したCMSコレクションにアイテムとして追加できるので、常に最新の情報をサイトに反映させ、データの一元管理や可視化を促進します。


■概要

WooCommerceで受けた注文情報を、手作業でWebflowのCMSに登録する作業に手間を感じていませんか。こうした繰り返し行う作業は時間がかかるだけでなく、入力ミスといったヒューマンエラーの原因にもなり得ます。このワークフローは、WooCommerceとWebflowを連携し、注文の作成をトリガーとしてWebflowへアイテムを自動で追加します。ECサイトとWebサイト間のデータ連携を自動化し、手作業による負担やミスを減らすことが可能です。

■このテンプレートをおすすめする方

  • WooCommerceの注文データをWebflowに手作業で転記しているEC担当者の方
  • WooCommerceとWebflowを連携させ、データ入力の手間をなくしたいWebサイト運営者の方
  • ECサイトとWebサイト間の情報同期を自動化し、業務効率を改善したいと考えている方

■このテンプレートを使うメリット

  • WooCommerceでの注文発生後、自動でWebflowにアイテムが追加されるため、これまで手作業で行っていたデータ入力の時間を短縮できます。
  • 手作業でのコピー&ペーストが不要になることで、入力ミスや転記漏れといったヒューマンエラーの発生を防ぎ、データの正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとWooCommerceをYoomと連携します。
  2. 次に、トリガーでWooCommerceを選択し、「注文が作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでWebflowの「コレクションにアイテムを追加」アクションを設定します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowでアイテムを追加する際に、どのコレクションに追加するか、また、アイテムの各フィールドにWooCommerceから取得した注文情報のどの値を設定するかを任意で指定してください。

■注意事項

  • WooCommerce、WebflowのそれぞれとYoomを連携してください。

WooCommerceとWebflowの連携フローを作ってみよう

それでは、実際にWooCommerceとWebflowを連携したフローを作成してみましょう。

今回はYoomというノーコード連携ツールを使用して、プログラミング不要でWooCommerceとWebflowの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。

[Yoomとは]

フローの作成方法

今回は「WooCommerceで商品が作成されたら、Webflowにアイテムを追加する」フローを作成していきます。

作成の流れは大きく分けて以下の通りです。

  • WooCommerceとWebflowをマイアプリ連携
  • テンプレートをコピーする
  • WooCommerceのトリガー設定と各アクション設定
  • トリガーをONにして、フローの動作確認をする

■概要

ECサイトの運営でWooCommerceをご利用の場合、デザイン性の高いWebflowでサイトを構築している方も多いのではないでしょうか。しかし、WooCommerceに新商品を追加するたびに、Webflow側にも手作業で情報を反映させるのは手間がかかります。このワークフローは、そうしたWooCommerceとWebflow間の手作業による連携を自動化し、商品登録のプロセスを効率化します。

■このテンプレートをおすすめする方

  • WooCommerceとWebflowを利用し、商品情報の手入力による二度手間を解消したいECサイト担当者の方
  • 商品登録からサイト反映までの時間を短縮し、マーケティング活動を迅速化したい方
  • WebflowとWooCommerceの連携を自動化し、サイト運営の効率を高めたいと考えている方

■このテンプレートを使うメリット

  • WooCommerceへの商品登録をトリガーにWebflowへ自動でアイテムが追加され、手作業での転記にかかっていた時間を削減できます。
  • 手動でのデータ入力で起こりがちな入力ミスや更新漏れといったヒューマンエラーを防ぎ、サイト情報の正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとWooCommerceをYoomと連携します。
  2. 次に、トリガーでWooCommerceを選択し、「商品が作成されたら」というアクションを設定します。これにより、WooCommerceに新しい商品が登録されるとフローが自動で起動します。
  3. 最後に、オペレーションでWebflowの「コレクションにアイテムを追加」アクションを設定します。トリガーで取得した商品名や価格、説明などの情報を紐付け、Webflowの指定したコレクションにアイテムとして追加します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、どのコレクションに追加するかを指定する必要があります。ご自身のWebflowサイトの構成に合わせて、対象のコレクションIDを設定してください。
  • アイテムとして追加する各項目(名前、スラッグ、商品説明など)に、トリガーであるWooCommerceから取得したどの情報を割り当てるかをマッピングしてください。これにより、WooCommerceの商品情報がWebflowの正しいフィールドに反映されます。

■注意事項

  • WooCommerce、WebflowのそれぞれとYoomを連携してください。

ステップ1:WooCommerceとWebflowをマイアプリ連携

はじめに、WooCommerceとWebflowをYoomに接続するためのマイアプリ登録を行いましょう。
事前にマイアプリ登録を済ませておくと、自動化フローの設定がスムーズに進められますよ!

1.Yoomページ画面左側のマイアプリをクリックし、「新規接続」を選択します。

2.右上の検索窓に「WooCommerce」と入力し、検索結果からWooCommerceのアイコンを選択します。
表示された画面で、必須項目を入力し、「追加」をクリックしましょう。

3.続いてWebflowをマイアプリ登録します。
先ほどと同様に、連携可能なアプリ一覧からWebflowを検索します。
次の画面で、必須項目を入力し、「追加」をクリックしましょう。

マイアプリにWooCommerceとWebflowが表示されていれば、登録完了です。

ステップ2:テンプレートをコピーする

ここから、実際にフローを作っていきましょう!

簡単に設定できるようテンプレートを利用します。以下のバナーの「試してみる」をクリックして、テンプレートをコピーしてください。


■概要

ECサイトの運営でWooCommerceをご利用の場合、デザイン性の高いWebflowでサイトを構築している方も多いのではないでしょうか。しかし、WooCommerceに新商品を追加するたびに、Webflow側にも手作業で情報を反映させるのは手間がかかります。このワークフローは、そうしたWooCommerceとWebflow間の手作業による連携を自動化し、商品登録のプロセスを効率化します。

■このテンプレートをおすすめする方

  • WooCommerceとWebflowを利用し、商品情報の手入力による二度手間を解消したいECサイト担当者の方
  • 商品登録からサイト反映までの時間を短縮し、マーケティング活動を迅速化したい方
  • WebflowとWooCommerceの連携を自動化し、サイト運営の効率を高めたいと考えている方

■このテンプレートを使うメリット

  • WooCommerceへの商品登録をトリガーにWebflowへ自動でアイテムが追加され、手作業での転記にかかっていた時間を削減できます。
  • 手動でのデータ入力で起こりがちな入力ミスや更新漏れといったヒューマンエラーを防ぎ、サイト情報の正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとWooCommerceをYoomと連携します。
  2. 次に、トリガーでWooCommerceを選択し、「商品が作成されたら」というアクションを設定します。これにより、WooCommerceに新しい商品が登録されるとフローが自動で起動します。
  3. 最後に、オペレーションでWebflowの「コレクションにアイテムを追加」アクションを設定します。トリガーで取得した商品名や価格、説明などの情報を紐付け、Webflowの指定したコレクションにアイテムとして追加します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Webflowの「コレクションにアイテムを追加」アクションを設定する際、どのコレクションに追加するかを指定する必要があります。ご自身のWebflowサイトの構成に合わせて、対象のコレクションIDを設定してください。
  • アイテムとして追加する各項目(名前、スラッグ、商品説明など)に、トリガーであるWooCommerceから取得したどの情報を割り当てるかをマッピングしてください。これにより、WooCommerceの商品情報がWebflowの正しいフィールドに反映されます。

■注意事項

  • WooCommerce、WebflowのそれぞれとYoomを連携してください。

クリックすると、テンプレートがお使いのYoom画面に自動的にコピーされます。
「OK」をクリックして、設定を進めましょう!

※コピーしたテンプレートは、「マイプロジェクト」内の「フローボット」に、「【コピー】WooCommerceで商品が作成されたら、Webflowにアイテムを追加する」という名前で格納されています。
「あれ?テンプレートどこいった?」となった際には、マイプロジェクトから確認してみてくださいね!

ステップ3:WooCommerceのトリガー設定

1.まずは、アプリトリガー設定です。
先ほどの画面で「OK」をクリックして、表示された画面のアプリトリガー「商品が作成されたら」をクリックしましょう。

2.連携アカウントとアカウント選択画面が表示されるので、設定内容を確認しましょう。
タイトルは変更も可能です。
連携するアカウント情報には、ステップ1で連携したアカウント情報が反映されています。トリガーアクションはそのままにして、「次へ」をクリックしてください。

3.「TOPページURL」は、入力欄下の説明に従って、入力してください。
入力したら、「テスト」を実行し「次へ」をクリックしましょう。

4.表示された画面で、Webhookイベントを送信、またはトリガーとなるイベントを実行します。

4-1.WooCommerceの画面で、商品を作成しましょう。
テスト用のため、商品内容は架空の情報(「株式会社test」や「テスト太郎」など)でOKです!

4-2.作成したら、Yoomの画面に戻りましょう。

※今回の場合、WooCommerceにおける商品の作成が、フローボット起動のトリガーとなります。

5.戻ってきたら「テスト」をクリックし、「取得した値」にデータが抽出されていることを確認してください。
確認したら「保存する」をクリックしましょう。
ここでは詳細が表示されていませんが、本来は詳細のデータが取得できます。
取得した値は、後続の設定で活用できます!

※取得した値とは?
トリガーやオペレーション設定時に、「テスト」を実行して取得した値です。
取得した値は、後続のオペレーション設定時の値としてご利用いただくことができ、フローボットを起動する度に、変動した値となります。
※詳しくは、こちらをご参照ください。

ステップ4:Webflowの設定

1.アプリと連携する「コレクションにアイテムを追加」をクリックしましょう。

各項目を確認し、「次へ」をクリックします。

2.API接続設定を行います。
「サイトID」「コレクションID」は、入力欄をクリックして表示される候補から選択してください。
候補は、連携しているアカウントに紐づいて表示されます。

3.フィールド情報の各項目を設定していきましょう。

「フィールド」は、入力欄をクリックして表示される候補から選択してください。

「値」は、入力欄をクリックして表示される取得した値から選択してください。
取得した値を活用することで、値が固定化されず、毎回変わる情報に合わせた自動化が可能になります。


設定完了後は「テスト」を行い、実際にWebflowにアイテムが追加されることを確認してください。

確認後、保存しましょう。

ステップ5:トリガーボタンをONにして、フローの動作確認をする

全ての設定が完了すると、下図のようなポップアップが表示されます。

赤枠部分の「トリガーをON」をクリックすると、設定したフローボットが起動するので動作確認をしましょう!

WebflowのデータをWooCommerceに連携したい場合

今回はWooCommerceからWebflowへデータを連携する方法をご紹介しましたが、逆にWebflowからWooCommerceへのデータ連携を実施したい場合もあるかと思います。

その際は、下記のテンプレートも併せてご利用ください。

Webflowでアイテムが作成されたら、WooCommerceで商品を作成する

WebflowのCMSで管理している製品情報やコンテンツを、WooCommerceの商品として販売したい場合、手動で商品登録を行うのは非効率です。

この連携を活用すれば、Webflowで新しいアイテムが作成されると、その情報を基にWooCommerceの商品が自動で作成されるため、コンテンツとECサイトの連携がスムーズになり、販売機会の損失を防ぎます。


■概要

Webflowでデザイン性の高いサイトを構築し、WooCommerceでEコマースを展開しているものの、商品情報の二重入力に手間を感じていませんか?手作業での登録は時間がかかるだけでなく、入力ミスの原因にもなり得ます。

このワークフローを活用すれば、Webflowのコレクションにアイテムを追加するだけで、WooCommerceに商品情報が自動で作成されます。WooCommerceとWebflowのスムーズな連携を実現し、商品登録に関わる一連の作業を効率化します。

■このテンプレートをおすすめする方

  • WebflowとWooCommerceを併用し、商品を手作業で登録しているECサイトの運営担当者の方
  • WooCommerceとWebflowを連携させ、商品管理のプロセスを自動化したいと考えている方
  • サイト更新と商品登録の二重入力をなくし、本来のコア業務に集中したいと考えている方

■このテンプレートを使うメリット

  • Webflowのコレクションにアイテムが追加されると、自動でWooCommerceへ商品が作成されるため、これまで手作業に費やしていた時間を短縮できます。
  • 手作業によるデータ転記が不要になるため、商品情報の入力間違いや登録漏れといったヒューマンエラーの発生を防ぎ、データの正確性を保ちます。

■フローボットの流れ

  1. はじめに、WebflowとWooCommerceをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「コレクションのアイテムが作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでWooCommerceの「商品を作成」アクションを設定し、Webflowから取得した情報をもとに商品が作成されるようにします。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • WooCommerceで商品を作成するアクションを設定する際に、Webflowのトリガーで取得したアイテムの情報を活用して、商品名や価格、説明文などの各項目を設定してください。

■注意事項

  • Webflow、WooCommerceのそれぞれとYoomを連携してください。
  • WebflowのDescriptionを取得する方法は下記を参照ください。
    https://intercom.help/yoom/ja/articles/5404443

Webflowで新規注文が発生したら、WooCommerceで注文を作成する

WebflowのEコマース機能で受けた注文を、基幹のECシステムであるWooCommerceに手動で入力し直している場合、この連携が役立ちます。

Webflowで新規注文が発生した際に、その注文情報が自動でWooCommerceにも登録されるので、注文情報の一元管理が実現し、在庫管理や売上分析の精度を向上させることができます。


■概要

Webflowで構築したサイトで新規注文が入るたびに、その情報を手作業でWooCommerceに転記していませんか。この繰り返し作業は時間がかかるだけでなく、入力ミスといったヒューマンエラーの原因にもなりかねません。このワークフローは、WebflowとWooCommerceの連携を自動化するものであり、Webflowで新規注文が発生すると、自動でWooCommerceに注文情報を作成し、ECサイト運営の効率化を実現します。

■このテンプレートをおすすめする方

  • WebflowとWooCommerceを併用し、注文データの連携に手間を感じているEC担当者の方
  • 手作業によるデータ入力のミスをなくし、注文管理の正確性を高めたいと考えている方
  • ECサイトのバックオフィス業務を自動化し、コア業務に集中できる環境を整えたい事業者の方

■このテンプレートを使うメリット

  • Webflowでの注文発生をトリガーに、自動でWooCommerceへ注文が作成されるため、これまで手作業での転記に費やしていた時間を短縮できます。
  • システムが自動でデータを連携するため、手入力による注文情報の入力間違いや転記漏れといったヒューマンエラーの防止に繋がります。

■フローボットの流れ

  1. はじめに、WebflowとWooCommerceをYoomと連携します。
  2. 次に、トリガーでWebflowを選択し、「新規注文が発生したら」というアクションを設定します。
  3. 次に、オペレーションでテキスト抽出機能を使い、トリガーで取得した注文情報から、後続の処理で必要な情報を抽出します。
  4. 最後に、オペレーションでWooCommerceの「注文の作成」アクションを設定し、前のステップで抽出した情報を元に注文データを作成します。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • テキスト抽出オペレーションでは、Webflowの注文情報からどの項目(顧客名、商品ID、金額など)を抽出するかを任意で設定してください。
  • WooCommerceで注文を作成するアクションでは、前のステップで取得した値などを活用し、注文内容の各項目を任意で設定してください。

■注意事項

  • Webflow、WooCommerceのそれぞれとYoomを連携してください。
  • WebflowのDescriptionを取得する方法は下記を参照ください。
    https://intercom.help/yoom/ja/articles/5404443

WooCommerceやWebflowを活用したその他の自動化テンプレート

Yoomでは、WooCommerceとWebflowに関しての様々な業務効率化テンプレートを提供しています。WooCommerceとWebflowでの操作をトリガーに、様々な業務工程を自動化することで業務の効率化と人的ミスの削減が可能です。
ご自身の業務に合わせて、これらのテンプレートもぜひ活用してみてくださいね!

WooCommerceを使った便利な自動化例

WooCommerceで注文が発生したらNotionに注文情報を追加したり、Googleスプレッドシートの行追加をトリガーにWooCommerceに商品や顧客を追加したりと、ECサイトの運用を自動化できます。


■概要

Googleスプレッドシートで行が追加されたらWooCommerceに商品を追加するフローです。

■このテンプレートをおすすめする方

1.Google スプレッドシートを業務に活用している方

・共有シートを活用して複数人で情報の蓄積を行う方

・自社で取り扱う商品情報の一元管理に活用している方

2.WooCommerceを活用している方

・ECサイトの構築に使用している方


■このテンプレートを使うメリット

WooCommerceはSEO対策も行うことができるECサイトの構築を実現できるプラグインです。
しかし、Google スプレッドシートで登録された商品情報を手入力してWooCommerceに登録を行うのは、人的ミスの発生の可能性があります。

ヒューマンエラーの発生を回避して正確な情報の登録を行いたいと考える方にこのフローは有効です。
このフローを使用と、Google スプレッドシートに追加された情報を引用してWooCommerceに登録を行い、共有する情報の正確性を保つことができます。
登録にかかっていた手間や時間を省くことで、業務をスムーズに進行させることができます。
また他の業務に注力できる環境を作ることで、生産性向上へと繋げます。

■注意事項

・WooCommerce、Google スプレッドシートのそれぞれとYoomを連携してください。

・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。

・プランによって最短の起動間隔が異なりますので、ご注意ください。


■概要

Google スプレッドシートで行が更新されたらWooCommerceの顧客情報も更新するフローです。

■このテンプレートをおすすめする方

1.Google スプレッドシートを業務に活用している方

・顧客情報の蓄積や管理を担当する方

・シートの共有によって効率的に業務進行したい方

2.WooCommerceを活用している方

・ECサイトの構築に使用している方


■このテンプレートを使うメリット

WooCommerceは初期費用を抑えたECサイト開発に活用できるツールです。
しかし、顧客情報の管理で活用しているGoogle スプレッドシートで情報の更新が行われたらWooCommerceに手作業で反映させなければならす、ストレスの原因となるかもしれません。

チームメンバー全員がコアタスクに集中できる環境を整備したいと考える方にこのフローは有効です。
このフローを使用すると、Google スプレッドシートで顧客情報が更新されたらWooCommerceの情報を自動更新し、手作業を省きます。
自動化によって更新業務に手を止めることなく重要なタスクの解決を行うことができ、業務進行を円滑にします。
また引用した情報を使用することで、ヒューマンエラーを未然に防ぎます。

■注意事項

・WooCommerce、Google スプレッドシートのそれぞれとYoomを連携してください。

・トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。

・プランによって最短の起動間隔が異なりますので、ご注意ください。


■概要

WooCommerceで注文が発生したらNotionに追加するフローです。

■このテンプレートをおすすめする方

1.データ分析を担当している方

・Notionで注文情報を一元管理している方

・注文情報から売上の傾向やキャンペーンの効果を測定している方

2.オンラインストアで自社の製品やサービスを販売する企業

・WooCommerceでオンラインストアを運営する企業

・注文情報をNotionに手動で連携している方


■このテンプレートを使うメリット

WooCommerceは多様な商品の販売ができるECプラットフォームです。
しかし、注文情報を元に売上やキャンペーンの効果を測定するためにNotionへのデータ連携を行っている場合、手動作業が手間だと感じているかもしれません。

このテンプレートは、WooCommerceで注文が発生するとNotionへの注文情報の連携を自動化することができるため、業務を効率化できます。
Notionへのデータ連携が自動化されることで、手動作業によるヒューマンエラーを防止し、データ管理を正確に行うことが可能です。

また、チャットツールと連携することでNotionへデータ連携が発生すると通知を出せるため、注文情報をスピーディーに把握することができます。

■注意事項

・WooCommerce、NotionのそれぞれとYoomを連携してください。


■概要

ECサイトの運営において、WooCommerceで新しい顧客が作成されるたびに、その情報を手作業でSalesforceへ登録するのは手間がかかる作業ではないでしょうか。この手入力のプロセスは、時間的なコストだけでなく、入力ミスや登録漏れといったヒューマンエラーの原因にもなり得ます。このワークフローを活用すれば、WooCommerceで顧客が作成されたタイミングで、Salesforceへ顧客情報が自動で追加されるため、こうした課題をスムーズに解消できます。

■このテンプレートをおすすめする方

  • WooCommerceとSalesforce間で発生する顧客データの転記作業をなくしたいEC担当者の方
  • 顧客情報の登録ミスや漏れを防ぎ、データ管理の正確性を向上させたいと考えている方
  • ECサイトの新規顧客に対し、迅速なフォローアップ体制を構築したい営業マネージャーの方

■このテンプレートを使うメリット

  • WooCommerceで顧客が作成されると、Salesforceへ自動で情報が登録されるため、これまで手作業に費やしていた時間を短縮することができます。
  • 手作業によるデータ転記が不要になることで、入力間違いや登録漏れといったヒューマンエラーのリスク軽減に繋がります。

■フローボットの流れ

  1. はじめに、WooCommerceとSalesforceをYoomと連携します。
  2. 次に、トリガーでWooCommerceを選択し、「顧客が作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでSalesforceの「レコードを追加する」アクションを設定し、トリガーで取得した顧客情報を紐付けます。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • Salesforceにレコードを追加する際、どのオブジェクト(リード、取引先責任者など)に追加するかを任意で設定可能です。
  • WooCommerceから取得した顧客情報(氏名、メールアドレス、住所など)を、Salesforceのどの項目に割り当てるかを自由にカスタマイズできます。

■注意事項

  • WooCommerce、SalesforceのそれぞれとYoomを連携してください。
  • Salesforceはチームプラン・サクセスプランでのみご利用いただけるアプリとなっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
  • チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。

■概要

WooCommerceで新しい顧客が作成されるたびに、その情報を手作業でHubSpotに入力し直す作業は、時間がかかるだけでなく入力ミスも起こりがちです。
日々の業務に追われる中で、こうした単純作業が負担に感じられることも少なくありません。
このワークフローを活用すれば、WooCommerceで顧客が作成された際に、自動でHubSpotにコンタクトを追加できるため、手作業による連携の手間やミスをなくし、効率的な顧客管理を実現します。

■このテンプレートをおすすめする方

  • WooCommerceとHubSpotの両方を利用し、顧客情報の連携に手間を感じている方
  • ECサイトの顧客データをマーケティング活動へ迅速に活用したいと考えている担当者の方
  • 手作業によるデータ入力のミスをなくし、顧客情報の一元管理を徹底したい方

■このテンプレートを使うメリット

  • WooCommerceでの顧客作成をトリガーに、自動でHubSpotへコンタクトが作成されるため、これまで手作業に費やしていた時間を短縮することができます。
  • 手作業でのデータ転記がなくなることで、情報の入力間違いや連携漏れといったヒューマンエラーのリスク軽減に繋がります。

■フローボットの流れ

  1. はじめに、WooCommerceとHubSpotをYoomと連携します。
  2. 次に、トリガーでWooCommerceを選択し、「顧客が作成されたら」というアクションを設定します。
  3. 最後に、オペレーションでHubSpotを選択し、「コンタクトの作成」アクションを設定し、WooCommerceから取得した顧客情報を紐付けます。

※「トリガー」:フロー起動のきっかけとなるアクション、「オペレーション」:トリガー起動後、フロー内で処理を行うアクション

■このワークフローのカスタムポイント

  • このワークフローでは顧客情報の連携先としてHubSpotを設定していますが、お使いの環境に合わせて他のツールに連携先を変更することも可能です。

■注意事項

  • WooCommerceとHubSpotのそれぞれとYoomを連携してください。

Webflowを使った便利な自動化例

Webflowのフォームが送信されたらNotionやGoogleスプレッドシートに自動で追加したり、注文が発生したらMicrosoft ExcelやSalesforceに追加したりと、サイト運営を自動化できます。


■概要

Webflowで注文が発生したらGoogleスプレッドシートに追加するフローです。

■このテンプレートをおすすめする方

1.WebflowでWebサイトの運営を担当している方

・自社のECサイト運営を担当している方

・WebflowとGoogleスプレッドシートの連携を効率化したい方

2.Google スプレッドシートを利用してデータ管理をしている方

・Google スプレッドシートで商品の在庫管理や受注管理を担当している方

・Webflowからの注文情報を手動でGoogle スプレッドシートに追加している方

■このテンプレートを使うメリット

Webflowからの注文情報をGoogle スプレッドシートで管理している場合、手動による追加作業は手間です。
また、Webflowからの注文発生後にスピーディーな対応が求められる場合、手動作業は非効率的で時間がかかります。

このテンプレートは、Webflowで注文が発生すると自動でGoogle スプレッドシートに追加することができるため、注文情報の追加作業を効率化することができます。
Google スプレッドシートへの注文情報の追加がスピーディーになることで、在庫管理や受注管理の業務をスムーズに進めることが可能です。

注文情報の入力ミスや転機漏れも低減するため、データの確認や分析業務が楽になります。

■注意事項

・Webflow、GoogleスプレッドシートのそれぞれとYoomを連携してください。


■概要

Webflowのフォームが送信されたらGoogleスプレッドシートに追加するフローです。

■このテンプレートをおすすめする方

1.Webflowを活用してWebサイトを構築している方

・Webflowで自社サイトやサービスを運営している企業

・フォーム内容をGoogleスプレッドシートに自動で追加したい方

2.Googleスプレッドシートで情報管理をしている方

・GoogleスプレッドシートでWebflowのフォーム内容を管理している方

・顧客情報の管理でGoogleスプレッドシートを活用している方

■このテンプレートを使うメリット

Webflowのフォームは、問い合わせやリード情報の取得に役立ちますが、都度ダッシュボードから確認するのは手間です。
また、Googleスプレッドシートにフォーム内容を手動で追加している場合、時間がかかり非効率的です。

このテンプレートは、Webflowのフォーム内容を自動でGoogleスプレッドシートに追加することができるため、ダッシュボードからフォーム内容を確認する手間を減らすことができます。
データ入力も自動化することができるため、手作業に比べてデータの正確性が高まり、情報管理を効率化することができます。

また、Googleスプレッドシートへの情報の追加がスピーディーに行われるため、チーム内の情報共有をスムーズにすることが可能です。

■注意事項

・Webflow、GoogleスプレッドシートのそれぞれとYoomを連携してください。


■概要

Webflowのフォームが送信されたらNotionに追加するフローです。

■このテンプレートをおすすめする方

1.WebflowでWebサイトを管理している方

・問い合わせやリード情報をWebflowのフォームから収集している企業

・フォーム情報をNotionへ自動で追加したい方

2.業務管理でNotionを使用している方

・Notionで問い合わせ内容やリード情報を一元管理している方

・手作業によるNotionへのデータ入力を自動化したい方

■このテンプレートを使うメリット

Webflowにフォームを設置することで、問い合わせやリード情報を効率的に取得することができます。
しかし、フォーム内容は都度ダッシュボードにログインして確認する必要があり、手間だと感じているかもしれません。

このテンプレートは、Webflowから送信されたフォーム内容をNotionに自動で追加することができます。
Webflowのダッシュボードに都度ログインしてフォーム内容を転記する作業が不要となるため、ヒューマンエラー発生を防止し、業務の効率化を図ることができます。

また、Notionにフォーム内容が自動で追加されることで、顧客対応のプロセスをスムーズに進めることが可能です。

■注意事項

・Webflow、NotionのそれぞれとYoomを連携してください。


■概要

Webflowのフォームが送信されたらSalesforceに追加するフローです。

■このテンプレートをおすすめする方

1.Webflowを使ってサイト管理をしている方

・問い合わせやリード情報の取得でフォームを活用している企業

・問い合わせやリードの対応をスピーディーに行いたい方

2.業務でSalesforceを使用している方

・Salesforceへのフォーム内容の追加を自動化したい方

・顧客情報をSalesforceで一元管理している営業チーム

■このテンプレートを使うメリット

Webflowに送信されたフォーム内容の確認は、ダッシュボードや指定のメールアドレスから確認できますが、毎回アクセスするのは非効率的です。
また、フォーム内容をSalesforceに手動で追加している場合、誤入力や入力漏れといったヒューマンエラーの発生が懸念されます。

このテンプレートは、SalesforceにWebflowのフォーム内容を自動で追加することができます。
手動によるデータ入力が不要となるため、データを正確にSalesforceに反映することができ、問い合わせやリード情報の管理が楽になります。

フローの後にチャットツールと連携することで、問い合わせやリード情報の反映後に特定のメンバーに情報共有することが可能です。

■注意事項

・Webflow、SalesforceのそれぞれとYoomを連携してください。

・Salesforceはチームプラン・サクセスプランでのみご利用いただけるアプリとなっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。

・チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。


■概要

Webflowで注文が発生したらMicrosoft Excelに追加するフローです。

■このテンプレートをおすすめする方

1.Webflowで自社の商品やサービスの販売をしている方

・自社のWebサイトを運営している企業

・注文情報の管理効率化でWebflowとMicrosoft Excelの連携を自動化したい方

2.受注業務でMicrosoft Excelを利用している方

・Webflowからの注文情報をMicrosoft Excelで一元管理している方

・Microsoft Excelへの情報入力を手動で行っている方

■このテンプレートを使うメリット

Microsoft ExcelでWebflowからの注文情報を一元管理している場合、手動によるデータ入力は時間がかかり非効率的です。
また、手動によるデータ入力はヒューマンエラーが発生や作業効率の低下を招く可能性があります。

Microsoft Excelへのデータ入力を自動化したい方に、このテンプレートは適しています。
Webflowで注文が発生するとMicrosoft Excelに自動で注文情報を追加することができるため、手動による作業を効率化することが可能です。

Microsoft Excelへのデータ入力が自動化されることで、作業時間の削減とヒューマンエラーの発生を低減することができます。

■注意事項

・Webflow、Microsoft ExcelのそれぞれとYoomを連携してください。

・Microsoft365(旧Office365)には、家庭向けプランと一般法人向けプラン(Microsoft365 Business)があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。

まとめ

WooCommerceとWebflowの連携を自動化することで、これまで手作業で行っていた商品情報や注文データの転記作業の手間を削減し、入力ミスなどのヒューマンエラーを防ぐことができます。

これにより、担当者は面倒な二重入力作業から解放され、常に正確な情報に基づいて業務を進められるようになり、本来注力すべきコンテンツ企画や顧客対応といったコア業務に集中できる環境が整います。

今回ご紹介したような業務自動化は、ノーコードツール「Yoom」を使うことで、プログラミングの知識がない方でも直感的な操作で簡単に業務フローを構築できます。

もし日々のサイト運営における手作業に課題を感じ、自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください!

よくあるご質問

Q:連携はリアルタイムですか?Webflowのプラン上限は大丈夫?

A:アプリトリガーにはトリガーアクションに「Webhook起動」と記載があるものと記載がないものがあります。
今回設定したフローについては「Webhook起動」のため、トリガーとなるアクションが行われたらおおよそリアルタイムにフローボットが起動いたします。
なお、「Webhook起動」の記載がないトリガーアクションは、「トリガーの起動間隔」を選択いただく流れとなります。
トリガーの起動間隔について、詳しくはこちらをご参照ください。また、トリガーの起動間隔はプランによって異なります。ご注意ください。

Webflowは、無料プランでもWebflowの基本的な機能を利用できます。
まずは無料プランでWebflowを試してみて、必要に応じて有料プランにアップグレードするのがおすすめです。Webflow公式サイト

Q:連携が失敗した場合の通知や対処法は?

A:失敗する代表的な例としては、トリガーとなるアクションが実行されてもフローボットが起動しない、Webflowのプランにより、APIの呼び出し回数に制限がかかっている場合などが挙げられます。Webflowのプランをアップグレードするか、間隔を空けて再度トリガーとなるアクションを実行してみましょう。フローボットが失敗した場合、Yoomに登録しているメールアドレス宛に失敗したことをお知らせいたします。

Q:連携できる商品・注文データの項目は?

A:主に、商品名、商品価格、商品説明、商品画像、SKU、在庫数、重量などを連携できます。連携する項目は、Webflowでアイテムとして追加したい商品情報に基づいてカスタマイズ可能です。

Yoomを使えば、今回ご紹介したような連携を
プログラミング知識なしで手軽に構築できます。
無料でYoomを試す
この記事を書いた人
Kanade Nohara
Kanade Nohara
SE・プログラマー、新卒採用アシスタントやテーマパークアクターなど、多種多様な業務の経験があります。 その中でもSE・プログラマーでは、企業のシステムを構築し業務効率化に取り組んでいました。 Yoomを使い、業務の負担を軽減するための実践的なアプローチ方法を、丁寧にわかりやすく発信していきます。
タグ
連携
Webflow
WooCommerce
自動
自動化
関連アプリ
お役立ち資料
Yoomがわかる!資料3点セット
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
詳しくみる