WooCommerce は、WordPress の最も人気のある e コマース プラグインの 1 つです。 これを支援するために、 Divi は、標準の WooCommerce ページを作成する際により多くの自由を提供する、多数の新しい Woo 中心のモジュールをリリースしました。 今日の投稿では、 Diviの WooCommerce カート タイムラインの作成について説明します。 この期間のユーザージャーニーを視覚的に表現するデザインを行います。 店舗からチェックアウトまでのユーザージャーニーを視覚的に表示する必要があります。
デザインプレビュー
デザインを始める前に、完成したデザインがどのようになるかを確認しましょう。 こちらがカートページのプレビューです。
また、チェックアウト ページは次のようになります。
テンプレートをダウンロードするには、ここをクリックしてファイルを入手してください。 次に、それを解凍します。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始めるテンプレートをインストールする
WordPress ウェブサイトのバックエンドにある Divi テーマ ビルダーに移動して、テンプレートをアップロードします。
次に、右上隅に 2 つの矢印のアイコンが表示されます。 アイコンを切り替えます。
この投稿からダウンロードした JSON ファイルをインポート タブにアップロードした後、[Divi テーマ ビルダー テンプレートのインポート] をクリックします。
ファイルをアップロードすると、新しいカート、チェックアウト、ショップ テンプレートが表示されます。 テンプレートを有効にしたい場合はすぐに、変更を Divi テーマ ビルダーに保存します。
WooCommerce カートのタイムラインを作成する
ブログ投稿の次のセクションでは、もう少し挑戦したい場合に、Divi の WooCommerce カート タイムラインを再作成する方法を示します。 このガイドの手順を使用して、独自のカート タイムラインを作成できます。 今後の WooCommerce や Divi の取り組みのモチベーションとして活用してください。 これから構築する WooCommerce カートのタイムラインは次のようになります。
作成するものを視覚的に表現したので、始めましょう。
ディビテーマビルダーのセットアップ
これから開発するこれらのテンプレートは、WooCommerce のチェックアウトとカートのページに影響を与えます。 したがって、Divi Theme Builder でプロジェクトの作業を開始します。
[新しいテンプレートの追加] カード内で、プラス記号をクリックします。
次に新しいテンプレートの作成を選択します。
その後、作成中の新しいテンプレートにアタッチできるさまざまな割り当てがすべて一覧表示されたモーダル ボックスが表示されます。 この例では、WooCommerce ストアのカート ページのテンプレートを作成します。 そのため、モーダル ボックスの WooCommerce の見出しに移動し、[カート] をクリックします。 選択したら、[テンプレートの作成] を選択します。 これにより、新しく作成したテンプレートでカート ページにタグを付けます。
チェックアウト テンプレートを開発するには、同様の手順に従います。 [新しいテンプレートの追加] カード内で、プラス記号をクリックします。
新しいテンプレートの作成をもう一度選択します。
チェックアウト ページにアクセスするには、モーダル ウィンドウを下にスクロールし、WooCommerce の見出しから [チェックアウト] を選択する必要があります。 選択したら、[テンプレートの作成] を選択します。
カートとチェックアウトのテンプレートを作成後に保存できるようになりました。 Divi テーマ ビルダーの上部にある緑色の [変更を保存] ボタンを選択します。
WooCommerce カート フローの構築
楽しみは今始まります！ カートページのカートフローのスケジュールの下書きを始めます。 これを実現するには、作成したばかりのカート テンプレートを開き、[カスタム ボディの追加] ボタンを選択します。
これらのテンプレートとその割り当てを作成したときと同じように、モーダル ボックスに表示される [Create Custom Body] ボタンを選択します。
新しいセクションと行
Divi Builder に入ったので、新しい行を作成します。 この行には 5 つの列があります。
新しい行の列 1、3、および 5 に、3 つの Blurb モジュールを追加します。
宣伝モジュールの設定に従います。
最初の宣伝文句 (列 1)
- タイトル:ショップ
- 本文:空のままにします
- アイコンを使用:はい
- アイコン:下のスクリーンショットを参照
- モジュール リンク URL: /shop (またはショップ ページへのカスタム リンク)
2 番目の宣伝文句 (列 3)
- タイトル:レビュー
- 本文:空のままにします
- アイコンを使用:はい
- アイコン:下のスクリーンショットを参照
- モジュール リンク URL: /cart (またはカート ページへのカスタム リンク)
3 番目の宣伝文句 (列 5)
- タイトル:チェックアウト
- 本文:空のままにします
- アイコンを使用:はい
- アイコン:下のスクリーンショットを参照
- モジュール リンク URL: /checkout (または、チェックアウト ページへのカスタム リンク)
この時点で、WooCommerce タイムラインは次のようになります。
顧客がどのページにアクセスしても、カートとチェックアウト ページのテンプレートを作成するときに、Blurb モジュールに簡単にアクセスできる必要があります。 エンド ユーザー—your customer— がさまざまなチェックアウト ステージ間をシームレスに移動できることは、WooCommerce タイムラインの重要な要素です。 まず、最初の宣伝文句であるショップのモジュール設定に入り、サイトのデフォルトのショップ、カート、およびチェックアウト ページへのリンクを追加します。
顧客がどのページにアクセスしても、カートとチェックアウト ページのテンプレートを作成するときに、Blurb モジュールに簡単にアクセスできる必要があります。 エンド ユーザー—your customer— がさまざまなチェックアウト ステージ間をシームレスに移動できることは、WooCommerce タイムラインの重要な要素です。 まず、最初の宣伝文句であるショップのモジュール設定に入り、サイトのデフォルトのショップ、カート、およびチェックアウト ページへのリンクを追加します。
各 Blurb モジュールは、通常の WooCommerce ページへのリンクを受け取ります。 WooCommerce インストールでこれらのページ用に確立したカスタム リンクに必要な調整を行います。 まず、Shop Blurb モジュールから始めます。 Module Link URL ボックスに /shop と入力します。 WooCommerce のショップページの標準 URL です。 更新した場合は、この URL をあなたの個人用 URL に置き換えることを忘れないでください。
変更を保存するには、緑色のチェックマーク ボタンをクリックします。 次に、Review Blurb モジュールに進みます。 カート ページへのリンクは、このモジュールによって提供されます。 もう一度、[リンク] タブが選択され、モジュール リンク URL /cart がモジュール URL に追加されます。
最後の Blurb モジュールである Checkout Blurb Module については、標準の WooCommerce チェックアウト ページ リンク (/checkout) にリンクします。
スタイルの宣伝文句モジュール
新しく追加された Blurb モジュールのスタイリングが開始されます。 モジュールでは、ホバー スタイルを適用します。 これにより、WooCommerce カート タイムラインのユーザー エクスペリエンス (UX) が向上します。 現在表示しているページを表す Blurb モジュールに別の色が必要です。 また、アイコンの上にカーソルを合わせると、アイコンの色が変わり、大きくなるようにします。
宣伝モジュールのスタイリング
- アイコンの色: #eac989
- ホバーアイコンの色: #9fa2ce
- テキストの配置:中央
タイトル テキスト:
- タイトル見出しテキスト: H4
- タイトルのフォント: Baskerville
- タイトルのフォントの太さ:太字
- タイトル テキストの色: #354e7c
変身：
- 変換スケール (デスクトップ): 100%
- 変換スケール (ホバー): 115%
最初の Blurb モジュールの設定が完了したら、デザイン パラメータを行の他の Blurb モジュールに適用します。
このセクションのモジュールは、スタイルを拡張したいオブジェクトです。 これは、既存のコンテンツを含むページで作業している場合は特に、覚えておくことが重要です。
Cart Blurb モジュールのスタイリング
さまざまなチェックアウトプロセスの段階を示すために、ユーザーが別のアイコンの色になっている段階を示します。 たとえば、カート ページにある場合、プロセスのカート ステージを参照する Blurb モジュールの色を変更します。
カートページの宣伝文句モジュール:
- アイコンの色 (デスクトップ): #f6c6c5
- アイコンの色 (ホバー): #9fa2ce
タイムラインの仕切りを追加
Blurb モジュールを構築してスタイルを設定した後、Divider モジュールを追加してカスタマイズすることから始めます。 行の 2 番目と 4 番目の列には、Divider モジュールが含まれています。
スタイル タイムライン ディバイダー
次に、Divider モジュールをカスタマイズします。 Divider 設定で次の変更を行います。
視認性:
- 仕切りを表示:はい
ライン：
- 線の色: #354e7c
- 線種:点線
- 行の位置:垂直方向中央
サイジング
- 仕切りの重さ: 5px
非常に巧妙なDivi機能を使用して、このDividerモジュールから行の他のモジュールにスタイルをコピーして貼り付けましょう. 次に、完成した Divider Module を右クリックします。 次に、モジュール設定のコピーを選択します。 次に、現時点ではスタイル設定されていない Divider Module を右クリックします。 最後のステップは、[モジュール設定の貼り付け] をクリックすることです。 時間を節約することは時間を稼ぐことです！
カスタム CSS
現在、WooCommerce カートのタイムラインは次のようになっています。
行に CSS を追加して、Divider モジュールが適切に配置されていることを確認し、タイムライン モジュールをモバイル対応にします。
カスタム CSS を追加する前に、まず WooCommerce カート タイムラインの行オプションを入力する必要があります。 次に、[詳細] タブを選択します。 最後になりましたが、メイン要素に次の CSS を含めます。
display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;緑のチェックマークをクリックして設定を保存します。
チェックアウトページの設定
カート ページでは、WooCommerce カート フロー タイムラインの基礎を築きました。 ただし、タイムテーブルを完成させるには、完了した作業でチェックアウト ページ テンプレートを更新する必要があります。 チェックアウト ページの手順を簡素化するために、Divi の元の機能の 1 つである右クリック メニューを使用します。 さあ行こう！
カートページからカートフロータイムラインをコピー
ショッピングカートページに戻ります。 ただし、本体に Divi Builder は使用しません。
カート テンプレートのカスタム ボディを右クリックします。 その後、右クリックメニューから「コピー」を選択します。
複製した後、カート テンプレート内で完了した作業をチェックアウト テンプレートに貼り付けます。 チェックアウト ページ テンプレートで、[カスタム ボディの追加] ボタンを右クリックしてこれを実行します。 完了すると、[貼り付け] オプションがメニューに表示されます。 カスタム本文をチェックアウト ページ テンプレートからカート ページ テンプレートにコピーするには、[貼り付け] をクリックします。
チェックアウト ページ テンプレートとカート テンプレートの両方にカスタム ボディがあることがわかります。 これにより、サイトの設計手順をスピードアップできます。 ありがとう、ディヴィ。 ビルダーの上部にある緑色の [変更を保存] ボタンをクリックして、変更内容をチェックアウト テンプレートに保存します。
チェックアウトページの更新
デザイン プロセスの時間を短縮したら、チェックアウト ページに最後の調整を加えて、プロジェクトの残りの部分とシームレスに統合されるようにします。 チェックアウト ページ テンプレートのカスタム ボディを編集するには、まず鉛筆アイコンをクリックします。
スタイル チェックアウト アイコン
今すぐチェックアウト アイコンのスタイリングを始めましょう。 歯車マークをクリックすると、チェックアウトボタンのモジュール設定が開きます。
モジュール設定モジュールの [デザイン] タブに移動します。 タイトル「Image & Icon」をクリックします。 アイコンの色が変わります。 したがって、スポイト アイコンを選択し、16 進数値 #f6c6c5 を入力します。 その結果、アイコンは現在のページの色であるピンクになります。
カート アイコンの更新
戻ってカート アイコンのアイコンの色を変更する必要があります。 これを行うために、モジュール設定に戻ります。 次に、カート シンボルの歯車アイコンを選択します。
モジュール設定の [デザイン] タブにもう一度移動します。 その後、Picture & Icon セクションからスポイト ツールを選択します。 次に、16 進数形式で #eac989 を入力します。
Divi Builder を終了したら、設定と面倒な作業をすべて保存することを忘れないでください。
すべて一緒にマージ
このチュートリアルの主な焦点はカート タイムラインですが、テンプレートでは追加の WooCommerce モジュールも使用する必要があります。 ストアを完成させるには、これらの追加の WooCommerce モジュールを各テンプレート ページに追加する必要があります。
カートページのテンプレート
- Woo Cart Products: WooCommerce カートが表示されます
- Woo Cart Totals:このモジュールで小計、税金などを表示します
チェックアウトページのテンプレート
- Woo Notice モジュール:このモジュールを使用して、チェックアウトに関連するエラー、情報、または通知を表示します。
- Woo Checkout Billing:このモジュールは、顧客の請求の詳細に色を付けます
- Woo チェックアウトの詳細:カートの合計とは異なり、このモジュールには実際の製品名、数量などが表示されます。
- Woo Checkout 請求:利用可能な支払い方法を表示するために、このモジュールをチェックアウト ページに追加しました。
まとめ
カート タイムラインは、顧客がサイト内を移動する過程を視覚的に示します。 Diviを使用して、WooCommerce ストアに新しいコンポーネントを微調整して追加することができます。 ここで学んだことは、Divi のツールのおかげで、自分のクライアントや個人の Web サイトに適用できます。 このチュートリアルを教室以外で使用する場合は、お知らせください。
