商品グリッドブロックは、WooCommerceの商品を視覚的に整理されたグリッドレイアウトで効率的に表示する方法を提供します。すべての商品を表示したり、タイプ（おすすめ、セール中、売れ筋、新着、高評価）で絞り込んだりでき、顧客がグリッドから直接カートに複数の商品を追加できるようにします。
柔軟なクエリコントロール、デバイスごとの配置、ボタンと画像のスタイリング、およびオプションのページネーションにより、このブロックはショップページ、カテゴリランディングページ、または厳選された商品をクリーンで閲覧しやすい形式で表示したいあらゆるページに最適です。
商品グリッドブロックをページに追加する
SeedProdページに商品グリッドブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceの下で、商品グリッドブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ 2: 設定を構成する
追加したら、商品グリッドブロックをクリックして設定を開きます。設定タブでは、設定は2つのセクションに整理されています。
コンテンツ:
- 列：グリッドに表示する商品列の数を設定します。
- ページネーション：トグルをオンにしてページネーションを有効にし、商品グリッドを複数のページに分割します。
- アイテム数を表示：トグルをオンにして、表示される商品の総数を表示します。
- 並べ替え順を表示：トグルをオンにして並べ替えドロップダウンを表示し、訪問者が価格、人気、評価などの基準で商品を並べ替えられるようにします。
- 制限：表示する最大商品数を設定します。一致するすべての商品を表示するには
-1を使用します（デフォルト）。
クエリ:
- タイプ：表示する商品を選択します — すべての商品、おすすめ商品、セール中の商品、売れ筋商品、新着商品、または高評価商品。
- 含める：ID、SKU、カテゴリ、タグ、属性、グループ、または可視性などの特定の基準に一致する商品のみを含めるようにフィルタリングして、商品選択を絞り込みます。
- 除外：ID、SKU、カテゴリ、タグ、属性、グループ、または可視性などの特定の基準に一致する商品を除外するようにフィルタリングして、商品選択を絞り込みます。
- 並べ替え順：商品の並べ替え方法を設定します — 日付、タイトル、価格、人気、評価、ランダム、またはメニュー順。
- 順序: 並び替えの方向を設定します — ASC（昇順）またはDESC（降順）。
ステップ3：デザインをカスタマイズする
詳細設定タブでは、商品グリッドブロックの視覚的な外観をカスタマイズできます。設定は3つのセクションに整理されています。
スタイル:
- 配置：デスクトップ、タブレット、モバイルのデバイスごとのコントロールを使用して、商品グリッドの水平方向の配置（左、中央、右）を設定します。
- 説明のタイポグラフィ：商品説明テキストのフォントファミリー、サイズ、行の高さ、文字間隔、太さ、スタイル、およびケースを設定します。
- 価格のタイポグラフィ: 商品価格テキストのフォントファミリー、サイズ、行の高さ、文字間隔、太さ、スタイル、大文字/小文字を設定します。
- 価格の色: 通常の商品の価格の色を設定します。
- セール価格の色: 商品が割引されている場合のセール価格の色を設定します。
ボタン:
- ボタンのスタイル: カートに追加ボタンのビジュアルスタイルを選択します — フラット、2D、ビンテージ、ゴースト、またはリンク。
- ボタンの色: カートに追加ボタンの背景色を設定します。
- ボタンのタイポグラフィ: ボタンテキストのフォントファミリー、サイズ、行の高さ、文字間隔、太さ、スタイル、大文字/小文字を設定します。
- ボタンのサイズ: 事前設定されたボタンサイズを選択します — 小、中、大、特大、超特大。
- 角丸: スライダーを使用して、カートに追加ボタンの角の丸みを調整します。
画像:
- 影: 事前設定されたサイズ — なし、極細、小、中、大、特大、超特大、または下部ドロップシャドウを使用して、商品画像に影を適用します。
- 境界線のスタイル: 商品画像の境界線のスタイルを設定します — 実線、点線、または破線。
- 画像境界線の色: 商品画像の境界線の色を設定します。
- 画像境界線の幅: 商品画像の各辺（上、右、下、左）の境界線の太さを設定します。
- 画像余白: 境界線内の商品画像の周りに内側の余白を追加します。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4：変更を保存
商品グリッドブロックの設定が完了し、外観をカスタマイズしたら、作業を保存してください。
商品グリッドブロックをページに追加しました！フルショップページを作成する場合でも、ターゲットを絞ったプロモーションセクションを作成する場合でも、柔軟なクエリコントロールと豊富なスタイリングオプションにより、適切な商品を適切な方法で簡単に表示できます。さまざまな商品タイプ、列数、ボタンのスタイルを試して、閲覧を促進し、購入を促進するグリッドを作成してください。