Divi の WooCommerce カート フロー タイムラインを設計する方法

公開: 2023-02-01

WooCommerce は、WordPress で最も愛されている e コマース プラグインの 1 つです。 これをサポートするために、Divi は、デフォルトの WooCommerce ページの設計をより詳細に制御できるようにする、いくつかの新しい Woo 中心のモジュールを発表しました。 今日の投稿では、Divi の WooCommerce カート タイムラインの開発に取り組みます。 このタイムラインでは、ユーザー ジャーニーの視覚的表現を作成します。 ユーザーがショップからチェックアウトに移動する方法を視覚的に示したいと考えています。

カートページのテンプレート

デスクトップ ビュー

カート フロー タイムライン付きの Divi Toy Store カート - カート テンプレート

タブレットとモバイル ビュー

WooCommerce カート ページ タイムライン タブレットとモバイル ビュー

チェックアウトページのテンプレート

カート フロー タイムラインを含む Divi Toy Store チェックアウト ページ - チェックアウト テンプレート

タブレットとモバイル ビュー

タブレットとモバイルのDivi Toy Storeチェックアウトページ

カートとチェックアウトのテンプレートを無料でダウンロード

無料のカートとチェックアウト テンプレートを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用してニュースレターを購読する必要があります。 新しいサブスクライバーとして、毎週月曜日にさらに多くの Divi の利点と無料の Divi レイアウト パックを受け取ります! すでにリストに登録されている場合は、下にメール アドレスを入力して [ダウンロード] をクリックしてください。 「再購読」したり、余分な電子メールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Divi ニュースレターに参加すると、究極の Divi Landing Page Layout Pack のコピーに加えて、その他のすばらしい無料の Divi リソース、ヒント、およびトリックをメールでお送りします. 従うと、すぐにDiviマスターになります. すでに購読している場合は、下にメールアドレスを入力し、ダウンロードをクリックしてレイアウトパックにアクセスしてください。

購読に成功しました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください!

カートとチェックアウトのテンプレートをダウンロードしてインストールする方法

ディビテーマビルダーに行く

テンプレートをアップロードするには、WordPress Web サイトのバックエンドにある Divi テーマ ビルダーに移動します。

ディビテーマビルダーを開く

グローバル デフォルト Web サイト テンプレートのアップロード

次に、右上隅に 2 つの矢印の付いたアイコンが表示されます。 アイコンをクリックします。

テンプレートをDivi Theme Builderにインポートします

インポート タブに移動し、この投稿でダウンロードできた JSON ファイルをアップロードして、[Divi テーマ ビルダー テンプレートのインポート] をクリックします。

テンプレートのDivi Theme Builderへのインポートを完了します

Diviテーマビルダーの変更を保存

ファイルをアップロードすると、新しいカート、チェックアウト、ショップ テンプレートが表示されます。 テンプレートを有効にしたい場合は、すぐに Divi テーマ ビルダーの変更を保存します。

WooCommerce テンプレートのテーマ ビルダーの変更を保存する

WooCommerce カート タイムラインを最初から作成する方法

もう少し挑戦したい場合は、ブログ投稿の次の部分で、Divi の WooCommerce カート タイムラインを再作成する方法を示します。 このチュートリアルの手順を使用して、独自のカート タイムラインをカスタマイズできます。 次の WooCommerce と Divi プロジェクトのインスピレーションとして使用してください! これから作成する WooCommerce カートのタイムラインは次のようになります。

カートページ

カートページのWooCommerceカートタイムライン

チェックアウトページ

チェックアウト ページの WooCommerce カート タイムライン

この Divi の Woocommerce カート タイムラインは、モバイル対応でもあります。 モバイル デバイスでは横方向のタイムラインとして表示されます。

モバイルでの WooCommerce タイムライン

何を構築するかについての視覚的なガイドができたので、始めましょう!

ディビ テーマ ビルダーをセットアップする

これらのテンプレートを作成して、WooCommerce のカートとチェックアウト ページに影響を与えます。 そのため、Divi Theme Builder でタスクを開始します。

ディビテーマビルダーを開く

カート テンプレートの作成

[新しいテンプレートの追加] カード内のプラス アイコンをクリックします。

カート テンプレートの作成

次に、 Build New Template を選択します。

[新しいテンプレートの作成] を選択します

その後、作成中の新しいテンプレートに添付できるさまざまな割り当てすべてのモーダル ボックスが表示されます。 この場合、WooCommerce ストアのカート ページのテンプレートを作成します。 モーダル ボックスを下にスクロールし、WooCommerce の見出しの下にある[カート] を選択します。 選択したら、 [Create Template] をクリックします。 これを行うと、新しく作成されたテンプレートがカート ページに割り当てられます。

カート テンプレートの作成を完了する

チェックアウト テンプレートの作成

