Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

売上を伸ばすWooCommerceポップアップの作り方(実証済みの6つの方法)

WooCommerceのポップアップを作成して売上を伸ばしたいですか?

ライトボックスポップアップを使用すると、簡単にカスタマイザーの注意を引き、購入を促すことができます。WooCommerceのポップアップを使用して、クーポンを提供したり、販売を促進したり、訪問者をメールリストに追加したりすることができます。

この投稿では、WooCommerceのポップアップを簡単に作成し、売上を伸ばす方法をご紹介します。

How to create a WooCommerce popup to increase sales

WooCommerceポップアップを作成する理由

主要なeコマースサイトで、なぜポップアップが表示され続けるのか不思議に思ったことはありませんか?

それは、ポップアップがサイト訪問者を有料カスタマーに変えるのに効果的だからです。適切なタイミングでカスタマイザーのメッセージを表示することで、オンラインショップは顧客の注意を素早く引くことができます。

WooCommerceストアを運営している場合、ポップアップを利用することができます:

  1. カスタマイザーにタイムリーなメッセージを配信することで、売上を伸ばすことができます。例えば、ユーザーがお店を出ようとした時にポップアップを表示させることができます。
  2. クーポンや送料無料を提供することで、お買い物カゴの売上げを回復させましょう。
  3. クロスセル(関連商品の販売促進)やアップセル(より優れた機能を持つ商品の販売促進)を通じて、より多くの商品を販売する。
  4. メールリストやソーシャルフォロワーを増やしたり、継続的なセールやキャンペーンをカスタマイザーにお知らせしましょう。

このチュートリアルではOptinMonsterを使用します。これは最高のWordPressポップアッププラグインであり、放棄した訪問者を購読者やカスタマイザーに変えることができる強力なコンバージョン最適化ツールです。

WooCommerceとシームレスに統合し、WooCommerceストアのために特別に構築された強力なパーソナライズオプションを備えています。

ヒント:オファーのクーポンを作成するには、Advanced Couponsを使用することをお勧めします。WooCommerceサイトに様々なスマートクーポンを作成することができます。

OptinMonsterを始める

WooCommerceポップアップの作成を始める前に、WordPressサイトに接続されたOptinMonsterアカウントが必要です。

まず、OptinMonsterのサイトに行き、アカウントにサインアップします。今すぐOptinMonsterを入手する」ボタンをクリックするだけです。

OptinMonster

OptinMonsterのProプランでは、終了意図ターゲティングルールを含む、これから説明する機能のほとんどを使用することができます。スピン・トゥ・ウィン・キャンペーンを作成したい、またはジオロケーションターゲティングを設定したい場合は、グロースプランが必要です。

OptinMonsterにサインアップしたら、OptinMonsterアカウントをWordPressサイトに接続する必要があります。

これを行うには、まずWordPressサイトにOptinMonsterプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化すると、OptinMonsterのウェルカム画面が表示されます。既存のアカウントに接続する」ボタンをクリックしてください。

Connect your existing account

新しいウィンドウが開きます。

WordPressに接続」ボタンをクリックするだけで、OptinMonsterアカウントとサイトを接続することができます。

Connect OptinMonster to WordPress

次に、OptinMonsterアカウントとWooCommerceアカウントを接続する必要があります。

まず、WordPressダッシュボードからOptinMonster ” 設定に移動します。

次に、’General’タブで’Auto Generate Keys + Connect WooCommerce’ボタンをクリックします。

Auto generate keys and connect WooCommerce

WooCommerceは自動的にキーを生成し、OptinMonsterアカウントに接続します。

このチュートリアルでは、いくつかの異なるタイプのWooCommerceポップアップについて説明します。これらのクイックリンクを使って、それぞれの説明に直接飛ぶことができます:

WooCommerceクーポンポップアップの作成方法

クーポンは売上を伸ばす素晴らしい方法です。ポップアップを使えば、カスタマイザーにクーポンの存在を確実に伝え、利用を促すことができます。

まず、WordPressの管理画面からOptinMonster ” キャンペーンにアクセスし、「最初のキャンペーンを作成」ボタンをクリックします。

Create first OptinMonster campaign

その後、「ポップアップ」キャンペーンタイプを選択します。

次に、マウスをテンプレートに合わせ、「テンプレートを使用」ボタンをクリックしてテンプレートを選択します。このチュートリアルでは「クーポン」テンプレートを使用します。

