DiviでWooCommerceラッキーホイールオプチンフォームを作成する方法
公開: 2019-03-13毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。
今週は、進行中のDiviデザインイニシアチブの一環として、DiviとWP OptinWheelプラグインを使用してWooCommerceラッキーホイールオプチンフォームを作成する方法を紹介します。 このチュートリアルは、オプチンフォームの変換率を高めるのに役立つことを願っています。 ラッキーホイールオプチンフォームのゲーミフィケーション機能を使用すると、訪問者と対話し、オンライン購入で使用できる割引コードで訪問者に報酬を与えることができます。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
WooCommerceをインストールします
プラグインを検索してインストール
まだインストールしていない場合に最初に行う必要があるのは、WordPressWebサイトにWooCommerceをインストールすることです。 また、作業中のDiviWebサイトでHardwareStore LayoutPackを設定していることも前提としています。
プラグインに移動して、WooCommerceを検索します。 見つけたら、[今すぐインストール]ボタンをクリックします。
活性化
すぐにWooCommerceプラグインをアクティブ化してください。
WooCommerceをセットアップする
その後、WooCommerceは自動的にセットアップフォームにリダイレクトします。 ここでは、ストアを稼働させる準備をするために、すべての詳細を入力する必要があります。 このプロセスを完了すると、必要なすべてのWooCommerceページが自動的にWebサイトに追加されます。
WP OptinWheelプラグインをインストールします
プラグインを検索してインストール
ラッキーホイールオプチンフォームを作成するには、WP OptinWheelと呼ばれる無料のゲーミフィケーションプラグインを使用します。 プラグインに戻り、WP OptinWheelプラグインを検索します。 次に、[今すぐインストール]ボタンをクリックします。
活性化
プラグインをアクティブ化して続行します。
WooCommerceに製品を追加する
新製品の追加
すでにeコマースWebサイトを運営している場合は、この部分をスキップできます。 ただし、試しているだけの場合は、WooCommerceプラグインにいくつかの製品を追加することをお勧めします。 これは、後でラッキーホイールオプチンフォームをテストするのに役立ちます。 新しい製品を追加するには、 [製品]> [新規追加]に移動します。
製品の詳細を追加する
すべての製品の詳細を記入してください。 これには、製品名、説明、注目の画像、価格、カテゴリが含まれますが、これらに限定されません。 これらの詳細の追加が完了したら、製品ページを公開します。
製品ごとに繰り返します
Webサイトに追加する製品ごとに、同じ手順を繰り返します。
WooCommerceにクーポンを追加する
クーポンに移動
次に、クーポンを追加します。 この投稿の後半では、ラッキーホイールオプチン形式で作成したクーポンを使用します。 WordPressダッシュボード> WooCommerce>クーポンに移動します。 そこに着いたら、先に進んで最初のクーポンの作成を開始します。
クーポン＃1を追加：5％オフ
全般的
12スライスのラッキーホイールでは、賞品を含めるスライスの数を決定できます。 たとえば、4つの賞品を提供し、それぞれに異なるクーポンを作成できます。 ホイール上の複数のスポットにクーポンを使用することもできます。 最初のクーポンを作成したら、先に進んでページの上部にクーポンコードを入力します。 次に、一般設定を変更します。
- 割引タイプ：パーセンテージ割引
- クーポン金額：5
- クーポンの有効期限：選択した日付を入力します
使用制限
使用制限タブに切り替えて続行します。 ここで、クーポンにリンクされている最小および最大の支出があるかどうかを決定できます。 次のボックスにチェックマークを付けることもできます。
- クーポンを他のクーポンと組み合わせて使用できない場合は、このチェックボックスをオンにします。
- クーポンがセール品に適用されない場合は、このチェックボックスをオンにします。 アイテムごとのクーポンは、アイテムが販売されていない場合にのみ機能します。 カートごとのクーポンは、販売されていないアイテムがカートにある場合にのみ機能します。
他の3つのクーポンに対して手順を繰り返します
上記と同じ手順に従って、必要な数のクーポンを作成します。 パーセンテージ割引を提供することに限定されません。 固定カートまたは製品割引を提供するクーポンを作成して、ラッキーホイールに含めることもできます。
ラッキーホイールオプチンフォームを作成する
プラグイン設定に移動します
ラッキーホイールオプチンフォームを機能させるために必要なすべての手順を実行したので、作成を開始できます。 WordPressダッシュボード> WP OptinWheelに移動します。
MailChimpAPIキーを追加します
ラッキーホイールの作成を開始する前に、MailChimpAPIキーを追加する必要があります。 WP Wheel Optinプラグインの無料バージョンは、MailChimpとの統合のみを提供します。 ラッキーホイールを別のプロバイダーにリンクする場合は、プレミアムバージョンに切り替える必要があります。
新しいホイールを作成する
テーマを選択
ホイールの作成を始めましょう！ お好みのカラーパレットを選択してください。 このチュートリアルでは、Hardware Store Layout Packのカラーパレットによく合うオレンジ色のものを選択します。
セットアップのチャンス
ラッキーホイールオプチンフォームを作成する次のステップは、勝利の変化率を選択することです。 このパーセンテージは、ホイールを回したときに人々が何かを獲得する頻度を示します。 この場合、ホイールを回すすべての訪問者は、70％の確率でクーポンコードを獲得できます。
スライスの設定
続けて、12の異なるスライスを設定します。 スライスのそれぞれを次の3つのオプションのいずれかに割り当てることができます。
- 賞品なし：訪問者は何も獲得しません
- クーポンコード：訪問者がクーポンコードを獲得します
- リンク：たとえば、訪問者は電子書籍を獲得します
この例では、12個のスライスのうち4個を使用してクーポンコードを追加しています。 また、これらのスライスのそれぞれについて個別にチャンスを設定しています。
セットアップフォームビルダー
次のステップは、オプチンフォーム自体を構築するのに役立ちます。 そこにはすでにメールフィールドがあることに気付くでしょう。 オプトインフォームに追加できる他のタイプのフィールドはチェックボックスだけです。 彼らは、フォームをGDPRに準拠させるために、このタイプのフィールドを特別に追加しました。
コンテンツ設定
次に進むと、ラッキーホイールオプチンフォームの書かれたコンテンツを設定できるようになります。 先に進み、すべてのコンテンツを変更して、Webサイトと一致させます。
デザイン設定
次にデザイン設定を開き、背景パターンオプションとして[パターンなし]を選択します。
動作設定
また、ラッキーホイールオプチンフォームが動作設定に表示されるタイミングを選択することもできます。
GDPR
大事なことを言い忘れましたが、訪問者がオプチンフォームのさまざまなボックスにチェックマークを付けて完了しない限り、訪問者が共有するデータが保存されないようにすることができます。 ラッキーホイールオプチンフォームを保存し、ウェブサイトにアクセスしてテストしてください。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
最終的な考え
このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週ツールボックスに何か特別なものを入れようとしています。 このチュートリアルが、より速くインタラクティブな方法でメーリングリストを作成するのに役立つことを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！