商品データタブブロックは、WooCommerceの商品説明、追加情報、および顧客レビューを、単一商品テンプレートのタブ形式のレイアウトで表示します。すべて商品情報を単一のスクロールブロックで表示する代わりに、タブ形式のインターフェースは、それを明確にラベル付けされたセクションに整理し、買い物客はワンクリックでナビゲートできます。
このブロックは、単一商品テンプレートでのみ使用するように設計されており、WooCommerceがインストールされている必要があります。タブとそのコンテンツパネルの両方の外観（色、タイポグラフィ、境界線、間隔、影を含む）を、ストアのデザインに合わせて完全にカスタマイズできます。
商品データタブブロックをページに追加する
SeedProd単一商品テンプレートに商品データタブブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceテンプレートタグの下で、商品データタブブロックを単一商品テンプレートの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、商品データタブブロックをクリックして設定を開きます。コンテンツタブは、タブとパネルの2つの折りたたみ可能なセクションに分かれており、タブボタンとその下のコンテンツエリアのスタイルを設定できます。
タブ:
- 通常: デフォルト（未選択）状態のタブの色設定を表示するにはオンにします。非アクティブなタブの文字色、背景色、および境界線の色を設定します。
- アクティブ: 現在選択されているタブの色設定を表示するにはオンにします。アクティブなタブ状態の文字色、背景色、および境界線の色を設定し、非アクティブなタブとはっきりと区別できるようにします。
- タブのタイポグラフィ: タブラベルテキストのフォントファミリー、サイズ、太さ、行の高さ、文字間隔を設定します。
- 角丸: タブボタンの角の丸み（0〜100px）を設定します。この値を大きくすると、ピル型または丸いタブを作成できます。
パネル:
- 文字色: パネル領域内に表示されるコンテンツのデフォルトの文字色を設定します。
- パネルのタイポグラフィ: 各パネル内の本文テキストのフォントファミリー、サイズ、太さ、スタイルを設定します。
- 見出しの色: パネルコンテンツ内に表示される見出し要素（h2、h3など）の色を設定します。
- 見出しのタイポグラフィ: パネル見出しテキストのフォントファミリー、サイズ、太さ、スタイルを設定します。
- パネルのパディング: パネル領域内のコンテンツの周囲の内側の間隔を設定します。
- パネルの影: パネル領域に影の効果を追加します。プリセットの影のサイズから選択して、パネルに奥行きとページ背景からの分離感を与えます。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、商品データタブブロックの境界線、間隔、および表示を調整できます。
パネル境界線:
- パネル境界線の半径: パネルコンテンツエリアの角の丸みを設定します。
- パネル境界線の太さ: パネルの各辺（上、右、下、左）の境界線の太さを設定します。
- パネル境界線のスタイルと色: パネルエリアの境界線のスタイル（実線、点線、破線）を選択し、境界線の色を設定します。
ブロック境界線:
- 境界線の半径: 商品データタブブロック全体の角の丸みを設定します。
- 境界線の太さ: 外側のブロックラッパーの各辺の境界線の太さを設定します。
- 境界線のスタイルと色: 外側のブロックラッパーの境界線のスタイルと色を選択します。
間隔：
- マージン: 商品データタブブロックの外側の間隔（上、右、下、左）を制御します。これにより、タブとページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: 商品データタブブロックの内側の間隔（上、右、下、左）を調整します。これにより、タブコンテンツとブロックの端の間に適切なスペースが生まれます。
属性:
- CSS ID: 商品データタブブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名|値の形式（例: data-section|tabs）で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で商品データタブブロックを非表示にします。
- タブレットで非表示: タブレットデバイスで商品データタブブロックを非表示にします。
- モバイルで非表示: モバイルデバイスで商品データタブブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: 商品データタブブロックが表示領域にスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、回転インなどがあります。
ステップ4：変更を保存
商品データタブブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
これで、シングル商品テンプレートに商品データタブブロックが正常に追加されました！このブロックは、WooCommerceから商品概要、追加情報、および顧客レビューを自動的に取得し、整理されたタブ形式のインターフェイスに表示します。タブの色設定を使用して、アクティブ状態と非アクティブ状態を区別し、パネルのタイポグラフィと境界線を調整して、買い物客を惹きつける一貫性のある商品ページエクスペリエンスを作成してください。