Select the coupon popup template

テンプレートを選択すると、ポップアップウィンドウが開きます。

OptinMonsterはキャンペーンに名前を付けるよう促します。先に進み、名前を追加し、’構築を開始する’ボタンをクリックします。

Enter a name for your campaign

さて、いよいよクーポンのデザインだ。

ドラッグアンドドロップのキャンペーンビルダーは非常に使いやすく、あなたのポップアップを思い通りにカスタマイズすることができます。OptinMonsterはあなたのテンプレートに追加するさまざまなブロックを提供します。

さらに、クーポンポップアップテンプレートの任意の部分をクリックして編集することができます。テキスト、フォント、色などを変更することができます。

Edit your campaign template

クーポンの一部を削除することもできます。例えば、メールのサインアップボックスを設けたくないと考えるかもしれません。単純にクーポンコードをポップアップ内に表示し、顧客に即座に利用するよう促すことができます。

ヒント:初期設定のクーポンコードは「SAVE25」です。これはカスタマイザーがメールアドレスを入力した後の画面に表示されます。ポップアップの「成功」表示でこれを変更または削除するのは簡単です。

Change the success view

クーポンデザインの変更が終わったら、ポップアップを保存することを忘れないでください。

詳しくは、クーポンポップアップの作成方法をご覧ください。このチュートリアルでは、OptinMonsterとメールリストを統合する方法も説明しています。

クーポンポップアップを作成したら、表示ルールを設定する必要があります。

トップバーの「表示ルール」タブをクリックするだけです。初期設定では、サイトのすべてのページで5秒後にクーポンが表示されます。

OptinMonster display rule

この期間を長くしたり短くしたり、サイト訪問者の滞在時間に応じて変更することもできます。また、サイトの特定のページのみにクーポンを表示することもできます。

最後のステップは、クーポンポップアップを公開し、サイト上で公開することです。投稿の最後にその方法を紹介します。

また、ポップアップの心理学を利用してサインアップを250%アップさせる方法についてのガイドもご覧ください。

WooCommerceカート放棄ポップアップの作成方法

お買い物カゴの放棄で莫大な金額を失っているかもしれません。

ポップアップは、訪問者にチェックアウトを完了するよう促す素晴らしい方法です。ユーザーがお買い物カゴのページにいて、サイトを去ろうとするときに表示される特別なWooCommerceポップアップを作成することができます。

まず、OptinMonsterで新規キャンペーンを作成します。キャンペーンタイプに「ポップアップ」を選択する必要があります。次に、ポップアップのテンプレートを選択します。ここでは「購入手続き放棄」テンプレートを使用します。

Select the abandoning checkout template

次に、OptinMonsterはポップアップウィンドウを開きます。

ポップアップキャンペーンに名前を付け、「ビルド開始」ボタンをクリックします。

Enter a name for your campaign

選択したテンプレートがキャンペーンビルダーで開きます。

キャンペーンテンプレートをカスタマイズするには、さまざまなブロックをドラッグ&ドロップしたり、テキスト、色、フォントなどを変更したりできます。

Edit your abandoning campaign template

次に、WooCommerceのお買い物カゴページにポップアップを表示するように設定します。

まず、画面上部の「表示ルール」タブをクリックし、「終了インテント」オプションを設定します。退出インテントの感度を選択することもできます。

OptinMonsterのエグジット・インテント・テクノロジーは、ユーザーがサイトを離れる意思を示した瞬間にメッセージを表示することを可能にします。

Exit intent display rules

次に、ページをスクロールダウンし、最初のドロップダウンを「現在のURLパス」のままにして、2番目のドロップダウンを「完全に一致」オプションに設定する。

外観のボックスに、お買い物カゴページのURLを入力してください。

Select exit intent sensitivity

変更を保存することを忘れないでください。その後、あなたのオンラインストアにクーポンを公開するために「公開する」タブに移動します。

WooCommerceクロスセルポップアップの作成方法

売上を伸ばすもうひとつの素晴らしい方法は、人気商品をクロスセルすることだ。クロスセルとは、カスタマイザーがすでに購入している商品と相性の良い商品を宣伝することです。

例えば、あなたのカスタマイザーが夏用のシャツを買うとしたら、日よけ帽子にも興味を持つかもしれない。あるいは、グリーティング・カードを買うなら、包装紙も欲しいかもしれない。