同じ手順を実行して、チェックアウト テンプレートを作成します。 [新しいテンプレートの追加] カード内のプラス アイコンをクリックします。

カート テンプレートの作成

再度、 Build New Template を選択します。

[新しいテンプレートの作成] を選択します

チェックアウト ページでは、モーダル ボックスを下にスクロールし、WooCommerce の見出しの下にある[チェックアウト] を選択する必要があります。 選択したら、 [Create Template] をクリックします。

テンプレートと割り当てを保存する

カートとチェックアウトのテンプレートが作成されたので、保存できます。 ディビ テーマ ビルダーの上部にある緑色の [変更を保存] ボタンをクリックします。

テンプレートと割り当てを保存する

WooCommerce カート フロー タイムラインの構築を始めましょう

カートページテンプレートの設定

さあ、楽しみが始まります！ カート ページのカート フロー タイムラインの作成を開始します。 これを行うには、作成したカート テンプレート内の [カスタム ボディの追加] ボタンをクリックします。

本文をカートに追加ページ テンプレート

これらのテンプレートとその割り当てを作成するときと同様に、モーダル ボックスに表示される Build Custom Body ボタンをクリックします。

本文をカートに追加ページ テンプレート

新しいセクションと行を追加する

Divi Builder に入ったので、新しい行を追加します。 この行には 5 つの列があります。

5 列の新しい行を追加する

宣伝文句モジュールを追加する

新しい行の列 1、3、および 5 に 3 つの Blurb モジュールを追加します。

列に Blurb モジュールを追加する

使用する各 Blurb モジュールの内容は次のとおりです。

最初の宣伝文句 (列 1)

  • タイトル:ショップ
  • 本文:空のままにします
  • アイコンを使用:はい
  • アイコン:下のスクリーンショットを参照
  • モジュール リンク URL: /shop (またはショップ ページへのカスタム リンク)

2 番目の宣伝文句 (列 3)

  • タイトル:レビュー
  • 本文:空のままにします
  • アイコンを使用:はい
  • アイコン:下のスクリーンショットを参照
  • モジュール リンク URL: /cart (またはカート ページへのカスタム リンク)

3 番目の宣伝文句 (列 5)

  • タイトル:チェックアウト
  • 本文:空のままにします
  • アイコンを使用:はい
  • アイコン:下のスクリーンショットを参照
  • モジュール リンク URL: /checkout (または、チェックアウト ページへのカスタム リンク)

この時点で、WooCommerce のタイムラインは次のようになります。

スタイリングなしの WooCommerce カート タイムライン

宣伝文句へのリンクの追加

カートとチェックアウト ページのテンプレートを作成しているため、顧客がどのページにアクセスしても簡単にアクセスできるようにする必要があります。 WooCommerce タイムラインの中心的な機能は、エンド ユーザー (顧客) がチェックアウト プロセスのさまざまな段階間を簡単に移動できることです。 サイトのデフォルトのショップ、カート、およびチェックアウト ページへのリンクを追加するには、まず、最初の宣伝文句であるショップのモジュール設定を入力します。

ショップの宣伝文句にリンクを追加する

モジュールの設定ボックスが表示されたら、リンクの見出しまで下にスクロールします。 [モジュール リンク URL] ボックスにリンクを追加します。これにより、カスタム クリックの場所に関係なく (それが Blurb タイトルであろうとアイコン自体であろうと)、ナビゲートする必要があるページに誘導されるようになります。

チェックアウト タイムライン プロセスで Blurb モジュールへのリンクを追加する

標準の WooCommerce ページへのリンクを各 Blurb モジュールに追加します。 WooCommerce インストールでこれらのページのカスタム リンクを作成した場合は、それに応じてリンクを調整します。 まず、Shop Blurb モジュールから始めます。 Module Link URL には、 /shop と入力します。 これは、WooCommerce のショップ ページのデフォルト URL です。 この URL を変更した場合は、代わりにカスタム URL をここに入力してください。

/shop リンクを追加して、デフォルトの WooCommerce ショップ ページ リンクにリンクします

緑色のチェックマーク ボタンをクリックして、変更を保存します。 次に、Review Blurb モジュールに移動します。 このモジュールは、カート ページへのリンクとして機能します。 再び[リンク] タブに移動し、モジュール リンク URL /cart をモジュール URL に追加します。

リンクをカートに追加する 宣伝文句モジュール

最後の Blurb モジュールである Checkout Blurb モジュールでは、デフォルトの WooCommerce チェックアウト ページ リンクである /checkout にリンクします。

WooCommerce 標準チェックアウト ページへのリンクを追加

スタイルの宣伝文句モジュール

