セール商品ブロックを使用すると、現在セール中のすべての WooCommerce 商品を閲覧可能なグリッドで表示できます。アクティブなセール価格の商品を自動的に表示するため、専用のセールページを作成したり、サイドバーでプロモーションを強調したり、サイトのどこかにセールセクションを追加したりすることが容易になります。
クエリコントロールを使用して、表示する商品の数、並べ替え方法、およびオプションのフィルターを適用する方法を制御できます。高度なタブでは、ストアのブランディングに合わせてグリッドのタイポグラフィ、ボタンのスタイル、および商品画像の表示方法を完全に制御できます。
セール商品ブロックをページに追加する
SeedProd ページにセール商品ブロックを追加するには、次の手順に従ってください。
ステップ 1：ブロックを追加する
デザイン > ブロック > WooCommerce の下にある セール商品 ブロックを、ページの目的のセクションにドラッグアンドドロップします。
ステップ 2：設定を構成する
追加したら、セール商品ブロックをクリックして設定を開きます。設定タブでは、設定は 2 つのセクションに整理されています。
コンテンツ：
- 列：グリッドに表示する商品列の数を設定します。
- ページネーション：ページネーションを有効にするにはトグルをオンにし、商品グリッドを複数のページに分割します。
- アイテム数を表示：表示される合計商品数を表示するにはトグルをオンにします。
- 並べ替えを表示：訪問者が価格、人気、評価などの基準で商品を並べ替えられるように、並べ替えドロップダウンを表示するにはトグルをオンにします。
- 制限：表示する最大商品数を設定します。一致するすべてのセール商品を表示するには
-1を使用します（デフォルト）。
クエリ：
- タイプ：表示する商品を選択します — すべて、おすすめ商品、セール商品、売れ筋商品、新着商品、またはトップ評価商品。このブロックのデフォルトは セール商品 です。
- 並べ替え：商品の並べ替え方法を設定します — 日付、タイトル、価格、人気、評価、ランダム、またはメニュー順。
- 順序：並べ替えの方向を設定します — 昇順（ASC）または降順（DESC）。
ステップ 3：デザインをカスタマイズする
高度なタブでは、セール商品ブロックの視覚的な外観をカスタマイズできます。設定は 3 つのセクションに整理されています。
スタイル:
- 配置: 製品グリッドの水平方向の配置を、デスクトップ、タブレット、モバイルのデバイス別コントロールで、左揃え、中央揃え、または右揃えに設定します。
- 説明のタイポグラフィ: 製品説明テキストのフォントファミリー、サイズ、行の高さ、文字間隔、太さ、スタイル、大文字/小文字を設定します。
- 価格のタイポグラフィ: 製品価格テキストのフォントファミリー、サイズ、行の高さ、文字間隔、太さ、スタイル、大文字/小文字を設定します。
- 価格の色: 通常の製品価格の色を設定します。
- セール価格の色: 製品が割引されている場合のセール価格の色を設定します。
ボタン:
- ボタンのスタイル: カートに追加ボタンのビジュアルスタイルを、フラット、2D、ビンテージ、ゴースト、またはリンクから選択します。
- ボタンの色: カートに追加ボタンの背景色を設定します。
- ボタンのタイポグラフィ: ボタンテキストのフォントファミリー、サイズ、行の高さ、文字間隔、太さ、スタイル、大文字/小文字を設定します。
- ボタンのサイズ: 事前設定されたボタンサイズを、小、中、大、特大、超特大から選択します。
- 角丸: スライダーを使用して、カートに追加ボタンの角の丸みを調整します。
画像:
- 影: 事前設定されたサイズ（なし、極細、小、中、大、特大、超特大、または下部ドロップシャドウ）を使用して、製品画像に影を適用します。
- 境界線のスタイル: 製品画像の境界線のスタイルを、実線、点線、または破線に設定します。
- 画像境界線の色: 製品画像の境界線の色を設定します。
- 画像境界線の幅: 製品画像の各辺（上、右、下、左）の境界線の太さを設定します。
- 画像余白: 境界線内の製品画像の周りに内側の余白を追加します。
間隔:
- マージン: ブロックの外側のスペーシングを4つの辺すべてに設定します。デスクトップ、タブレット、モバイルで独立したコントロールがあります。
- パディング: ブロックラッパーの内側のスペーシングを4つの辺すべてに設定します。デバイスごとのコントロールがあります。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProd は、このブロックのユニークなCSS ID を自動的に生成します。カスタムCSS またはJavaScript でこのブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイスの表示設定:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするトグル。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするトグル。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするトグル。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロール連動アニメーションを適用します。縦スクロールと横スクロールのオプションがあり、方向、速度、ビューポートオフセットを制御できます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4：変更を保存する
セール商品ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
セール商品ブロックをページに追加しました！効果的に配置されたセール商品グリッドは、コンバージョンを促進する最も効果的な方法の1つです。お得な商品を探している買い物客は、必要なものをすべて1か所で見つけることができます。高度タブのセールカラーオプションを使用して、割引価格を目立たせ、プロモーションが提供する価値を強化してください。