OptinMonsterでクロスセルのポップアップを作成するには、まず新規キャンペーンを作成する必要があります。キャンペーンタイプに「ポップアップ」を選択したことを本当に〜してもよいですか?

ポップアップには「Shopping」テンプレートを使います。

Select the shopping template

次に、OptinMonsterはキャンペーンに名前を付けるよう促します。

これが完了したら、’Start Building’ボタンをクリックするだけです。

Enter a name for your campaign

キャンペーンエディターに移動します。ここで、テンプレートをクリックすることで、テンプレートのあらゆる面を変更することができます。

キャンペーン用に別の画像をアップロードしました。

Edit your shopping template

その後、左側のメニューからテンプレートにさまざまなブロックを追加できます。

画像、ボタン、テキスト、動画などのブロックをテンプレートにドラッグ&ドロップするだけです。

Add blocks to your template

メール登録を維持する場合は、ポップアップの「成功」表示を編集して、選択したクーポンコードを表示するようにしてください。

ヒント:Eメールサインアップを使用する場合、「統合」タブでOptinMonsterをEメールプロバイダにリンクする必要があります。これについては、クーポンポップアップの作成に関するステップバイステップガイドに説明があります。

キャンペーンの作成が完了したら、右上の「保存」ボタンを忘れずにクリックしてください。

次に、「Display Rules」タブをクリックし、「WooCommerce Product Targeting」ルールを選択します。

Ecommerce display rules

新規ルールを追加した後、再度「WooCommerce Product Targeting」ルールを選択することができます。

そして、先ほどと同じように商品を追加する。

OptinMonster WooCommerce cart contains rules

設定を保存するのを忘れないでください。あとは、このチュートリアルの最後にある指示に従って、あなたのサイトにポップアップを設置するだけです。

WooCommerceアップセルポップアップの作成方法

WooCommerceのアップセルポップアップでは、カスタマイザーが検討していた商品よりも高額な商品の購入を促すことができます。

例えば、ソフトウェア・パッケージを販売している場合、高価格のプランを特別価格で提供したり、ユーザーにアドオンの購入を促したりすることができる。

アップセルポップを作成するには、まず新規OptinMonsterキャンペーンを作成する必要があります。キャンペーンのタイプに「ポップアップ」を選択し、好きなテンプレートを選択します。

Choose a campaign type and template

テンプレートを選択すると、OptinMonsterはキャンペーンに名前を付けるよう促します。

完了したら、「ビルド開始」ボタンをクリックするだけです。

Enter a name for your campaign

項目をクリックすることで、キャンペーンの内容を自由に変更することができます。

カスタマイザーにすぐにクーポンを渡したい場合は、メールフィールドを削除するだけです。キャンペーンビルダーでは、ドラッグ&ドロップ機能を使って簡単にブロックを追加できます。

Customize your upsell popup

クーポンの設定が完了したら、右上の「保存」ボタンをクリックします。次に、「表示ルール」タブをクリックします。

次に、ユーザーが特定の商品を見たときにポップアップを表示する表示ルールを設定します。そのためには、’WooCommerce Product Targeting’ルールを選択するだけです。

Ecommerce display rules

その後、キャンペーンを実施する製品を指定するだけです。

ヒントOptinMonsterとWooCommerceを接続する手順を踏みたくないですか?代わりにOptinMonsterのページターゲティングルールを使用して、商品ページのURLをターゲットにすることができます。

表示ルールを設定したら、ポップアップを保存します。そして、このチュートリアルの最後にある指示に従って、サイトにポップアップを設置します。

ゲーム化されたWooCommerce「スピン・トゥ・ウィン」ポップアップの作り方

ゲーミフィケーションされた「スピン・トゥ・ウィン」ポップアップは、カスタマイザーに特別オファーやクーポンを提供します。コンバージョンと全体的なエンゲージメントを高める楽しい選択肢です。

まず、OptinMonsterで新規キャンペーンを作成し、「Gamified」キャンペーンタイプを選択します。次に、使用したいテンプレートを選択します。

Select a gamification template

OptinMonsterはあなたのキャンペーンに名前を付けるよう促します。

これが完了したら、’Start Building’ボタンをクリックするだけです。

Enter a name for your campaign

