Diviのテーマビルダーを使用してWooCommerce製品カテゴリページを作成する

カテゴリページは、eコマースサイトの重要な部分です。 クライアントは製品カテゴリを参照して、必要なものを見つけます。 そのため、カテゴリページは商品ページと同じように見栄えがする必要があります。 Diviのテーマビルダーを使用すると、カテゴリページテンプレートの作成がこれまでになく簡単になります。 このチュートリアルでは、カテゴリページテンプレートを段階的に作成し、Diviの組み込みオプションを使用してスタイルを設定する方法を示します。 さらに、Themify WooCommerce ProductFiltersプラグインの助けを借りてフィルター可能にする方法を紹介します。

2つのブラウザタブを並べて開きます。 テーマビルダーには最初のタブを使用し、カテゴリページのライブプレビューには2番目のタブを使用します。 このように作業して、進行状況を確認してください。 あなたの便宜のために、無料ダウンロードとしてテンプレートも追加しました。

それを手に入れよう！

プレビュー

テンプレートの再作成を開始する前に、さまざまな画面サイズでカテゴリページテンプレートがどのように表示されるかを見てみましょう。

デスクトップ

モバイル

Wooカテゴリページテンプレートを無料でダウンロード

無料のWooカテゴリページテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

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

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

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

1.製品とカテゴリを更新します

テンプレートを作成する前に、製品が正しいカテゴリに整理されていることを確認してください。 それらにも適切にタグ付けされているかどうかを確認してください。 これらは、製品フィルタープラグインをセットアップするときに重要になります。

2.セットアッププラグイン

ダウンロードとインストール

WooCommerce製品フィルターをダウンロードします。 プラグインダッシュボードに移動し、プラグインの.zipファイルをアップロードしてインストールします。 または、ディレクトリでプラグインを検索します。 プラグインはダッシュボードメニューに新しいタブを追加します。 プラグインもアクティブ化してください。

新しいフィルターフォームを追加

ダッシュボードのプラグインタブをクリックします。 プラグイン設定内で、ボタンをクリックして新しいフィルターフォームを追加します。

フィルタフォームを設定する

フィルター可能なサイドバーをこの投稿のプレビューのサイドバーとまったく同じように表示するには、以下の設定を使用します。 これらの設定は後でいつでも調整できます。

• レイアウト：垂直
• 空のフィールド：空の場合はフィールドを表示しません
• 商品の並べ替え：商品の並べ替えを非表示
• ページ付けオプション：無限スクロール
• リセットボタン：リセットボタンなし
• タクソノミー間の論理的関係：AND
• 結果ページテンプレート：同じページに結果を表示する

カテゴリフィールドの作成

メインエリアの下のメニューバーに、選択したタブが表示されます。 [カテゴリ]タブをその下のビルダーにドラッグアンドドロップします。 次に、次のように設定を調整します。

• フィールドタイトル：カテゴリ
• 子供を含める：はい
• 表示：チェックボックス
• ロジック：または
• 順序：名前、降順
• レイアウト：水平、2列

タグフィールドの作成

次に、[タグ]タブをビルダーにドラッグアンドドロップします。 [カテゴリ]タブの下に配置されていることを確認してください。 次のように設定を調整します。

• フィールドタイトル：タイプ
• 表示：チェックボックス
• 順序：名前、降順
• レイアウト：水平、2列
• カラーアイコン
  • 背景：透明
  • テキストの色：ディープブラウン＃44000d

[保存]をクリックしてショートコードを生成します

作業内容を保存して、ビルダーを閉じます。 プラグインのメインメニューにショートコードが表示されます。 コピーしてください。後で必要になります。

3.テーマビルダーで製品カテゴリページテンプレートを再作成します

テーマビルダーを開く/新しいテンプレートを追加する

テンプレートの再作成を開始する時が来ました！ テーマビルダーを開き、新しいテンプレートを追加します。

テンプレート設定を設定する

テンプレート設定で、「特定の製品カテゴリページ」を選択します。 このテンプレートを割り当てるカテゴリをクリックします。 ハンドメイドレザーグッズを選びます。

カスタムボディを追加

次に、[カスタムボディの追加]をクリックします。

[カスタムボディの構築]を選択します

このテンプレートを最初から再作成するので、先に進んで「カスタムボディの構築」を選択します。

ゼロから構築

ビジュアルビルダーに入ったら、もう一度最初からビルドするオプションを選択します。

セクション1設定

バックグラウンド

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、背景色を追加します。

• 背景色：透明な青みがかった灰色– rgba（68,66,109,0.02）

行を追加する

カラム構造

次に、次の列構造を持つ新しい行を追加します。

サイジング

次に、行のサイズ設定を調整します。

• 側溝幅：1
• 幅
  • デスクトップ：90％
  • タブレットと電話：85％
• 最大幅：1920px

間隔

