メニューカートブロックを使用すると、WooCommerceのショッピングカートアイコンを任意のSeedProdページに追加できます。このブロックは、アイテム数バッジ付きのカートアイコンを表示し、買い物客がどのページからでもカートの中身を確認し、チェックアウトに移動しやすくします。
オプションで、アイコンの横にカート小計を表示したり、配置を制御したり、アイコンの色、バッジの色、バッジのテキストの色をストアのブランディングに合わせて完全にカスタマイズしたりできます。
メニューカートブロックをページに追加する
SeedProdページにメニューカートブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、メニューカートブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、メニューカートブロックをクリックして設定を開きます。コンテンツタブで、カートアイコンの表示方法を設定します。
- 空の場合は非表示:買い物客のカートにアイテムがない場合にカートアイコンを完全に非表示にするには、これをオンにします。
- 小計を表示:カートアイコンの横にカートの小計金額を表示するには、これをオンにします。
- 配置:カートアイコンの水平方向の配置を設定します — 左、中央、または右。
ステップ3：デザインをカスタマイズする
詳細タブでは、メニューカートブロックの外観と間隔をカスタマイズできます。
スタイル:
- タイポグラフィ:小計とカートアイコンに表示されるテキストのフォントファミリー、フォントの太さ、サイズ、行の高さ、文字間隔、テキスト変換を微調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
- 色:カートアイコンと小計テキストの色を設定します。
- バッジの色:カートアイコンに表示されるアイテム数バッジの背景色を設定します。
- バッジのテキストの色:バッジ内に表示されるアイテム数のテキストの色を設定します。
間隔：
- マージン:メニューカートブロックの周囲の外側の間隔を制御します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
- パディング:メニューカートブロックの内側の間隔を調整します（上、右、下、左）。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
属性:
- CSS ID:カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成された、メニューカートブロックの自動生成された一意の識別子を表示します。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示:デスクトップ画面でメニューカートブロックを非表示にします。
- タブレットで非表示:タブレットデバイスでメニューカートブロックを非表示にします。
- モバイルで非表示:モバイルデバイスでメニューカートブロックを非表示にします。
アニメーション効果:
- 表示アニメーション:バウンス、フェードイン、ズームイン、ローテートインなど、メニューカートブロックが表示領域にスクロールしたときに再生されるアニメーション効果を選択します。
ステップ4：変更を保存
メニューカートブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
メニューカートブロックをページに追加しました！ヘッダーまたはナビゲーションエリアにカートアイコンを配置すると、買い物客が選択した商品を把握しやすくなり、チェックアウトに誘導できます。バッジの色設定を使用してアイテム数を際立たせ、小計を表示オプションを使用して買い物客に注文合計を一目で確認させることができます。