商品価格ブロックは、シングル商品テンプレートで各WooCommerce商品の価格を表示します。WooCommerceから現在の価格（セール価格を含む）を動的に取得するため、購入者は手動で更新することなく、常に正確な価格を確認できます。
このブロックは、シングル商品テンプレートでのみ使用できるように設計されています。価格を表示するだけでなく、通常価格とセール価格の両方のタイポグラフィ、色、配置を完全に制御できます。元の価格とセール価格を縦に積み重ねて、割引をすぐに確認できるようにするオプションも含まれています。
商品価格ブロックをページに追加する
SeedProdシングル商品テンプレートに商品価格ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceテンプレートタグの下で、商品価格ブロックをシングル商品テンプレートの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、商品価格ブロックをクリックして設定を開きます。コンテンツタブで、上部にある通常価格の表示をスタイル設定し、次にセール価格セクションを展開して、割引価格の表示方法を設定します。
通常価格：
- タイポグラフィ：商品価格テキストのフォントファミリー、サイズ、太さ、行の高さ、文字間隔を設定します。
- 色：通常価格のテキスト色を設定します。
- 配置：価格の水平方向の配置（左、中央、右）を設定します。デスクトップ、タブレット、モバイルのデバイスごとの配置に対応しています。
セール価格：
- セール価格のタイポグラフィ：セール価格テキストのフォントファミリー、サイズ、太さ、スタイルを特に設定し、通常価格とは異なる見た目にできるようにします。たとえば、取引を強調するために大きくしたり太くしたりできます。
- 色：セール価格のテキスト色を設定します。割引額に注意を引くために、赤や緑などの対照的な色を使用してください。
- スタック：オンにすると、セール価格が元の価格（取り消し線付き）の下に縦に積み重ねて表示され、横並びではなくなります。このレイアウトにより、購入者は元の価格と割引価格を簡単に比較できます。
- 間隔：スタックオプションが有効な場合、元の価格とセール価格の間の間隔（1〜100px）を設定します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、商品価格ブロックの間隔、属性、および表示を制御できます。
間隔：
- マージン：商品価格ブロックの周囲の外部スペース（上、右、下、左）を制御します。これにより、価格と商品ページの周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: 商品価格ブロック内の内側の余白（上、右、下、左）を調整します。これにより、価格テキストとブロックの端の間に余白が生まれます。
属性:
- CSS ID: 商品価格ブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット設定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックのラッパー要素に任意のHTML属性を追加します。属性名を改行し、次の形式で入力します: attribute-name|value (例: data-price|product)。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で商品価格ブロックを非表示にします。
- タブレットで非表示: タブレットデバイスで商品価格ブロックを非表示にします。
- モバイルで非表示: モバイルデバイスで商品価格ブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: 商品価格ブロックが表示領域にスクロールインしたときに再生される、さまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。
ステップ4：変更を保存
商品価格ブロックの設定が完了し、外観のカスタマイズが終わったら、必ず作業内容を保存してください。
商品価格ブロックをシングル商品テンプレートに追加しました！このブロックは、すべての商品に対して正しい価格を自動的に表示し、セール価格も有効時に表示します。セール価格の色、スタックレイアウト、タイポグラフィの設定を試して、お得な情報を強調し、WooCommerceストアでのコンバージョンを促進する価格表示を作成しましょう。