カートブロックを使用すると、WooCommerceのショッピングカートをSeedProdの任意のページにシームレスに統合できます。顧客が追加したアイテムを表示し、リアルタイムのカート更新を提供し、フィールドの色やボタンのデザインからタイポグラフィや境界線の設定まで、カートの視覚スタイルを完全に制御できます。
このブロックを使用して、コードに触れることなく、ブランドに合わせた完全にカスタムなWooCommerceカートページを構築できます。ページが公開されたら、WooCommerceの設定でカートページとして指定するだけで、顧客は自動的にそこに誘導されます。
カートブロックをページに追加する
SeedProdページにカートブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceの下で、目的のセクションにカートブロックをドラッグアンドドロップします。
ステップ2: スタイル設定を構成する
追加したら、カートブロックをクリックして設定を開きます。スタイルタブでは、設定は5つのセクションに整理されています。
ヘッダー:
- ヘッダーの色: カート内のセクションヘッダーのテキスト色を設定します。
ボタン：
- ボタンのスタイル: カートボタンの視覚スタイルを選択します — フラット、2D、ビンテージ、ゴースト、またはリンク。
- ボタンの色: カートのアクションボタンの背景色を設定します。
- 角丸: スライダーを使用して、カートボタンの角の丸みを調整します。
フィールド：
- フィールドの背景色: カート内の入力フィールド（クーポンコードや数量フィールドなど）の背景色を設定します。
- フィールドのテキスト色: 入力フィールド内のテキスト色を設定します。
- フィールドの境界線の色: 入力フィールドの境界線の色を設定します。
- フィールドの境界線の幅: 入力フィールドの各辺の境界線の太さを設定します。
アラート:
- 情報強調色: 情報アラートメッセージに使用される色を設定します。
- エラー強調色: エラーアラートメッセージに使用される色を設定します。
- 成功強調色: 成功アラートメッセージに使用される色を設定します。
カート：
- カートの境界線の色: カートコンテナの境界線の色を設定します。
- カートの境界線の幅: カートコンテナの各辺の境界線の太さを設定します。
- 角丸: スライダーを使用して、カートコンテナの角の丸みを調整します。
- 背景色: カートコンテナの背景色を設定します。
- テキストの色: カート内の一般的なテキスト色を設定します。
- フォントファミリー: カート本文に使用されるフォントを選択します。
- ヘッダーの背景色: カートヘッダー行の背景色を設定します。
- ヘッダーフォントファミリー: カートヘッダーテキストに使用するフォントを選択します。
- ヘッダーカラー: カートヘッダー行のテキストカラーを設定します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、カートブロックのレイアウトと動作をさらにカスタマイズできます。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4: WooCommerceカートページとして設定する
ページを公開した後、WooCommerce > 設定 > 高度な設定に移動し、新しいSeedProdページを目的のカートページとして設定します。これにより、顧客がカートアイコンをクリックしたとき、または商品ページから進んだときに、カスタムカートページに誘導されます。
ステップ5：変更を保存
カートブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
これで、ページにカートブロックが正常に追加されました！ボタンのスタイル、フィールドの色、タイポグラフィ、カートコンテナのスタイリングを完全に制御できるため、ブランドに完全にネイティブな感覚のWooCommerceカートエクスペリエンスを作成できます。顧客が常に正しい場所にたどり着くように、WooCommerceの設定でページをカートページとして割り当てることを忘れないでください。