ElementorなしでWooCommerceチェックアウトページを編集する方法は?

WooCommerce のデフォルトのチェックアウト ページが退屈で、チェックアウト プロセスに時間がかかるため気に入らないことがありますか? さて、これはページを編集するのにちょうどいい時期かもしれません。 このようにして、顧客はすぐに注文できるようになり、コンバージョンを促進するのにも役立ちます。

しかし、WooCommerce チェックアウト ページをどのように正確にカスタマイズするのでしょうか? 結局のところ、手動​​編集、プラグインの使用、Elementor ページビルダーの 3 つの効果的な方法があります。 ただし、最適な方法は、作業しやすい方法によって異なります。

さて、これ以上苦労することなく、まずチェックアウト ページをカスタマイズする理由を確認しましょう。 その後、Elementor と Shopready の組み合わせを使用して WooCommerce チェックアウト ページを編集する方法を確認できます。

WooCommerce チェックアウト ページを編集する理由

WooCommerce のチェックアウト ページは、注文の購入プロセスに大きな違いをもたらす可能性があります。 このため、編集する理由はたくさんあります。 これらには以下が含まれます：

ユーザー エクスペリエンスの向上

デフォルトの WooCommerce でのチェックアウト プロセスは非常に時間がかかります。 したがって、ページを編集してチェックアウト プロセスを短縮することを選択できます。 このようにして、お客様はより良いショッピング体験を得ることができます。

チェックアウトを安全にする

顧客が請求情報や個人情報が安全ではないと感じた場合、購入せずに離れてしまう可能性があります。 したがって、チェックアウト ページ テンプレートを編集して、安全な支払いゲートウェイを含めることを検討する必要があります。

迅速かつ簡単な購入を可能にする

WooCommerce チェックアウト ページをカスタマイズするもう 1 つの理由は、顧客がすばやく注文できるようにすることです。 たとえば、自動入力の詳細のオプションを含めることができます。

ブランディングの向上

あなたのブランドが群を抜いて目立たないように感じますか? WooCommerce のチェックアウト ページを編集して、プロフェッショナルなルック アンド フィールにすることができます。 これを行う 1 つの方法は、そのデザインとページ テンプレートを変更することです。

WooCommerce チェックアウトページ WO Elementor を編集するには?

WooCommerce チェックアウト ページを編集するには、さまざまな方法があります。 elementor と Shopready の組み合わせを使用するか、プラグインを使用して、手動で行うことを選択できます。 選択はあなた次第です。 それでは、それぞれの方法がどのように機能するかについて説明しましょう。

方法 1: 手動編集

この方法では、コードを使用してチェックアウト ページ テンプレートを編集します。 その結果、他の編集方法を使用する場合と比較して、カスタマイズをより細かく制御できます。 以下は、その方法に関する簡単な手順です。

ステップ 1: チェックアウト フィールドをカスタマイズするためのフィルターを選択する

チェックアウト フィールドを編集するには、 e コマース ウェブサイトの functions.php ファイルを使用します。 WooCommerce は、チェックアウト フィールドをカスタマイズできるフィルターのリストを提供するため、これは簡単なはずです。 たとえば、次のようなものがあります。

• WooCommerce_shipping_fields
• WooCommerce_after_checkout_form
• WooCommerce_billing_fields
• WooCommerce_checkout_after_terms_and_conditions

ステップ 2: プレースホルダー テキストを編集する

次に、order_comments_fields のプレースホルダー テキストをカスタマイズすることから始めます。 これは、次のコード スニペットを functions.php ファイルに追加するだけで実行できます。

ステップ 3: フィールドの削除

フィールドを削除したい場合は、以下のコードを functions.php ファイルに追加するだけです。

ステップ 4: 必要なフィールドを追加する

フィールドを WooCommerce チェックアウト ページに追加するには、以下のコードを function.php ファイルに挿入するだけです。

コードを挿入すると、追加のフィールドが表示されます。 しかし、心配する必要はありません。 データの検証のために次のコードをコピーするだけです。

最終ステップ: データを保存する

最後に、次のコードを入力して、チェックアウト ページで顧客が入力したすべての詳細が保存されるようにします。

方法 2: Elementor Page Builder を使用する

チェックアウト ページを手動で編集するには、コーディングの経験が必要です。 幸いなことに、技術に精通していない場合は、最高の WordPress ページビルダーの 1 つである elementor を使用できます。 以下は、Elementor を使用して編集を行う手順です。

ステップ 1: チェックアウト ページを見つける

まず、WordPress ダッシュボードに移動し、ページ リストを見つけます。 [ページ] リストの下に、デフォルトのチェックアウト ページがあります。 [編集] ボタンをクリックするだけで、WordPress エディターが起動します。 次に、[Elementor で編集] オプションを選択して Elementor を有効にし、Elementor のエディターを起動します。

ステップ 2: Elementor チェックアウト ウィジェットを追加する

次に、Elementor でデフォルトのチェックアウト ページを開き、既存の WooCommerce チェックアウト ウィジェットまたはショートコードを削除します。 次に、Elementor エディターにチェックアウト ウィジェットを追加します。 チェックアウト ページのライブ プレビューを表示できるはずです。

ステップ 3: チェックアウト ページのコンテンツを編集する

