商品コンテンツブロックは、単一商品テンプレートでWooCommerce商品の完全な商品説明を表示します。WooCommerceから各商品の商品説明を動的に取得するため、手動で更新しなくても常に正しいコンテンツが表示されます。
このブロックは、単一商品テンプレートでのみ使用できるように設計されています。そのまま使用してWooCommerceに入力されたとおりの商品説明を表示することも、ショートコードの周りに補足テキストや書式設定を追加して、商品ページでのコンテンツの表示方法をカスタマイズすることもできます。
商品コンテンツブロックをページに追加する
SeedProd単一商品テンプレートに商品コンテンツブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceテンプレートタグの下で、商品コンテンツブロックを目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、商品コンテンツブロックをクリックして設定を開きます。コンテンツタブには、WooCommerceの商品説明を動的に取得するSeedProdショートコードが事前に入力されたテキストエリアがあります。
テキスト:
- コンテンツフィールド: デフォルトで
ショートコードが含まれています。このショートコードは、WooCommerceから各商品の商品説明を動的に取得するものです。商品コンテンツ全体を置き換える意図がない限り、削除しないでください。ショートコードの上または下に、追加のテキスト、HTML、または書式設定を追加して、商品コンテンツを補足できます。 - ビジュアルエディター / HTMLの編集: リッチテキストビジュアルエディター（ツールバーコントロール付きの書式設定済みテキスト用）とHTMLエディター（直接コード編集用）を切り替えます。どちらのモードでも、動的なショートコードと並行して作業できます。
- 配置: テキストコンテンツの水平方向の配置（左、中央、右）を設定します。デスクトップ、タブレット、モバイルのデバイスごとの配置をサポートします。
- フォントサイズ: スライダー（10〜72px）を使用して、コンテンツエリアの基本フォントサイズを設定します。
ステップ3：デザインをカスタマイズする
詳細タブでは、商品コンテンツブロックのタイポグラフィ、色、およびビジュアルスタイルをカスタマイズできます。
スタイル:
- タイポグラフィ: 商品コンテンツテキストのフォントファミリー、サイズ、太さ、行の高さ、文字間隔、スタイルを設定します。
- 色: 商品説明コンテンツのテキスト色を設定します。
- テキストシャドウ: テキストにシャドウ効果を追加します — なし、ヘアライン、小、中、大、特大、2倍特大から選択します。
- 影: ブロック全体にボックスシャドウを追加して、微妙な奥行き効果を出します。
間隔：
- 余白: 商品コンテンツブロックの周囲の外部スペース（上、右、下、左）を制御します。これにより、商品説明とページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: 商品コンテンツブロック内の内側の間隔（上、右、下、左）を調整します。これにより、説明テキストとブロックの端の間に余白ができます。
属性:
- CSS ID: 商品コンテンツブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット設定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、次の形式を使用します: attribute-name|value (例: data-section|description)。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で商品コンテンツブロックを非表示にします。
- タブレットで非表示: タブレットデバイスで商品コンテンツブロックを非表示にします。
- モバイルで非表示: モバイルデバイスで商品コンテンツブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: 商品コンテンツブロックが表示領域にスクロールインしたときに再生される、さまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、回転インなどがあります。
ステップ4：変更を保存
商品コンテンツブロックの設定が完了し、外観をカスタマイズしたら、必ず作業を保存してください。
商品コンテンツブロックをシングル商品テンプレートに追加しました！このブロックは、すべての商品に対して正しい商品説明を自動的に表示するため、WooCommerceページには常に正確で最新のコンテンツが表示されます。タイポグラフィとスペーシングのコントロールを使用して説明をスタイル設定し、商品ページのデザインにシームレスに統合してください。