DiviのFashionLayoutPackを使用してWooCommerceでオンラインストアを作成する
公開: 2017-11-10Diviの新しいFashionLayout Packは、あらゆるオンラインストアに最適なセットアップを備えています。 ショップモジュールの統合とページレイアウトの編成により、大きな前進が得られます。 しかし、このレイアウトを機能的なオンラインストアとして稼働させるには、WooCommerceプラグインが必要です。 そして、DiviとWooCommerceがいかにうまく連携しているかに驚かれるかもしれません。
このチュートリアルでは、Woocommerceを使用してDiviのFashionレイアウトパックを使用してオンラインストアを作成する方法を紹介します。 レイアウトを適切に設定してカスタマイズする方法、ショップページをWoocommerce統合で実現する方法、レイアウトの要素とテーマカスタマイザーを使用してWoocommerceページのスタイルを設定する方法に関するヒントを紹介します。
セットアップ
とりあえず、このチュートリアルは、特定の手順をすでに完了した状態で開始します。
1.Diviテーマをインストールしてアクティブ化します
2.WooCommerceをインストールしてアクティブ化します
3. Fashion Layout Packをダウンロードし、Fashion_All.jsonファイルをDiviテーマライブラリにインポートします。
4.レイアウトごとに新しいページを作成します。
5.プライマリメニューを作成します。
上記の設定で混乱している場合は、新しいプロジェクトにレイアウトパックを使用するためのこれらの10の手順を確認することで、レイアウトを適切に設定する方法の詳細な手順を見つけることができます。
上記の5つの手順を完了すると、開始する準備が整います。
スニークピーク
これは、作成するWooCommerceページの一部です。
DiviのFashionLayoutPackを使用してWooCommerceでオンラインストアを作成する
私たちのYoutubeチャンネルを購読する
グローバルアクセントカラーを変更する
まず、Diviテーマのグローバルアクセントカラーを変更します。 レイアウトに一致するようにグローバルアクセントカラーを変更することは常に良い考えですが、カスタムCSSを使用せずに、WooCommerceページをカラースキームに一致させる最も簡単な方法でもあります。 このアクセントカラーは、単一の製品ページ、カートページなど、すべてのWooCommerceページの要素のスタイル設定に使用されていることに気付くでしょう…
グローバルアクセントカラーを変更するには、テーマカスタマイザーに移動し、[一般設定]> [レイアウト設定]に移動して、下部にある[テーマアクセントカラー]オプションを見つけます。
レイアウトからこのピンク色を使用しています：＃fc7086
次に、変更したら、設定を保存して公開し、ページを更新して、アクセントカラーがカスタマイザー内の他の設定を更新できるようにします。
テーマカスタマイザーでタイポグラフィ設定を更新する
WooCommerceはデフォルトのテーマカスタマイザー設定を使用して各ページのテキストのスタイルを設定するため、レイアウトで使用されているタイポグラフィをテーマカスタマイザーのタイポグラフィ設定と一致させる必要があります。
タイポグラフィを更新するには、 Divi>テーマカスタマイザ>一般設定>タイポグラフィに移動し、以下を更新します。
本文サイズ：16px
ボディラインの高さ：1.9
ヘッダーテキストサイズ：42
ヘッダーフォントスタイル：B
ヘッダーフォント：Playfair Display
ボディフォント：ポピンズ
ボディリンクの色：[グローバルアクセントカラーを更新した場合、このカラーはここに表示されます]
WooCommerceショップページを設定する
WooCommerceでは、ベースショップページにするページを設定できます。 このページにはすべての商品カテゴリを含める必要があります。これにより、ユーザーはショップが提供するすべてのものを知ることができます。 レイアウトにはショップページがあるので、これをベースショップページにしましょう。
WordPressダッシュボードから、 [WooCommerce]> [設定]に移動し、ページ上部の[製品]タブをクリックします。 タブのすぐ下のメニューで、[表示]を選択します。 次に、ファッションレイアウトパックから新しいショップページレイアウトで作成した「ショップ」ページにショップページを選択します。
次に、変更を保存します。
ストアに商品を追加する
ショップモジュールが2つあるにもかかわらず、ショップページに商品が表示されていないことに気付いたかもしれません。 もちろん、最初に製品を追加する必要があります。 ストアに新製品を追加するには、WordPressダッシュボードに移動し、次の手順に従います。
1. [製品]> [新規追加]に移動します
2.製品名を入力します
3.製品の説明を入力します
4.製品の価格を入力します
5.製品の簡単な説明を入力します
6. 3つの新しいカテゴリ（夏、注目、セール中）を追加します
7.製品のカテゴリを選択します（この場合は夏になります）
8.製品画像を追加します
9.製品の公開/更新
製品にカテゴリを割り当てる
上記の手順を繰り返して新しい製品を作成するときは、必ず各製品にカテゴリを割り当ててください（上記の手順の＃7）。 このチュートリアルでは、「夏」のカテゴリに6つの製品、「注目」のカテゴリに6つの製品、「セール中」のカテゴリに1つの製品を追加しました。
ショップページでショップモジュールを更新する
これで商品が作成されたので、これらの商品をショップページに追加できます。 前に述べたように、ショップページレイアウトにはすでにショップモジュールがレイアウトに組み込まれています。 夏のセクションの下に1つ、注目のセクションの下に1つあります。
ショップページに移動し、ビジュアルビルダーを展開します。 次に、Summer Fashionの見出しを含む行の下にあるショップモジュール（現在、製品は表示されていません）にカーソルを合わせ、モジュール設定をクリックします。
カテゴリ「夏」のみを含むように設定を更新します。
これで、夏のカテゴリで追加されたすべての製品が表示されます。
次に、注目の商品の見出しの下にあるショップモジュールを見つけ、設定を更新して注目のカテゴリのみを含めます。
ショップモジュールを追加して、ショップページに「セール中」のアイテムを表示します
ショップページには2つのカテゴリー（注目商品とサマーファッション）があるので、レイアウトですでに提供されているモジュールを使用して、追加のカテゴリーと商品を簡単に作成できます。
「セール中」の商品を表示する別のセクションを作成しましょう。
これを行うには、ビジュアルビルダーを展開し、右クリックオプションを使用して、夏のファッション製品を表示するセクション全体をコピーし、[注目の製品]セクションのすぐ下に貼り付けます。
今、あなたがしなければならないのは、いくつかの更新を行うことです。
見出しを表示している行で、テキストモジュールのテキストをクリックし、見出しを「SummerFashion」ではなく「OnSale」に変更します。
次に、左側の列の画像を、販売商品とより一貫性のあるものに変更します。
最後に、ショップモジュールを更新して、「セール中」のカテゴリのみを含めます。
ファッションレイアウトでWooCommerceページのスタイルを設定する
プラグインをインストールすると、WooCommerceは独自のWooCommerceページのセットを自動的に生成します。 これらには次のものが含まれます。
ショップ–商品の投稿タイプアーカイブのプレースホルダーです。
カート–ショートコード[woocommerce_cart]を使用してカートの内容を生成します
チェックアウト–ショートコード[woocommerce_checkout]を使用して情報を表示します。
マイアカウント–ショートコード[woocommerce_my_account]を使用して、アカウントに関連する特定の顧客情報を表示します。
すでにショップページを選択しているので、これ以上のデザインは必要ありません。 ただし、他の3つのWooCommerceページについては、他のページレイアウトのデザインに合うようにスタイルを設定する必要があります。
カートとチェックアウトページへのセクションヘッダーの追加
まず、カートのページを見てみましょう。 何かをする前の様子は次のとおりです。
グローバルアクセントカラーを更新したため、リンクとボタンはすでに配色と一致していることに注意してください。 また、テーマカスタマイザーでタイポグラフィ設定を更新したため、ヘッダーと本文のテキストもテーマと一致します。
しかし、数回クリックするだけで、これよりも少し上手くいくことができます。 最初にショップページに移動し、ビジュアルビルダーをデプロイして、ページヘッダーを含む上部セクションをライブラリに保存します。 「ページヘッダーセクション」という名前を付けることができます。
次に、ページの一番下までスクロールして、電子メールのオプチンと連絡先の詳細を含む最後のセクションを見つけ、「ページフッターセクション」という名前でライブラリに保存します。
次に、カートページを編集します。 デフォルトのページエディタから、Divi Builderを使用することを選択し、次に「VisualBuilderを使用する」を選択します。 ビルダーは、通常のセクションの1列の行内のテキストモジュールにショートコード[woocommerce_cart]を自動的に配置する必要があります。 そうでない場合は、これを自分で作成する必要があります。 次に、青いプラスアイコンをクリックして、現在のセクションの下に新しいセクションを追加し、[ライブラリから追加]タブを選択します。 次に、作成したばかりの「ページヘッダーセクション」という新しいセクションを選択します。
次に、そのセクションをページの上部にドラッグし、タイトルテキストを「YourCart」に変更します。 それでおしまい！
チェックアウトページでもこのプロセスを繰り返すことができます。
DiviBuilderを使用したマイアカウントページのデザイン
これらのWooCommerceページにヘッダーを追加する方法がわかったので、[マイアカウント]ページでも同じことを行います。 今回は、ライブラリに保存したフッターセクションをこのページの下部に追加できます。
アカウントを管理するページであることをより明確にするために、このページに明確なデザインを与えることをお勧めします。 したがって、ヘッダーセクションとフッターセクションのピンクのグラデーションの背景の代わりに、それぞれのセクション設定に移動し、背景のグラデーションの色を＃9599e2と＃8bc6ecに変更します。
テキストモジュール設定を使用して、WooCommerceショートコードコンテンツのスタイルを設定します
WooCommerceショートコードはテキストモジュール内に存在するようになったため、これを利用して、モジュール設定内でこれらの要素の一部をスタイル設定できます。
マイアカウントページでこれを実行しましょう。 ビジュアルビルダーから、ショートコードコンテンツを保持するテキストモジュールの設定を次のように更新します。
デザインタブの下…
テキストテキストサイズ：20px
テキスト行の高さ：1.6em
次に、[テキスト]セクションの下の[リンク]タブをクリックして、次のようにリンクのスタイルを設定します。
リンクフォント：ポピンズ
リンクフォントの太さ：半太字
リンクテキストサイズ：27px
リンクラインの高さ：1.5em
設定を保存する
次に、マイアカウントページを確認してください。
カスタムCSSを使用してWooCommerceアーカイブページのスタイルを設定しますか？
WooCommerceで使用されるアーカイブページの一部は、他のページのようにショートコードで生成されないため、DiviBuilderを使用して微調整することはできません。 したがって、これらのページでは、いくつかのカスタムCSSを作成する必要があります。
例として、注目のカテゴリページを見てみましょう。
次に、テーマカスタマイザーを開き、[追加のCSS]をクリックして、以下を追加します。
.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;
}
.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
font-size: 16px !important;
color: #fd7792 !important;
letter-spacing: 2px;
}
これにより、並べ替えドロップダウンボックス、ブレッドクラム、および価格フォントのスタイルが設定されます。 残りのテキストは、テーマカスタマイザーのタイポグラフィ設定を使用して変更できます。
最終的な考え
この素晴らしいレイアウトパック、WooCommerce、およびDivi Builderの助けを借りて、Webサイトのオンラインストアの構築がはるかに簡単になります。 明らかに、この記事の範囲を超えている、まだ実行する必要のあるいくつかの必需品があります。 たとえば、使用する支払いゲートウェイ、配送の処理方法、その他の会社固有のアクションアイテムを決定する必要があります。 しかし、WooCommerceはあなたが必要とするもののほとんどを処理できるはずです。
どちらかといえば、この投稿があなた自身で素晴らしいものを作成するきっかけになったと思います。
コメントでお返事をお待ちしております。
乾杯！