関連商品ブロックを使用すると、WooCommerceの単一商品テンプレートに関連商品を表示できます。WooCommerceは各商品に割り当てられたカテゴリとタグに基づいて関連商品を自動的に判定するため、商品をカテゴリに配置するかタグを追加することで、同じカテゴリまたはタググループに属する商品のみが表示されるようになります。
このブロックは、シングルプロダクトテンプレート内でのみ使用することを目的として設計されています。表示される商品数や並べ替え方法を制御できるほか、詳細設定タブからグリッドのタイポグラフィ、ボタンスタイル、画像表示を完全にカスタマイズできます。
ページに関連商品ブロックを追加する
SeedProdの単一商品テンプレートに関連商品ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロック > WooCommerce テンプレートタグ の下にある「関連商品」ブロックを、商品詳細ページのテンプレート内の希望するセクションにドラッグ＆ドロップします。
ステップ2: 設定の構成
追加後、「関連商品」ブロックをクリックして設定を開きます。設定タブには以下のオプションが表示されます：
- 列:関連商品グリッドに表示する商品列の数を設定します。
- ページごとの表示件数:関連商品を表示する最大件数を設定します。
- 並べ替え順:関連商品の並べ替え順を設定します — 日付順、ID順、メニュー順、人気順、ランダム順、評価順、またはタイトル順。
- 順序:並べ替え方向を設定します —ASC（昇順）またはDESC（降順）。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、製品関連ブロックの視覚的な外観をカスタマイズできます。設定は3つのセクションに分類されています。
スタイル:
- 配置:関連商品のグリッドの水平方向の配置を設定します — 左、中央、または右 — デスクトップ、タブレット、モバイルごとに個別に制御できます。
- タイトルのタイポグラフィ：製品タイトルテキストのフォントファミリー、サイズ、行間、文字間隔、太さ、スタイル、大文字小文字を設定します。
- 説明のタイポグラフィ:製品説明テキストのフォントファミリー、サイズ、行間、文字間隔、太さ、スタイル、大文字小文字を設定します。
- 価格のタイポグラフィ:商品価格テキストのフォントファミリー、サイズ、行間、文字間隔、太さ、スタイル、大文字小文字を設定します。
- 価格色：通常商品の価格の色を設定します。
- セールカラー：商品が割引された際のセール価格の色を設定します。
ボタン:
- ボタンスタイル：カートに追加ボタンのビジュアルスタイルを選択してください — フラット、2D、ビンテージ、ゴースト、リンク。
- ボタンカラー：カートに追加ボタンの背景色を設定します。
- ボタンタイポグラフィ：ボタンテキストのフォントファミリー、サイズ、行間、文字間隔、太さ、スタイル、大文字小文字を設定します。
- ボタンサイズ：プリセットのボタンサイズを選択してください — 小、中、大、特大、または超特大。
- 角丸半径：スライダーを使用して「カートに入れる」ボタンの角の丸みを調整します。
画像：
- 影：製品画像にプリセットサイズ（なし、ヘアライン、小、中、大、特大、2倍特大、または下方向ドロップシャドウ）で影を適用します。
- 枠線のスタイル:商品画像の枠線のスタイルを設定します — 実線、点線、または破線。
- 画像枠の色:商品画像の枠の色を設定します。
- 画像の枠線の幅：商品画像の各辺（上、右、下、左）の枠線の太さを設定します。
- 画像の余白パディング：商品画像の枠線内に内側の余白を追加します。
スペース:
- 余白：ブロックの周囲の四辺の外側の間隔を設定します。デスクトップ、タブレット、モバイルそれぞれで独立して制御できます。
- パディング：ブロックラッパー内の四辺すべてに内側の間隔を設定し、デバイスごとの制御を行います。
属性：
- カスタムクラス:ブロックラッパーに1つ以上のカスタムCSSクラスを追加し、対象を絞ったスタイル設定を行います。
- CSS ID:SeedProdはこのブロックに対して一意のCSS IDを自動生成します。カスタムCSSやJavaScriptでブロックを参照する際に使用できます。
- カスタム属性:ブロックラッパー要素にカスタムHTML属性を追加します。各属性をキー|値形式で改行して入力してください。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で表示した際にブロックを非表示にするか切り替えます。
- タブレットで非表示:タブレット画面で表示時にブロックを非表示にするか切り替えます。
- モバイルで非表示:モバイル画面で表示される際にこのブロックを非表示にするか切り替えます。
アニメーション効果：
- スクロール効果：ブロックにスクロール連動アニメーションを適用します。垂直スクロールと水平スクロールのオプションを含み、方向、速度、ビューポートオフセットを制御できます。
- マウス効果：ブロックにマウスの動きに基づく視差効果を適用します。
ステップ4: 変更を保存する
製品関連ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
単一商品テンプレートに関連商品ブロックの追加に成功しました！関連商品の表示は、平均注文額を向上させ、顧客が商品カタログを探索し続けるための実証済みの方法です。WooCommerceが各商品に最も関連性の高いおすすめを表示できるよう、一貫したカテゴリとタグで商品を整理してください。