EDD 購入ボタンブロックを使用すると、SeedProdページにEasy Digital Downloads製品のワンクリック購入ボタンを追加できます。このブロックは、顧客が従来のカートとチェックアウトの手順をスキップできるようにすることで、購入プロセスを合理化し、シングルクリックでの即時購入を可能にします。
購入ボタンは、購入プロセスから摩擦を取り除きたいデジタル製品販売に最適です。顧客にカートに商品を追加し、カートを確認してからチェックアウトに進むように要求する代わりに、すぐに購入を完了できます。この簡略化されたワークフローは、単一のデジタル製品、ソフトウェアライセンス、電子書籍、コース、または迅速で手間のかからない購入体験がコンバージョンを向上させるあらゆるデジタルダウンロードの販売に理想的です。
EDD購入ボタンブロックをページに追加する
EDD購入ボタンブロックをSeedProdページに追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > Easy Digital Downloadsの下で、購入ボタンブロックをページの目的のセクションにドラッグアンドドロップします。
EDD購入ボタンブロックはEasy Digital Downloadsの下にあり、どのページにも追加できます。
ステップ2：コンテンツ設定を構成する
追加したら、EDD購入ボタンブロックをクリックして設定を開きます。コンテンツタブで、製品を選択し、ボタンの外観をカスタマイズできます。
設定：
- 製品ID: このボタンが購入するEasy Digital Downloads製品を選択します。公開されているすべてのダウンロードのドロップダウンリストから選択します。
- 直接チェックアウトへ: クリック後に顧客を直接チェックアウトページに送信するか、最初に商品をカートに追加するように無効にするかを切り替えます。
- 価格を表示: ボタン自体に製品価格を表示または非表示にするかを切り替えます。
ボタン:
- ボタンテキスト: ボタンに表示されるテキストを入力します（例：「今すぐ購入」、「購入」、「即時アクセスを取得」）。アクション指向で明確に保ちます。
- 背景色: ブランドに合わせてボタンの背景色を設定します。
- 配置: コンテナ内のボタンの水平方向の配置（左、中央、右）を設定します。
- サイズ: 小、中、大、特大、特大（2X Large）からボタンサイズを選択します。大きいボタンは、重要な製品にとってより目立ちます。
アイコン:
- テキスト前アイコン: ボタンテキストの左側に表示されるアイコンを追加します。「アイコンを選択」をクリックして、利用可能なアイコンを検索します。
- テキスト後アイコン: ボタンテキストの右側に表示されるアイコンを追加します。通常、ショッピングカートやダウンロードインジケーターに使用されます。
製品を選択し、ボタンのテキストと外観をカスタマイズし、オプションのアイコンを追加します。
フィールド：
これらの設定は、顧客が購入したい部数を指定できる数量入力フィールドのスタイルを設定します。数量フィールドを有効にするには、まずEasy Digital Downloadsプラグイン設定でMisc > General > Cart Item Quantitiesを有効にする必要があります。また、各製品のダウンロードページでDisable quantity input for this productチェックボックスが無効になっていないことを確認してください。
- フィールドの背景色：数量入力フィールドの背景色を設定します
- フィールドの文字色：数量フィールド内のテキストの色を選択します
- フィールドの境界線の色：数量フィールドの境界線の色を設定します
- フィールドの境界線の太さ：数量フィールドの周りの境界線の太さを調整します（上、右、下、左）
- 行間：ボタンと数量フィールドの間の垂直方向の間隔を制御します
- 角丸：数量フィールドの角の丸みを調整します
- フィールドの幅：数量入力フィールドの幅を設定します
数量入力フィールドの外観をカスタマイズします（EDD設定で数量フィールドが有効になっている必要があります）。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、事前にデザインされたボタンのスタイルから選択して、購入ボタン全体の外観をすばやく変更できます。
- ピルボタン、フラットボタン、ブルーボタン、ライトグリーンボタン、グリーンボタン、オレンジボタン、レッドボタン、イエローボタン、ホワイトボタン、グレーボタン、ブラックボタン：11種類のデザインテンプレートから選択できます。それぞれユニークな色とスタイルがあります。各スタイルをプレビューして、ページのデザインに最適なものを見つけてください。
テンプレートタブには、ボタンの外観をすばやくカスタマイズするための11種類のデザイン済みスタイルが用意されています。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、EDD購入ボタンブロックの視覚的な外観をカスタマイズできます。
スタイル:
- タイポグラフィ: フォントファミリー、サイズ、太さ、スタイルを含む、ボタンテキストのフォントプロパティを制御します。
- 垂直パディング: ボタンの内側の上下の間隔を制御し、高さを調整します。
- 水平パディング: ボタンの内側の左右の間隔を制御し、幅を調整します。
- 角丸: ボタンの角の丸みを調整します。値が大きいほど角が丸くなり、ゼロにするとシャープな角になります。
- ボタンのスタイル：ボタンの視覚的な処理を選択します。オプションには、フラット（モダンなフラットデザイン）、2D（控えめな奥行き）、ビンテージ（クラシックな外観）、ゴースト（境界線付きの透明）、またはリンク（プレーンなテキストリンク）があります。
- テキストシャドウ: ボタンテキストに影の効果を追加して、奥行きと読みやすさを向上させます。なし、ヘアライン、小、中、大、特大、2倍特大、カスタムから選択します。
- シャドウ: ボタン全体に影の効果を適用して、奥行きを出します。なし、ヘアライン、小、中、大、特大、2倍特大、カスタムから選択します。
間隔：
- マージン: ボタンブロックの外側の間隔（上、右、下、左）を制御します。これにより、ボタンと周囲の要素の間のスペースが決まります。
- パディング: ボタンブロックコンテナ内の内側の間隔（上、右、下、左）を調整します。これにより、ボタン自体の周りに余白ができます。
属性:
- CSS ID: ボタンブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイルまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するために、カスタムCSSクラスを追加します。
- カスタム属性：ボタンラッパー要素に任意のHTML属性を追加します。各属性を新しい行に、属性名|値の形式で入力します（例：data-product|digital-download）。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でボタンブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでボタンブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでボタンブロックを非表示にします。
アニメーション効果:
- 表示アニメーション：ボタンがビューにスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。これにより、購入ボタンに注目を集めることができます。
高度な設定タブでは、タイポグラフィ、パディング、境界線、影、アニメーション効果などのスタイリングオプションを提供します。
ステップ4：変更を保存
EDD購入ボタンブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
EDD購入ボタンブロックをページに追加しました！この合理化された購入ボタンは、購入プロセスからの摩擦を排除し、顧客がワンクリックでデジタルダウンロードを購入できるようにします。さまざまなボタンのスタイル、色、サイズを試して、訪問者を顧客に変え、デジタル製品の売上を最大化する購入ボタンを作成してください。