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