クーポンホイールテンプレートがOptinMonsterキャンペーンエディターに表示されます。

変更したい要素をクリックするだけです。さらに、画像、動画、ボタンなどのブロックをテンプレートに追加できます。

ホイールのさまざまなオプションを編集するには、ホイールをクリックし、「ホイールセクションのカスタマイズ」ボタンをクリックします。

Customize your wheel

新しいポップアップウィンドウが開き、スピン・トゥ・ウィン・ホイールのすべてのセクションを見ることができます。

ホイール上でクーポンコード、パーセンテージ、スペシャルオファーを調整、編集するだけです。

Edit wheel sections

クーポンホイールに満足したら、設定を保存してください。

クーポンホイールの設定についてもっと詳しくお知りになりたい場合は、「スピン・トゥ・ウィン」ポップアップを作成するためのステップバイステップガイドに従ってください。

その後、「表示ルール」タブに向かい、キャンペーンを表示するタイミングを選択します。例えば、Exit Intent機能を使用して、ユーザーがサイトを終了しようとしているときにゲーミフィケーションホイールを表示することができます。

Select exit intent sensitivity

このチュートリアルの最後にある指示に従って、ポップアップをあなたのサイトに設置することができます。

WooCommerce用フルスクリーンポップアップの作成方法

あなたのオンラインストアに作成できるもう一つの非常に効果的なポップアップは、フルスクリーンのWooCommerceポップアップです。これにより、新規訪問者を歓迎し、メールリストへの参加を促すことができます。お返しに特別割引や送料無料を提供することもできます。

OptinMonsterでフルスクリーンポップアップを作成するには、新規キャンペーンを作成し、「フルスクリーン」キャンペーンタイプを選択し、テンプレートを選択します。

Select fullscreen template and campaign

次に、キャンペーンの名前を入力する必要があります。

準備ができたら、「ビルド開始」ボタンをクリックします。

Enter a name for your campaign

OptinMonsterビルダーにフルスクリーンのウェルカムマットが表示されるようになりました。テンプレートにブロックを追加、削除、再配置できるようになりました。

さらに、テキストや画像など、既存のブロックをあなたのお店に合わせて編集できるオプションも増えました。変更したい箇所をクリックするだけです。

Edit your fullscreen template

次に、「統合」タブをクリックしてOptinMonsterとメールリストを統合する必要があります。

ここから「+新規統合を追加」ボタンをクリックし、メールマーケティングツールを選択します。その後、画面の指示に従ってメールマーケティングサービスに接続します。

Integrate email service

次に、「表示ルール」タブに移動します。表示ルールでは、初めての訪問者にのみウェルカムマットを表示するように設定します。

これを行うには、「新規ビジター」オプションを選択するだけです。

Onsite targeting display rules

サイトのすべてのページにウェルカムマットを表示させたい場合は、「現在のURLパス」ドロップダウンを「任意のページ」に設定するだけです。

画面上部の「保存」ボタンを忘れずにクリックしてください。

Select new user display rule

以下の手順に従って、あなたのサイトにポップアップを設置することができます。

さらに詳しいヒントは、WordPressサイトのウェルカムマット作成ガイドをご覧ください。便利な例もあります。

WooCommerceポップアップをサイトに設置する

ポップアップを作成したら、サイトに外観を表示する前にライブにする必要があります。

まず、OptinMonsterアプリの「公開する」タブをクリックする必要があります。そして、「公開する状態」を「公開する」に変更します。

Publish your campaign

注意:ポップアップはすぐに本番になるわけではありません。WordPressで公開する必要があります。

WordPressの管理画面に戻り、OptinMonster ” Campaignsにアクセスしてください。ここから、キャンペーンの「状態の変更」オプションをクリックし、ドロップダウンメニューから「公開する」を選択することができます。

Change status of your campaign

ポップアップが意図したとおりに表示されているか、サイトをチェックするのは常に良いアイデアです。

これはアップセルキャンペーンで、カスタマイザーにシューズをアピールしているところです。

Upsell popup preview

この投稿が、売上を増やすためのWooCommerceポップアップの作成方法を学ぶのにお役に立てば幸いです。また、あなたのストアに最適なWooCommerceプラグインのリストや、あなたのストアをスピードアップするための最高のWooCommerceホスティングサービスの比較も気に入っていただけるかもしれません。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。