追加情報ブロックを使用すると、WooCommerceの製品属性データを単一商品テンプレートに表示できます。このブロックは各商品の「追加属性」セクションから情報を自動的に抽出し、寸法、重量、色、素材、その他のカスタム属性などの仕様を整理された表形式で表示します。
このブロックは、単一商品テンプレートにおいて、詳細な製品仕様や属性を洗練されたプロフェッショナルなレイアウトで表示したい場合に不可欠です。必要な技術的な詳細や仕様を一目で確認できるようにすることで、顧客が情報に基づいた購入判断を下すのに役立ちます。
ページへの追加情報ブロックの追加
SeedProdの単一商品テンプレートに追加情報ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロック > WooCommerce テンプレートタグ の下にある「追加情報」ブロックを、商品詳細ページのテンプレート内の任意のセクションにドラッグ＆ドロップします。
追加情報ブロックはWooCommerceテンプレートタグの下にあり、商品詳細ページテンプレートに追加できます。
ステップ2: コンテンツ設定の構成
追加後、追加情報ブロックをクリックして設定を開きます。コンテンツタブでは、商品属性の表示方法をカスタマイズできます。
- ヘッダー：商品属性テーブルの上部に表示される見出しテキストを入力または編集してください（例：「追加情報」または「製品仕様」）。
- ヘッダーのタイポグラフィ:セクションヘッダーのフォントプロパティ（フォントファミリー、サイズ、太さ、スタイルを含む）をカスタマイズします
- ヘッダーの色：デザインに合わせてヘッダーテキストの色を設定します
- タイポグラフィ:テーブル内の属性ラベルと値のフォントプロパティを制御します。これにはフォントファミリー、サイズ、太さ、スタイルが含まれます。
- テキスト色：属性のテキストの色を選択し、読みやすさを確保してください
コンテンツタブでは、商品属性の表示に関するヘッダーテキスト、タイポグラフィ、および色をカスタマイズできます。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、追加情報ブロックの外観をカスタマイズできます：
スペース:
- 余白：追加情報ブロックの周囲の外側の間隔（上、右、下、左）を制御します。これにより、ブロックと周囲の要素の間に表示されるスペースが決まります。
- パディング：追加情報ブロック内の内側の間隔（上、右、下、左）を調整します。これにより、コンテンツとブロックの端の間に余白が生まれます。
属性：
- CSS ID:追加情報ブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲティング用にSeedProdによって自動的に作成されます。
- カスタムクラス:テーマまたはカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-product-info|attributes)
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で追加情報ブロックを非表示にする
- タブレットで非表示:タブレット端末で追加情報ブロックを非表示にする
- モバイルで非表示:モバイル端末で追加情報ブロックを非表示にする
アニメーション効果：
- エントランスアニメーション：追加情報ブロックが表示領域にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど多数のオプションが用意されています。これにより製品仕様への注目を引きます
[詳細設定]タブでは、間隔、カスタム属性、デバイスの表示設定、および進入アニメーションに関するオプションを提供します。
ステップ4: 変更を保存する
追加情報のブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
追加情報ブロックを商品単品テンプレートに正常に追加しました！このブロックは商品属性や仕様を整理された見やすい表形式で自動的に表示し、お客様が情報に基づいた購入判断を下すのに役立ちます。様々なタイポグラフィやカラー設定を試して、ブランドに合った商品情報表示を作成し、商品ページを魅力的に演出しましょう。