次に、追加した Blurb モジュールのスタイルを設定します。 モジュールでホバー スタイルを使用します。 これは、WooCommerce カート タイムラインのユーザー エクスペリエンス (UX) に役立ちます。 現在表示しているページを表す Blurb モジュールを別の色にする必要があります。 また、アイコンにカーソルを合わせて色を変更すると、アイコンが拡大されます。

宣伝モジュールのスタイリング

  • アイコンの色: #eac989
  • ホバーアイコンの色: #9fa2ce
  • テキストの配置:中央

宣伝アイコンの色

  • タイトル テキスト:
    • タイトル見出しテキスト: H4
    • タイトルのフォント: Baskerville
    • タイトルのフォントの太さ:太字
    • タイトル テキストの色: #354e7c

宣伝文句のタイトル テキストのスタイル

変身：

  • 変換スケール (デスクトップ): 100%
  • 変換スケール (ホバー): 115%

ぼかし変換設定

最初の Blurb モジュールのデザイン設定を設定したら、それらを行の他の Blurb モジュールに拡張します。

宣伝文句モジュール スタイルをセクション内のすべての宣伝文句に拡張する

セクション内の Blurb モジュールのみにスタイルを拡張したいと考えています。 これは、既にコンテンツが含まれているページで作業している場合は特に注意が必要です。

宣伝文句モジュール スタイルをセクション内のすべての宣伝文句に拡張する

Cart Blurb モジュールのスタイリング

チェックアウト プロセスのさまざまな段階を示すために、ユーザーがいる現在の段階に別のアイコンの色を付けます。 たとえば、カート ページにある場合、プロセスのカート ステージを参照する Blurb モジュールの色を変更します。

現在のページを更新しています Blurb モジュールの色

カートページの宣伝文句モジュール:

  • アイコンの色 (デスクトップ): #f6c6c5
  • アイコンの色 (ホバー): #9fa2ce

タイムラインの仕切りを追加

Blurb モジュールを作成してスタイルを設定したら、Divider モジュールの追加とスタイル設定を開始します。 行の 2 列目と 4 列目で Divider モジュールを使用します。

WooCommerce カートのタイムラインに仕切りを追加する

スタイル タイムライン ディバイダー

次に、スタイリングを Divider モジュールに追加します。

仕切りの設定

視認性:

  • 仕切りを表示:はい

ライン：

  • 線の色: #354e7c
  • 線種:点線
  • 行の位置:垂直方向中央

サイジング

  • ディバイダーの重量: 5px

Divider モジュールの設定

別の非常にクールなDivi機能を使用して、このDividerモジュールのスタイルを行内の他のモジュールにコピーして貼り付けましょう. まず、完成した Divider Module を右クリックします。 次に、 [モジュール設定のコピー] をクリックします。 次に、現在スタイル設定されていないDivider モジュールを右クリックします。 最後に、モジュール設定の貼り付け をクリックします。 節約した時間は稼いだ時間です！

Divider モジュールのモジュール スタイルをコピーして貼り付ける

カスタム CSS の追加

現在、WooCommerce カートのタイムラインは次のようになっています。

WooCommerce カート チェックアウト タイムライン

Divider モジュールが正しく配置されていることを確認し、タイムライン モジュールをモバイル対応にするために、CSS を行に追加します。

カスタム CSS を使用した WooCommerce カートのタイムライン行

カスタム CSS を追加するには、まず WooCommerce カート タイムラインの行設定を入力する必要があります。 次に、 Advanced Tab を選択します。 最後に、次の CSS をメイン要素に追加します。

カスタム CSS: 

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

これを行設定に追加したら、緑色のチェックマークをクリックして設定を保存します。

モバイル応答性の最終的なカスタマイズ

Divi の驚くべき利点の 1 つは、さまざまな要素を非常に詳細にカスタマイズできることです。 行の最後の列にある最後の Blurb モジュールに最後の編集を行う必要があります。 この変更により、モバイルや小さな画面での見栄えが向上します。 Divi を使用すると、スタイリングをきめ細かくすることができるため、クライアントだけでなく、自社の Web サイトにも見栄えがよくなります。

列のパディング、マージン、および CSS の編集

モバイルの最後の列が、他の Blurb モジュールよりもわずかに低いことに注意してください。 私たちはそれを変えるつもりです！ これを行うには、3 番目と最後のモジュールの設定を入力します。 次に、 Spacing > Marginに進みます。 デスクトップ ビューの余白を残します。 ただし、タブレット用に 15 ピクセルの下マージンを追加します。

Blurb モジュールに下マージンを追加する

最後に、モバイル デバイス用に 21 ピクセルの下マージンを追加します。

モバイル デバイス用の Blurb モジュールに下マージンを追加する

これで、真にモバイル対応の Woocommerce カート タイムラインができました。これを使用して、ショップからチェックアウトまでユーザーを誘導できます。

チェックアウトページの設定

