アップセルブロックは、現在の商品の下に推奨されるアップセル商品を自動的に表示することで、WooCommerceのシングル商品テンプレートを強化します。これらは、WooCommerceで手動でアップセルとして指定した商品であり、顧客を補完的な商品やより高価な商品に誘導するための厳選された方法を提供します。
このブロックを追加する前に、各商品の関連商品タブに移動し、アップセルフィールドに商品を追加して、WooCommerceでアップセル商品がすでに設定されていることを確認してください。設定が完了したら、ブロックが表示を処理します。列、並び順、タイポグラフィ、ボタンのスタイル、画像の表示方法を完全に制御できます。
アップセルブロックをシングル商品テンプレートに追加する
SeedProdシングル商品テンプレートにアップセルブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
WooCommerceテンプレートタグの下で、アップセルブロックをシングル商品テンプレートの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、アップセルブロックをクリックして設定を開きます。コンテンツタブでは、次の表示オプションを調整できます。
- 列：グリッドにアップセル商品を表示するために使用される列数を設定します。
- 1ページあたりの投稿数：表示するアップセル商品の最大数を設定します。利用可能なすべてのアップセルを表示するには
-1を使用します。 - 並び順：アップセル商品を並べ替えるために使用されるフィールドを選択します — 日付、ID、メニュー順、人気順、ランダム、評価、またはタイトル。
- 順序: 並び替えの方向を設定します — ASC（昇順）またはDESC（降順）。
ステップ3：デザインをカスタマイズする
詳細タブでは、アップセルブロックの視覚的な外観をカスタマイズできます。
スタイル:
- 配置：アップセル商品グリッドの水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルごとにデバイス別の制御が可能です。
- タイトルタイポグラフィ：商品タイトルのフォントファミリー、サイズ、太さ、スタイル、行の高さ、文字間隔、文字ケースを設定します。
- 説明タイポグラフィ：商品説明テキストのタイポグラフィプロパティを設定します。
- 価格タイポグラフィ：商品価格テキストのタイポグラフィプロパティを設定します。
- 価格の色：通常価格の色を設定します。
- セールバッジの色：セール価格またはセールバッジの色を設定します。
ボタン:
- ボタンタイポグラフィ：カートに追加ボタンテキストのフォントファミリー、サイズ、太さ、スタイル、その他のタイポグラフィプロパティを設定します。
- ボタンのスタイル：カートに追加ボタンの視覚的なスタイルを選択します — フラット、2D、ヴィンテージ、ゴースト、またはリンク。
- ボタンの色：ボタンの背景色を設定します。
- ボタンのサイズ：ボタンのサイズを選択します — 小、中、大、特大、超特大。
- 角丸：スライダーを使用してボタンの角を丸めます。
画像:
- 影: 事前設定されたサイズ — なし、極細、小、中、大、特大、超特大、または下部ドロップシャドウを使用して、商品画像に影を適用します。
- 境界線のスタイル: 商品画像の境界線のスタイルを選択します — 実線、点線、または破線。
- 画像境界線の色: 商品画像の境界線の色を設定します。
- 画像境界線の幅: 商品画像の各辺の境界線の幅を設定します — 上、右、下、左。
- 画像余白のパディング: 商品画像とその境界線の間に内側のパディングを追加します。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4：変更を保存
アップセルブロックの設定と外観のカスタマイズが完了したら、作業内容を保存してください。
アップセルブロックをシングル商品テンプレートに追加しました！戦略的に配置されたアップセルのおすすめは、WooCommerceで平均注文額を増やす最も効果的な方法の1つです。カラムレイアウト、ボタンのスタイル、画像の表示方法を試して、ストアのデザインに合った商品レコメンデーションセクションを作成してください。