次に、さまざまな画面サイズにさまざまな間隔の値を適用します。

• 左右のマージン
  • デスクトップ：自動
  • タブレット：55px
  • 電話番号：30px
• トップパディング：100px

投稿タイトルモジュールを最初の列に追加

要素

列1の投稿タイトルモジュールから始めて、モジュールを追加します。タイトルのみを有効にします。

• タイトルを表示：はい

バックグラウンド

次に背景色を追加します。

• 色：＃e8e8e8

タイトルテキスト

[デザイン]タブに移動して、タイトルテキストのスタイルを設定します。

• タイトルレベル：H1
• フォント：Josefin Sans
• 重量：太字
• スタイル：TT
• 色：＃44000d
• サイズ
  • デスクトップ：32px
  • タブレット：28px
  • 電話番号：30px
• 線の高さ：1.2 em

間隔

間隔も調整します。

• トップパディング
  • デスクトップとタブレット：100px
• ボトムパディング：80px
• 左パディング
  • デスクトップとタブレット：30px
• 右パディング
  • デスクトップとタブレット：30px
  • 電話番号：10px

国境

モジュールにいくつかの丸い角を与えます。

• 丸みを帯びた角：4つすべてで15px

ボックスシャドウ

そして、微妙なボックスシャドウを追加します。

• ボックスシャドウ：2番目のオプション
• 水平位置：12px
• 垂直位置：12px
• ぼかし強度：20px
• 広がりの強さ：-5px
• 影の色：#dddddd

テキストモジュールを1列目に追加

コンテンツ

前のモジュールのすぐ下にテキストモジュールを追加します。 コンテンツボックスに、プラグインからコピーしたショートコードを追加します。

• 本文：プラグインショートコード

バックグラウンド

次に背景色を追加します。

• 色：＃e8e8e8

文章

テキストのスタイルを設定します。

• フォント：Josefin Sans
• 色：＃44000d
• サイズ
  • デスクトップ：20px
  • タブレット：18px
  • 電話番号：16px
• 間隔：1px

間隔

間隔の設定も調整します。

• トップマージン：50px
• 上下のパディング：40px
• 左右のパディング：30px

国境

次に、いくつかの丸い角を追加します。

• 丸みを帯びた角：4つすべてで15px

ボックスシャドウ

そして、微妙なボックスシャドウを追加してモジュール設定を完了します。

• ボックスシャドウ：2番目のオプション
• 水平位置：12px
• 垂直位置：12px
• ぼかし強度：20px
• 広がりの強さ：-5px
• 影の色：#dddddd

ショップモジュールを2列目に追加

コンテンツ

次のコラムへ！ ショップモジュールを追加し、次のようにメイン設定を調整します。

• 製品ビュータイプ：デフォルト
• 現在のページを使用：はい
• 列のレイアウト：3列

画像

[デザイン]タブに移動し、それに応じて画像のスタイルを設定します。

• 画像の丸みを帯びた角：4つすべてで15px
• イメージボックスシャドウ：2番目のオプション
  • 水平位置：6px
  • 垂直位置：6px
  • ぼかし強度：18px
  • 影の色：#dddddd

タイトルテキスト

次に、タイトルテキストのスタイルを設定します。

• フォント：Josefin Sans
• 重量：セミボールド
• 配置：右
• 色：＃44000d
• サイズ
  • デスクトップ：26px
  • タブレット：24px
  • 電話番号：17px
• 間隔：2px

価格テキスト

価格テキストも忘れずにスタイル設定してください。

• フォント：Josefin Sans
• 配置：右
• 色：＃44000d
• サイズ：15px
• 文字間隔：2px
• 線の高さ：46px

間隔

間隔の設定も調整します。

• トップパディング
  • タブレットと電話：50px
• 左パディング
  • デスクトップ：50px
  • タブレットと電話：0px

カスタムCSS

最後になりましたが、[詳細設定]タブにカスタムの2行のCSSコードを追加して、shopモジュールのさまざまな要素の間にスペースを生成します。 それでおしまい！

• 画像：パディング-下：20px
• 価格：パディング-ボトム：40px

padding-bottom: 20px;

padding-bottom: 40px;

プレビュー

WooCommerceの商品カテゴリページテンプレートの再作成が完了しました。 さまざまな画面サイズで完成したデザインをもう一度見てみましょう。

デスクトップ

モバイル

最終的な考え

この商品カテゴリページテンプレートは、WooCommerceストアのすべてのカテゴリとタグに適用できます。 製品フィルタープラグインの助けを借りて、あなたはあなた自身の店と製品に合うフィルター設定を加えることができます。 Divi wooモジュールのいずれかを使用して、ショップを好きなようにパーソナライズできます。 このテンプレートが、デザインにパーソナライズされた外観を追加するのに役立つことを願っています。 ご質問やご提案がございましたら、コメントでお知らせください。