チェックアウトブロックを使用すると、完全にカスタマイズされたWooCommerceのチェックアウトフォームを任意のSeedProdページに埋め込むことができます。フィールドの色、ラベルのタイポグラフィ、行の間隔から、ボタンのデザイン、カートのスタイル、支払いセクションの外観まで、チェックアウトレイアウトとビジュアルスタイルを完全に制御できるため、コードに触れることなくブランドに合ったチェックアウトエクスペリエンスを作成できます。
このブロックを使用して、摩擦を減らし、顧客が購入を完了することに集中できる、ブランドに合った合理化されたチェックアウトページを構築します。ページが公開されたら、WooCommerceの設定でチェックアウトページとして割り当てるだけで、顧客は自動的にそこに誘導されます。
チェックアウトブロックをページに追加する
チェックアウトブロックをSeedProdページに追加するには、次の手順に従います。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceの下で、チェックアウトブロックを目的のセクションにドラッグアンドドロップします。
ステップ2: スタイル設定を構成する
追加したら、チェックアウトブロックをクリックして設定を開きます。スタイルタブでは、設定は7つのセクションに整理されています。
レイアウト:
- レイアウト列：1列レイアウト（請求フィールドと注文概要が垂直に積み重ねられる）または2列レイアウト（請求フィールドが左、注文概要が右）を選択します。
ヘッダー:
- ヘッダーの色：チェックアウトフォーム内のセクションヘッダーのテキスト色を設定します。
- タイポグラフィ：チェックアウトヘッダーテキストのフォントファミリー、サイズ、行の高さ、文字間隔、太さ、スタイル、ケースを設定します。
フィールド：
- フィールドの背景色：チェックアウト入力フィールドの背景色を設定します。
- フィールドのテキスト色: 入力フィールド内のテキスト色を設定します。
- フィールドの境界線の色: 入力フィールドの境界線の色を設定します。
- フィールドの境界線の幅: 入力フィールドの各辺の境界線の太さを設定します。
- ラベルの色：フィールドラベルのテキスト色を設定します。
- ラベルのタイポグラフィ：フィールドラベルテキストのフォントファミリー、サイズ、行の高さ、文字間隔、太さ、スタイル、ケースを設定します。
- 行の間隔：スライダーを使用して、フォームフィールド行間の垂直間隔を調整します（デフォルト：6px）。
ボタン：
- ボタンのスタイル：チェックアウトボタンのビジュアルスタイルを選択します — フラット、2D、ビンテージ、ゴースト、またはリンク。
- ボタンの色：チェックアウトアクションボタンの背景色を設定します。
- 角丸：スライダーを使用して、チェックアウトボタンの角の丸みを調整します。
アラート:
- 情報強調色: 情報アラートメッセージに使用される色を設定します。
- エラー強調色: エラーアラートメッセージに使用される色を設定します。
- 成功強調色: 成功アラートメッセージに使用される色を設定します。
カート：
- カートの境界線の色：注文概要カートテーブルの境界線の色を設定します。
- カートの境界線の太さ：カートテーブルの各辺の境界線の太さを設定します。
- 角丸：スライダーを使用して、カートテーブルの角の丸みを調整します。
- 背景色：カートテーブルの背景色を設定します。
- 文字色：カートテーブル内の一般的なテキスト色を設定します。
- フォントファミリー: カート本文に使用されるフォントを選択します。
- ヘッダーの背景色：カートテーブルのヘッダー行の背景色を設定します。
- ヘッダーフォントファミリー: カートヘッダーテキストに使用するフォントを選択します。
- ヘッダーの色：カートテーブルのヘッダー行のテキスト色を設定します。
支払いセクション:
- 背景色: 支払い方法セクションの背景色を設定します。
- 文字色: 支払い方法セクション内の文字色を設定します。
- フォントファミリー: 支払いセクションのテキストに使用するフォントを選択します。
ステップ3：テンプレートを選択
テンプレートタブでは、デザイン済みのチェックアウトスタイルのコレクションから選択できます。各テンプレートは、フィールド、ボタン、レイアウトのスタイルを連携させて、ワンクリックでチェックアウトフォームに適用します。利用可能な入力フィールドスタイルには、ライト、境界線なし、ワイドボーダー、インナーシャドウ、グレー、ダーク、ボトムボーダー、透明などがあります。
ステップ4：デザインのカスタマイズ
高度な設定タブでは、チェックアウトブロックのレイアウトと動作をさらに調整できます。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ5：WooCommerceのチェックアウトページとして設定
ページを公開した後、WooCommerce > 設定 > 高度な設定に移動し、新しいSeedProdページを指定されたチェックアウトページとして設定します。これにより、顧客が購入を完了するために進む際に、カスタムチェックアウトページに誘導されます。
ステップ6：変更を保存
チェックアウトブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ページにチェックアウトブロックを追加しました！レイアウトオプション、デザイン済みのテンプレート、フィールドラベルやボタンのスタイルからカートテーブルヘッダーや支払いセクションのタイポグラフィまで、あらゆるビジュアルの詳細に対する詳細な制御により、シームレスでプロフェッショナルなチェックアウトエクスペリエンスを構築できます。顧客が常に適切な場所にたどり着くように、WooCommerceの設定でページをチェックアウトページとして割り当てることを忘れないでください。