商品在庫ブロックは、単一商品テンプレートの各WooCommerce商品について、リアルタイムの在庫状況を表示します。顧客に在庫数を正確に表示することで、緊急性を生み出し、買い物客がより迅速に購入を決定できるようになります。
このブロックは、単一商品テンプレートでのみ使用できるように設計されています。動的なショートコードを使用して、各商品のWooCommerceからの在庫数を自動的に取得するため、手動で更新しなくても情報が正確に保たれます。ショートコードをカスタムテキストと組み合わせたり、フォントサイズや配置を調整したり、タイポグラフィ、色、影の効果で出力をスタイル設定したりすることもできます。
商品在庫ブロックをページに追加する
SeedProd単一商品テンプレートに商品在庫ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceテンプレートタグの下で、商品在庫ブロックを単一商品テンプレートの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、商品在庫ブロックをクリックして設定を開きます。コンテンツタブで、在庫表示テキストを編集したり、配置を調整したり、フォントサイズを設定したりできます。
- テキスト: コンテンツフィールドには、各商品のWooCommerceから在庫数を動的に取得する
ショートコードが事前に入力されています。ショートコードの前または後にカスタムテキストを追加できます。たとえば、「在庫残り のみ！」のように、より魅力的なメッセージを作成できます。フィールドの下にあるボタンを使用して、ビジュアルエディター（リッチテキスト）とHTMLの編集（コード）モードを切り替えます。 - 配置: 在庫テキストの水平方向の配置を設定します。左、中央、右。デスクトップ、タブレット、モバイルのデバイスごとの配置をサポートします。
- フォントサイズ: スライダー（10〜72px）を使用して、在庫テキストのフォントサイズを設定します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、ブロックの外観をスタイル設定し、デバイス全体での表示を制御できます。
スタイル:
- タイポグラフィ: 在庫テキストのフォントファミリー、太さ、行の高さ、文字間隔、テキスト変換を設定します。
- 色: 在庫表示のテキスト色を設定します。
- テキストシャドウ: 在庫テキストに直接影の効果を追加します。プリセットサイズ（なし、ヘアライン、小、中、大、特大、2倍特大）から選択して、テキストに微妙または劇的な深みを加えます。
- 影: ブロック全体にボックスシャドウを追加して、ページ背景から視覚的に浮き上がらせます。
間隔：
- 余白: 商品在庫ブロックの周囲の外側のスペース（上、右、下、左）を制御します。これにより、在庫表示とページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: 商品在庫ブロック内の内側の余白（上、右、下、左）を調整します。これにより、在庫テキストとブロックの端の間にゆとりが生まれます。
属性:
- CSS ID: 商品在庫ブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックのラッパー要素に任意のHTML属性を追加します。属性名|値の形式で各属性を新しい行に入力します（例: data-stock|available）。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で商品在庫ブロックを非表示にします。
- タブレットで非表示: タブレットデバイスで商品在庫ブロックを非表示にします。
- モバイルで非表示: モバイルデバイスで商品在庫ブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: 商品在庫ブロックが表示領域にスクロールインしたときに再生される、さまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。
ステップ4：変更を保存
商品在庫ブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
商品在庫ブロックをシングル商品テンプレートに追加しました！このブロックは、WooCommerceのライブ在庫数をすべての商品に対して自動的に表示し、購入者を常に最新の情報に保ちます。手動での作業は一切不要です。カスタムの周囲テキスト、フォントサイズ、色を試して、緊急性を高め、在庫切れになる前に購入を促す在庫状況メッセージを作成しましょう。