商品在庫ブロックは、単一商品テンプレート上で各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から各商品のリアルタイム在庫数を自動表示するため、手動作業なしで買い物客に在庫状況を伝えられます。在庫状況メッセージを工夫して緊急性を高め、在庫切れ前に購入を促しましょう。周囲のテキストやフォントサイズ、色を自由に調整してみてください。