Elementor サイドバーの [コンテンツ] タブで、[一般設定] をクリックします。 設定から、1 列または 2 列のレイアウトを選択して、コンテンツを編集およびカスタマイズすることができます。

さらに、請求と配送の詳細、追加情報、注文、クーポン、支払いの詳細を編集できます。 また、クーポンボックスを追加したい場合も可能です。

ステップ 4: チェックアウト ページのスタイルを編集する

[コンテンツ] タブのすぐ横にある [スタイル] タブをクリックして、チェックアウト ページのスタイルをさらにカスタマイズします。 カスタム チェックアウト ページのデザインがストアのデザインと一致していることを確認したいと考えています。

[スタイル] タブでは、セクション、タイポグラフィ、フォーム、注文概要、購入ボタンなど、さまざまなデザイン オプションを選択できます。 さまざまなオプションを微調整して試して、チェックアウト ページを際立たせるスタイルを見つけてください。

ステップ 5: 変更を保存する

チェックアウト ページ テンプレートのスタイルのカスタマイズが完了したら、すべての変更を保存します。 次に、最終的にページを公開する前に、変更をプレビューします。

方法 3: プラグインを使用する

WooCommerce チェックアウト ページを編集するもう 1 つの簡単で迅速な方法は、プラグインを使用することです。 現在、いくつかのプラグイン オプションから選択できます。 ただし、この記事では、Elementor と Shopready の組み合わせの使用に焦点を当てます。

ステップ 1: Elementor の Shopready アドオンをインストールする

このプラグインをインストールする前に、WordPress に Elementor ページ ビルダーがあることを確認してください。 これは、Shopready が単独では機能しないためです。 次に、WordPress ダッシュボードでプラグインをクリックし、[新規追加] を選択します。 次に、検索ボックスで Shopready を見つけて、[有効化] ボタンをクリックします。

ステップ 2: Shopready チェックアウト ページのコンテンツをカスタマイズする

WordPress ダッシュボードで、Shopready を開くことを選択します。 Shopready のダッシュボードに移動します。 ダッシュボードの下には、ページのカスタマイズに役立つウィジェット、モジュール、およびテンプレートのオプションがあります。 コンテンツを編集およびカスタマイズするオプションを選択できます。

ステップ 3: ウィジェットを有効にする

ウィジェット オプションをクリックし、[すべて有効にする] タブを選択します。 次に、[変更の保存] を選択します。 ただし、すべてのフィールドを有効にしたくない場合は、好みのオプションを選択して変更を保存します。

ステップ 4: モジュールを有効にする

次に、[モジュール] オプションを選択し、[すべて有効にする] をクリックします。 [すべて無効にする] オプションを選択するか、一部のみを選択して有効にすることもできます。 完了したら、[変更を保存] ボタンをクリックします。

ステップ 5: テンプレートを有効にする

このセクションには、ショップ、チェックアウト ページ、カート、製品詳細ページなどのオプションがあります。 好みのテンプレート オプションの [有効にする] タブをクリックしてから、[保存] をクリックします。

ステップ 6: 通貨 API を有効にする

[API] タブをクリックし、表示された空のフィールドに通貨 API キーを入力します。 次に、[変更を保存] オプションを選択してプロセスを完了します。

Shopready を使用して WooCommerce チェックアウト ページを編集する理由

ShopReady は Elementor の単なるアドオンです。 QuomodoSoft によって開発されたこのプラグインは、WooCommerceカスタム チェックアウト ページの編集に使用すると、非常に多くの利点を提供します。 これらには以下が含まれます：

幅広いウィジェット

このプラグインは、Elementor ページに簡単に追加できる 100 以上のショップ ページ ウィジェットを提供します。 したがって、必要に応じて WooCommerce チェックアウト ページをすばやくカスタマイズできます。

事前構築済みのテンプレート

WooCommerce を初めて使用する場合は、Shopready を使用してチェックアウト ページを編集することを検討してください。 これは、プラグインがカスタマイズを容易にするために事前に設計されたテンプレートを備えているためです.

顧客志向の機能

このプラグインを使用して WooCommerce ページを編集する必要があるもう 1 つの理由は、その顧客志向の機能にあります。 これらには、サンキュー ページ、クーポン ボックス オプションの追加、製品比較などがあります。

モバイルフレンドリー

このプラグインを使用すると、チェックアウト ページを編集してモバイル フレンドリーにすることができます。 その結果、顧客は使用するデバイスに関係なく、優れたショッピング体験を得ることができます。

結論

全体として、WooCommerce チェックアウト ページを編集する理由はたくさんあります。 顧客のユーザー エクスペリエンスを改善したり、ページを安全にしたり、ブランディングを改善したりしたい場合があります。 いずれの場合も、プラグイン、要素、または手動で編集することを選択できます。

もちろん、プラグインを使用するか、 elementor と Shopready を組み合わせて使用​​するのが最も簡単な方法です。 これは、Shopready が選択できる幅広いウィジェットを提供しているためです。 したがって、チェックアウト ページを編集して、必要に応じてパーソナライズすることができます。 ただし、コーディングの経験がある場合は、いつでもページを手動で編集できます。

プラグインなしで WooCommerce にウィッシュリストを追加する方法