・
「WooCommerceとWebflowを使ってECサイトとコーポレートサイトを運営しているけど、商品情報を両方に手入力するのが面倒…」
「WooCommerceで受けた注文情報をWebflowのCMSに手動で反映させているが、手間がかかるしミスも起きやすい…」
このように、EコマースプラットフォームとWebサイトビルダー間の手作業によるデータ連携に限界を感じていませんか？
もし、<span class="mark-yellow">WooCommerceの商品情報や注文データを、自動的にWebflowのCMSアイテムとして登録・更新する仕組み</span>があれば、これらの定型業務から解放され、サイトコンテンツの企画やマーケティング戦略といった、より重要な業務に集中できる時間を生み出すことができます。
今回ご紹介する自動化の設定は、専門的なプログラミング知識がなくてもノーコードで簡単に構築でき、日々の更新作業にかかる手間や時間を大幅に削減できるので、ぜひこの機会に導入して、サイト運営業務をもっと楽にしましょう！
Yoomには<span class="mark-yellow">WooCommerceとWebflowを連携するためのテンプレート</span>が用意されているので、今すぐ試したい方は以下よりバナーをクリックしてスタートしましょう！
WooCommerceとWebflowのAPIを連携させることで、WooCommerceで発生したイベントをトリガーに、WebflowのCMSアイテムを自動で作成・更新することが可能になります。
これにより、これまで手作業で行っていた二重のデータ入力をなくし、ヒューマンエラーを防ぎながら、サイト間の情報同期を迅速かつ正確に行うことができます。
ここでは具体的な自動化の例を複数ご紹介しますので、気になる内容があれば、ぜひクリックしてみてください！
WooCommerceに新しい商品を追加するたびに、その情報をWebflowで構築したサイトの製品紹介ページやブログ記事に手動で転記する作業は、非常に手間がかかり、入力ミスが発生する原因にもなります。
この連携を利用すれば、WooCommerceに商品が作成された瞬間に、<span class="mark-yellow">商品名、価格、画像などの情報がWebflowのCMSアイテムとして自動的に追加される</span>ため、商品登録にかかる二度手間を完全になくし、迅速なサイト更新を実現します。
WooCommerceで受けた注文情報を、顧客実績や導入事例としてWebflowサイトに掲載する場合、手動でのデータ移行は更新漏れや遅延につながりがちです。
この自動化を導入することで、WooCommerceで新規注文が作成されると、<span class="mark-yellow">注文情報をリアルタイムでWebflowの指定したCMSコレクションにアイテムとして追加できる</span>ので、常に最新の情報をサイトに反映させ、データの一元管理や可視化を促進します。
それでは、実際にWooCommerceとWebflowを連携したフローを作成してみましょう。
今回はYoomというノーコード連携ツールを使用して、プログラミング不要でWooCommerceとWebflowの連携を進めていきますので、もしまだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。
[Yoomとは]
今回は「WooCommerceで商品が作成されたら、Webflowにアイテムを追加する」フローを作成していきます。
作成の流れは大きく分けて以下の通りです。
はじめに、WooCommerceとWebflowをYoomに接続するためのマイアプリ登録を行いましょう。
事前にマイアプリ登録を済ませておくと、自動化フローの設定がスムーズに進められますよ！
1.Yoomページ画面左側のマイアプリをクリックし、「新規接続」を選択します。
2.右上の検索窓に「WooCommerce」と入力し、検索結果からWooCommerceのアイコンを選択します。
表示された画面で、必須項目を入力し、「追加」をクリックしましょう。
3.続いてWebflowをマイアプリ登録します。
先ほどと同様に、連携可能なアプリ一覧からWebflowを検索します。
次の画面で、必須項目を入力し、「追加」をクリックしましょう。
マイアプリにWooCommerceとWebflowが表示されていれば、登録完了です。
ここから、実際にフローを作っていきましょう！
簡単に設定できるようテンプレートを利用します。以下のバナーの「試してみる」をクリックして、テンプレートをコピーしてください。
クリックすると、テンプレートがお使いのYoom画面に自動的にコピーされます。
「OK」をクリックして、設定を進めましょう！
※コピーしたテンプレートは、「マイプロジェクト」内の「フローボット」に、「【コピー】WooCommerceで商品が作成されたら、Webflowにアイテムを追加する」という名前で格納されています。
「あれ？テンプレートどこいった？」となった際には、マイプロジェクトから確認してみてくださいね！
1.まずは、アプリトリガー設定です。
先ほどの画面で「OK」をクリックして、表示された画面のアプリトリガー「商品が作成されたら」をクリックしましょう。
2.連携アカウントとアカウント選択画面が表示されるので、設定内容を確認しましょう。
タイトルは変更も可能です。
連携するアカウント情報には、ステップ1で連携したアカウント情報が反映されています。トリガーアクションはそのままにして、「次へ」をクリックしてください。
3.「TOPページURL」は、入力欄下の説明に従って、入力してください。
入力したら、「テスト」を実行し「次へ」をクリックしましょう。
4.表示された画面で、Webhookイベントを送信、またはトリガーとなるイベントを実行します。
4-1.WooCommerceの画面で、商品を作成しましょう。
テスト用のため、商品内容は架空の情報（「株式会社test」や「テスト太郎」など）でOKです！
4-2.作成したら、Yoomの画面に戻りましょう。
※今回の場合、WooCommerceにおける商品の作成が、フローボット起動のトリガーとなります。
5.戻ってきたら「テスト」をクリックし、「取得した値」にデータが抽出されていることを確認してください。
確認したら「保存する」をクリックしましょう。
ここでは詳細が表示されていませんが、本来は詳細のデータが取得できます。
取得した値は、後続の設定で活用できます！
※取得した値とは？
トリガーやオペレーション設定時に、「テスト」を実行して取得した値です。
取得した値は、後続のオペレーション設定時の値としてご利用いただくことができ、フローボットを起動する度に、変動した値となります。
※詳しくは、こちらをご参照ください。
1.アプリと連携する「コレクションにアイテムを追加」をクリックしましょう。
各項目を確認し、「次へ」をクリックします。
2.API接続設定を行います。
「サイトID」「コレクションID」は、入力欄をクリックして表示される候補から選択してください。
候補は、連携しているアカウントに紐づいて表示されます。
3.フィールド情報の各項目を設定していきましょう。
「フィールド」は、入力欄をクリックして表示される候補から選択してください。
「値」は、入力欄をクリックして表示される取得した値から選択してください。
取得した値を活用することで、値が固定化されず、毎回変わる情報に合わせた自動化が可能になります。
設定完了後は「テスト」を行い、実際にWebflowにアイテムが追加されることを確認してください。
確認後、保存しましょう。
全ての設定が完了すると、下図のようなポップアップが表示されます。
赤枠部分の「トリガーをON」をクリックすると、設定したフローボットが起動するので動作確認をしましょう！
今回はWooCommerceからWebflowへデータを連携する方法をご紹介しましたが、逆にWebflowからWooCommerceへのデータ連携を実施したい場合もあるかと思います。
その際は、下記のテンプレートも併せてご利用ください。
WebflowのCMSで管理している製品情報やコンテンツを、WooCommerceの商品として販売したい場合、手動で商品登録を行うのは非効率です。
この連携を活用すれば、Webflowで新しいアイテムが作成されると、<span class="mark-yellow">その情報を基にWooCommerceの商品が自動で作成される</span>ため、コンテンツとECサイトの連携がスムーズになり、販売機会の損失を防ぎます。
WebflowのEコマース機能で受けた注文を、基幹のECシステムであるWooCommerceに手動で入力し直している場合、この連携が役立ちます。
Webflowで新規注文が発生した際に、<span class="mark-yellow">その注文情報が自動でWooCommerceにも登録される</span>ので、注文情報の一元管理が実現し、在庫管理や売上分析の精度を向上させることができます。
Yoomでは、WooCommerceとWebflowに関しての様々な業務効率化テンプレートを提供しています。WooCommerceとWebflowでの操作をトリガーに、様々な業務工程を自動化することで業務の効率化と人的ミスの削減が可能です。
ご自身の業務に合わせて、これらのテンプレートもぜひ活用してみてくださいね！
WooCommerceで注文が発生したらNotionに注文情報を追加したり、Googleスプレッドシートの行追加をトリガーにWooCommerceに商品や顧客を追加したりと、ECサイトの運用を自動化できます。
Webflowのフォームが送信されたらNotionやGoogleスプレッドシートに自動で追加したり、注文が発生したらMicrosoft ExcelやSalesforceに追加したりと、サイト運営を自動化できます。
WooCommerceとWebflowの連携を自動化することで、<span class="mark-yellow">これまで手作業で行っていた商品情報や注文データの転記作業の手間を完全に削減し、入力ミスなどのヒューマンエラーを防ぐことができます。</span>
これにより、担当者は面倒な二重入力作業から解放され、常に正確な情報に基づいて業務を進められるようになり、本来注力すべきコンテンツ企画や顧客対応といったコア業務に集中できる環境が整います。
今回ご紹介したような業務自動化は、ノーコードツール「Yoom」を使うことで、プログラミングの知識がない方でも直感的な操作で簡単に業務フローを構築できます。
もし日々のサイト運営における手作業に課題を感じ、自動化に少しでも興味を持っていただけたなら、ぜひこちらから無料登録して、Yoomによる業務効率化を体験してみてください！
Q:連携はリアルタイムですか？Webflowのプラン上限は大丈夫？
A:アプリトリガーにはトリガーアクションに「Webhook起動」と記載があるものと記載がないものがあります。
今回設定したフローについては「Webhook起動」のため、トリガーとなるアクションが行われたらおおよそリアルタイムにフローボットが起動いたします。
なお、「Webhook起動」の記載がないトリガーアクションは、「トリガーの起動間隔」を選択いただく流れとなります。
トリガーの起動間隔について、詳しくはこちらをご参照ください。また、トリガーの起動間隔はプランによって異なります。ご注意ください。
Webflowは、無料プランでもWebflowの基本的な機能を利用できます。
まずは無料プランでWebflowを試してみて、必要に応じて有料プランにアップグレードするのがおすすめです。Webflow公式サイト
Q:連携が失敗した場合の通知や対処法は？
A:失敗する代表的な例としては、トリガーとなるアクションが実行されてもフローボットが起動しない、Webflowのプランにより、APIの呼び出し回数に制限がかかっている場合などが挙げられます。Webflowのプランをアップグレードするか、間隔を空けて再度トリガーとなるアクションを実行してみましょう。フローボットが失敗した場合、Yoomに登録しているメールアドレス宛に失敗したことをお知らせいたします。
Q:連携できる商品・注文データの項目は？
A:主に、商品名、商品価格、商品説明、商品画像、SKU、在庫数、重量などを連携できます。連携する項目は、Webflowでアイテムとして追加したい商品情報に基づいてカスタマイズ可能です。
.webp)
.webp)
