Diviを使用して特定の製品ページにクーポンコードバーを動的に追加する方法
公開: 2020-01-09DiviとWooCommerceで作成したオンラインショップを運営している場合、緊急性を高めるためにWebサイトにクーポンコードを表示したい場合があります。 ウェブ全体で、多くのオンラインショップがページの上部に貼り付けられたバーでクーポンコードを共有していることに気付くでしょう。 現在、Diviのテーマビルダーを使用すると、クーポンコードの対象となる製品にそのようなクーポンコードバーを自動的に追加できます。
このチュートリアルでは、その方法を正確に説明します。 このチュートリアルには、クーポンコードの設定から、割引カテゴリの商品用に個別の商品テンプレートを作成するまで、いくつかの部分があります。 テンプレートのJSONファイルも無料でダウンロードできます！ 私たちが使用している全体的なスタイルは、過去に共有した大胆な製品ページのレイアウトに基づいています。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
製品ページテンプレートを無料でダウンロード
商品ページのテンプレートを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
チュートリアルの概要
- WebサイトにDiviとWooCommerceプラグインがインストールされていることを確認してください
- チュートリアルの最初の部分では、新しい割引商品カテゴリを作成します
- 対象となる製品をこの新しい製品カテゴリに割り当てます
- 次に、新しいクーポンコードを作成し、クーポンコードが作成した商品カテゴリにのみ適用されることを確認します
- テーマビルダー内で、その特定の製品カテゴリの新しいテンプレートを作成します
- このテンプレートの通常の商品ページ本文を再利用し、Diviの組み込みオプションを使用してトップクーポンコードバーを追加します
1.新しい割引商品カテゴリを作成します
製品カテゴリに移動し、新しい割引製品カテゴリを追加します
まず、WordPress WebサイトにWooCommerceプラグインをインストールし、新しい割引の対象となるすべての製品専用の新しい製品カテゴリを追加します。 既存の商品カテゴリでクーポンコードを使用することを計画している場合は、代わりにそれらを使用できます。
2.製品を新しい割引カテゴリに割り当てます
製品の編集
次に、セールに含める商品を開きます。
製品を新しい割引カテゴリに割り当てる
そして、それらを新しい割引商品カテゴリに含めます。
3.WooCommerceクーポンコードを作成します
クーポンに移動して新しいクーポンを追加
このチュートリアルの次の部分では、新しいクーポンコードの作成について説明します。 WordPressダッシュボード>クーポン>に移動し、 [最初のクーポンを作成]をクリックします。
クーポンコードとクーポンデータを追加する
上部にクーポンコードを追加し、クーポンコードに適用する一般設定を選択します。
- 割引コード：割引コードを追加します
- 割引タイプ：パーセンテージ割引
- クーポン金額：パーセンテージを追加
- クーポンの有効期限：日付を選択
使用制限を追加
次に、使用制限に進み、クーポンコードが割引商品カテゴリ内の商品でのみ機能することを確認します。
- 製品カテゴリー：割引
4.割引カテゴリの新しいテンプレートを追加します
新しいテンプレートを追加
クーポンコードを作成したら、関連する製品ページにそれを含めるときが来ました！ これを行うには、Diviテーマビルダーに移動して、新しいテンプレートを追加します。
オンを使用
この新しいテンプレートを割引商品カテゴリで使用します。
- 使用場所：特定の製品カテゴリの製品：割引
5.グローバル製品ページ本体を新しいテンプレートに再利用する
製品テンプレートの本文を新しいテンプレートの本文にドラッグします
新しいテンプレートにドラッグするだけで、通常の商品ページテンプレート本体を再利用できます。 このチュートリアルでは、別のチュートリアルで作成した太字の製品ページレイアウトを使用しています。 レイアウトのJSONファイルはブログ投稿からダウンロードできます。
6.新しいテンプレートの本文にトップクーポンコードバーを追加します
ボディテンプレートエディタに入る
製品ページの本文を新しいテンプレートに追加したら、編集を開始できます。 このテンプレートに加えた変更は、割引商品カテゴリの一部である商品ページにのみ表示されます。
トップに新しいセクションを追加
テンプレートエディタ内で、最初に行うことは、上部に新しいセクションを追加することです。
背景色
セクション設定を開き、背景色を変更します。
- 背景色：＃e02b20
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
アニメーション
アニメーションを追加して、セクションの設定を完了します。
- アニメーションスタイル：スライド
- アニメーションの方向：下
- アニメーション時間：1500ms
- アニメーションの遅延：1000ms
- アニメーションの開始不透明度：100％
- アニメーション速度曲線：イーズインアウト
- アニメーションの繰り返し：1回
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
行設定を開き、行がセクションコンテナの幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
列1
間隔
次に、列1の設定を開き、上部と下部のパディングを追加します。
- トップパディング：25px
- ボトムパディング：25px
列2
背景色
列2の設定も開き、白い背景色を追加します。
- 背景色：#ffffff
間隔
この列にもカスタムの上部と下部のパディングを追加します。
- トップパディング：20px
- ボトムパディング：20px
国境
また、左上と右上の境界線の半径を含めます。
- 左上+右上：30px
列1にテキストモジュールを追加
コンテンツを追加する
列1に必要な最初で唯一のモジュールは、テキストモジュールです。 お好みのコピーを入力してください。
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Montserrat
- テキストの色：#ffffff
- テキストサイズ：16px
- テキストの配置：中央
列2にテキストモジュールを追加します
コンテンツボックスにクーポンコードを追加する
2番目の列に、チュートリアルの最初の部分で追加した割引コードを使用して別のテキストモジュールを追加します。
テキスト設定
モジュールのテキスト設定を次のように変更します。
- テキストフォント：Montserrat
- テキストフォントの太さ：重い
- テキストの色：＃000000
- テキストサイズ：19px
- テキストの配置：中央
サイジング
次に、サイズ設定を変更します。
- 幅：50％
- モジュールの配置：中央
間隔
下部のパディングも追加します。
- ボトムパディング：10px
国境
そして、下の境界線を追加して、モジュールの設定を完了します。
- 下の境界線の幅：1px
- 下の境界線の色：＃333333
7.テーマビルダーの変更を保存して結果を表示する
変更した製品ページが完成したら、テンプレートの変更を保存し、テーマビルダーを終了して、割引製品ページで結果を表示できます。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、クーポンコードバーを作成して、問題のクーポンコードの対象となる商品ページに自動的に表示されるようにする方法を説明しました。 これは、訪問者に製品を購入するための追加のインセンティブを与えるための優れた方法です。 テンプレートJSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。