アーカイブ製品ブロックを使用すると、製品アーカイブテンプレートにWooCommerce製品のグリッドを表示できます。このブロックは、ショップページ、カテゴリアーカイブ、タグアーカイブ、その他の製品コレクションページに、カスタマイズ可能なレイアウトとフィルタリングオプションを使用して、製品リストを自動的に表示します。
このブロックは、製品の表示方法を完全に制御したいカスタム製品アーカイブテンプレートを作成するために不可欠です。列数、ページネーションの有効化、並べ替えオプションの追加、カテゴリ、タグ、属性、またはその他の基準に基づいて表示される製品のフィルタリングをカスタマイズして、ブランドに完全に一致するショッピング体験を作成できます。
ページにアーカイブ製品ブロックを追加する
SeedProd製品アーカイブテンプレートにアーカイブ製品ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceテンプレートタグの下にあるアーカイブ製品ブロックを、製品アーカイブテンプレートの目的のセクションにドラッグアンドドロップします。
アーカイブ製品ブロックは、WooCommerceテンプレートタグの下にあり、製品アーカイブテンプレートに追加できます。
ステップ2：コンテンツ設定を構成する
追加したら、アーカイブ製品ブロックをクリックして設定を開きます。コンテンツタブで、製品の表示方法とフィルタリング方法を構成できます。
レイアウト設定：
- 列:製品グリッドの列数を設定します。列数が多いほど、1行あたりの製品が多く表示され、列数が少ないほど、各製品がより目立ちます。一般的なレイアウトには、3列または4列があります。
- ページネーション:ページネーションコントロールを有効または無効にするには切り替えます。有効にすると、製品はナビゲーションボタンを使用して複数のページに分割されます。
- アイテム数を表示:見つかった製品の総数を表示するには切り替えます（例：「1〜12件中48件の結果を表示」）。
- 並べ替え順を表示:訪問者が人気、評価、価格、新しさなどの基準で製品を並べ替えることができるドロップダウンメニューを表示するには切り替えます。
- 制限:ページあたりに表示する製品の最大数を設定します。これはページネーションと連携して、訪問者が「次へ」をクリックする前に表示される製品数を決定します。
クエリ:
- タイプ:現在表示されているアーカイブ（カテゴリ、タグなど）に基づいて製品を表示するには、「アーカイブ製品」に設定します。
- クエリ基準:表示される製品をフィルタリングする方法を選択します。オプションには、属性（製品属性でフィルタリング）、タグ（特定のタグを持つ製品を表示）、カテゴリ（特定のカテゴリの製品を表示）、SKU（製品SKUでフィルタリング）、グループ（製品グループでフィルタリング）、または可視性（カタログの可視性設定に基づいて表示される製品を制御）が含まれます。
- タグで選択:タグでクエリする場合、含めるまたは除外する製品タグを選択します。
- カテゴリで選択:カテゴリでクエリする場合、表示する製品カテゴリを選択します。
- SKUで選択: SKUでクエリを実行する場合は、表示する特定の製品SKUを入力します
- グループで選択: グループでクエリを実行する場合は、製品グループを選択してフィルタリングします
- 表示設定で選択: カタログに表示、検索に表示、非表示、または注目の商品としてマークされた製品を表示するかどうかを制御します
コンテンツタブでは、製品アーカイブの列、ページネーション、製品制限、およびフィルタリングオプションを構成できます。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、アーカイブ製品ブロックの視覚的な外観をカスタマイズできます。
スタイル:
- 配置: グリッド内の製品アイテムの水平方向の配置（左、中央、右）を設定します
- 説明のタイポグラフィ: フォントファミリー、サイズ、太さ、スタイルを含む製品説明のフォントプロパティを制御します
- 価格のタイポグラフィ: 製品価格のフォントプロパティをカスタマイズします
- 価格の色: 製品価格を目立たせるために色を設定します
- セールバッジの色: 値引きされた製品に表示されるセールバッジの色を選択します
ボタン:
- ボタンのスタイル: 「カートに追加」ボタンのビジュアルスタイルを選択します。オプションには、フラット（モダンなフラットデザイン）、2D（控えめな奥行き）、ビンテージ（クラシックな外観）、ゴースト（境界線付きの透明）、またはリンク（プレーンテキストリンク）があります
- ボタンの色: 製品ボタンの背景色を設定します
- ボタンのタイポグラフィ: ボタンテキストのフォントプロパティをカスタマイズします
- ボタンのサイズ: 小、中、大、特大、特大のいずれかのボタンサイズを選択します
- 角丸: ボタンの角の丸みを制御します。値が大きいほど、より丸いボタンになります
画像:
- 影: 製品画像に影の効果を追加して奥行きを出します。なし、ヘアライン、小、中、大、特大、特大、または下部ドロップシャドウから選択します
- 画像境界線: 製品画像の周りに境界線を表示します
- 角丸: 画像の角の丸みを制御します
- 境界線のスタイル: 境界線の外観を選択します: 実線（連続線）、点線（小さな点）、または破線（短い線）。
- 境界線の色: 画像境界線の色を選択します
- 境界線の幅: 各辺（上、右、下、左）の境界線の厚さを設定します
- 画像の間隔: 製品画像の周りに内部パディングを追加して、余白を作成します
間隔：
- マージン: アーカイブ製品ブロックの外側の間隔（上、右、下、左）を制御します。これにより、製品グリッドと周囲の要素の間のスペースが決まります
- パディング: アーカイブ製品ブロック内の内側の間隔（上、右、下、左）を調整します。これにより、製品グリッドとブロックの端の間に余白ができます
属性:
- CSS ID: アーカイブ製品ブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。各属性を新しい行に次の形式で入力します: attribute-name|value (例: data-products|archive)
デバイス表示:
- デスクトップで非表示: アーカイブ商品ブロックをデスクトップ画面で非表示にします
- タブレットで非表示: アーカイブ商品ブロックをタブレットデバイスで非表示にします
- モバイルで非表示: アーカイブ商品ブロックをモバイルデバイスで非表示にします
アニメーション効果:
- 表示アニメーション: 商品グリッドが表示領域に入ったときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。これにより、商品リストに注目が集まります
高度なタブには、商品レイアウト、タイポグラフィ、ボタン、画像、スペーシング、アニメーションに関する豊富なスタイリングオプションが用意されています。
ステップ4：変更を保存
アーカイブ商品ブロックの設定と外観のカスタマイズが完了したら、作業内容を保存してください。
商品アーカイブテンプレートにアーカイブ商品ブロックを追加しました！この強力なブロックは、WooCommerceの商品を、フィルタリング、並べ替え、ページネーションオプションを備えたカスタマイズ可能なグリッドレイアウトで自動的に表示します。さまざまなカラムレイアウト、ボタンのスタイル、クエリ設定を試して、ブランドに完全に一致し、顧客が探しているものを正確に見つけるのに役立つ商品アーカイブを作成してください。