WooCommerce のカート フロー タイムラインの基盤をカート ページに設定しました。 ただし、行った作業をチェックアウト ページ テンプレートに追加して、タイムラインを完成させる必要があります。 Divi の OG 機能である右クリック メニューを使用して、チェックアウト ページのプロセスを簡単にします。 始めましょう！

カートページから WooCommerce カートフローのタイムラインをコピーする

カートページに戻ります。 ただし、本体の Divi Builder には入りません。

チェックアウトページのカート本体を準備する

カート テンプレートのカスタム ボディを右クリックします。 次に、右クリック メニューから[コピー] オプションをクリックします。

右クリックして、本文テンプレートをカート テンプレートからチェックアウト テンプレートにコピーします。

カート テンプレート内で行った作業をコピーしたので、これをチェックアウト テンプレートに貼り付けます。 これを行うには、チェックアウト ページ テンプレート内の[カスタム ボディの追加] ボタンを右クリックします。 これが完了すると、メニューに [貼り付け] オプションが表示されます。 [貼り付け] をクリックして、カスタム ボディをカート ページ テンプレートからチェックアウト ページ テンプレートにコピーします。

右クリックして、カート テンプレートの本文コンテンツを貼り付けます

これで、カートとチェックアウト ページの両方のテンプレートにカスタム ボディがあることがわかります。 これにより、Web デザイン プロセスの時間を節約できます。 ありがとう、ディビ 変更をチェックアウト テンプレート内に保存するには、ビルダーの上部にある緑色の [変更を保存] ボタンをクリックします。

チェックアウト ページの本文テンプレートの変更を保存する

チェックアウト ページ テンプレートの更新

デザイン プロセスの時間を短縮できたので、チェックアウト ページを最終編集して、プロジェクトの残りの部分とうまく連携できるようにしましょう。 まず、鉛筆アイコンをクリックして、チェックアウト ページ テンプレートのカスタム ボディを編集します。

チェックアウト カスタム ボディ モジュールの編集

スタイル チェックアウト アイコン

チェックアウト アイコンのスタイリングを始めましょう。 歯車アイコンをクリックすると、チェックアウト アイコンのモジュール設定が開きます。

チェックアウト アイコンの編集

Module Settings モジュールの Design タブに移動します。 画像とアイコンのタイトルをクリックします。 アイコンの色を編集していきます。 そのため、スポイト アイコンをクリックして、16 進数コード #f6c6c5 を入力します。 これにより、現在のページを示すために使用しているピンク色のアイコンが作成されます。

チェックアウト アイコンの色を更新する

カート アイコンの更新

戻って、カート アイコンのアイコンの色を更新する必要があります。 これを行うには、モジュールのモジュール設定に戻ります。 次に、カート アイコンの歯車アイコンをクリックします。

チェックアウト ページ テンプレートのカート アイコンの色を更新する

再び、モジュール設定の[デザイン] タブに移動します。 次に、[画像とアイコン] のタイトルの下で、スポイト ツール をクリックします。 次に、 16 進コード #eac989 を追加します。

チェックアウト ページ テンプレートのカート アイコンの色を更新しました

Divi Builder を終了したら、設定とすべての苦労を忘れずに保存してください。

すべての変更を保存

すべてを一緒に入れて

このチュートリアルではカート タイムラインの作成に重点を置いていますが、テンプレートを完成させるために使用される他の WooCommerce モジュールがあります。 このチュートリアルでは、スタイリングのインスピレーションとして無料の Divi Toy Store Layout Pack を使用しました。 ストアを完成させるために各テンプレート ページに追加する必要があるその他の WooCommerce モジュールを次に示します。

カートページのテンプレート

  • Woo Cart Products: WooCommerce カートが表示されます
  • Woo Cart Totals:このモジュールで小計、税金などを表示します

他の Woo モジュールを含むカートページの概要

チェックアウトページのテンプレート

  • Woo Notice モジュール:このモジュールを使用して、チェックアウトに関連するエラー、情報、または通知を表示します。
  • Woo Checkout 請求:このモジュールは、顧客の請求の詳細を色付けします
  • Woo チェックアウトの詳細:カートの合計とは異なり、このモジュールには実際の製品名、数量などが表示されます。
  • Woo Checkout Billing:利用可能な支払い方法を表示するために、このモジュールをチェックアウト ページに追加しました。

他の Woo モジュールを含むチェックアウト ページの概要

結論は

カートのタイムラインがあると、顧客が店舗で行うプロセスの視覚的表現が追加されます。 Divi を使用すると、WooCommerce ストアに追加のピースをカスタマイズして作成することができます。 Divi は、ここで学んだことを自分のクライアントや個人の Web サイトに適用できるツールを提供します。 このチュートリアルを実際に使用する場合は、ぜひご連絡ください。