WooCommerceチェックアウトページの編集とカスタマイズ方法

なぜカスタムWooCommerceチェックアウトページを作るのか？

チェックアウトプロセスをスムーズで手間のかからないものにすることは、買い物客の体験を向上させるために不可欠である。そのためのシンプルでわかりやすい方法は、買い物客が素早く注文を完了できるよう、チェックアウトのプロセスを合理化することだ。

それだけでなく、WooCommerceのチェックアウトページをカスタマイズすることは、賢いマーケティング戦略にもなります。例えば、顧客に関する詳細な情報を収集することで、顧客をよりよく知ることができ、商品を改善することができます。

また、アップセルやクロスセルの機会を利用する。つまり、顧客に他の商品や、現在の商品に関連する他の商品の購入を勧めることで、注文あたりの平均金額を上げることができる。また、関連商品を勧めたり、保険やギフト包装などの付加サービスを提供することもできる。

画像 [1] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonwave.com｜専門的なWordPress修理サービス、ワールドワイド、迅速な対応

WooCommerceのチェックアウトフィールドを編集する方法

チェックアウトページを定義する効果的な方法は、WooCommerceのチェックアウトフィールドを編集することです。これにより、買い物客に合理的なプロセスを提供し、注文を完了しやすくなります。

デフォルトでは、WooCommerceのチェックアウトページには便利なフィールドが用意されています。これらには以下が含まれます姓、名、メールアドレス、電話番号、会社名、市町村名その他

小売業が中心ならそうでもない"会社名"フィールド。また、顧客の誕生日にプレゼントや割引を提供する場合は生年月日フィールド。WooCommerceのフィールドをカスタマイズする方法は他にもあります。新しい色を適用したり、フィールドのサイズを変更したり、プレースホルダーテキストを変更したりすることができます。不要なフィールドを削除し、顧客が注文を続行する前に入力する必要がある必須フィールドを設定することで、顧客のチェックアウトをスピードアップし、失注を減らすことができます。

WooCommerceチェックアウトフィールド拡張機能の編集

WooCommerceのチェックアウトフィールドを編集する最も簡単な方法は、エクステンションを使用することです。多くのツールがあります。

チェックアウト・フィールド・エディターは、フィールドの追加、削除、編集によってチェックアウトページを最適化する高度なWooCommerce拡張機能です。

画像 [2] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、迅速な対応

コアフィールドを削除することはできませんが、移動することはできます。これにより、チェックアウトプロセスをよりコントロールできるようになります。

大規模な店舗を運営する場合、より複雑なプラグインが必要になる。WooCommerceチェックアウトアドオン.

画像 [3] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、迅速な対応

このツールを使用すると、チェックアウトの段階で無料（または有料）のアドオンを挿入することができます。例えば、顧客は注文に情報を追加することができる。また、ギフト包装サービスや保険を提供することもできる。顧客にチップを残すオプションも提供できる。

このアドオンはWooCommerceのフィールドを完全に柔軟に管理できます。条件付きアドオンの作成、固定またはパーセンテージベースのコストの追加、注文合計の動的更新が可能です。さらに、このツールはWooCommerceの定期購入と更新注文をサポートします。

WooCommerceチェックアウトページのカスタマイズ方法

WooCommerceのチェックアウトフィールドについてある程度理解したところで、チェックアウトページをカスタマイズする3つの方法を見てみましょう。

1.WooCommerceショッピングカートとチェックアウトブロックを使う

WooCommerceチェックアウトページをカスタマイズする最初の方法はWooカートとチェックアウトブロック拡張。このツールは完全に無料です。

見つけるWooCommerceブロックをクリックする。無料ダウンロード準備はできています。

画像[4] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜プロのWordPress修理サービス、グローバルリーチ、迅速な対応

その後、システムはチェックアウトプロセスを案内する（ただし、支払い手数料は無料）。

これらのブロックを使用して、チェックアウト体験をカスタマイズするさまざまな方法があります。商品のアドオンを設定したり、複数の支払い方法を受け入れたり、迅速な支払いオプションを提供したり、その他にも様々なことができます。

銘記ショッピングカートとチェックアウトブロックは、WordPress 6.9以降のサイトでのみ利用可能です。また、ショッピングカートとチェックアウトページの既存のショートコードを置き換える必要があります。

まず、ダッシュボードのページを開き、チェックアウトを開くページです。ここでは、チェックアウトショートコードを削除することができます。

画像 [5] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、迅速な対応

そして、次のように検索する。チェックアウトブロックをクリックしてページに追加します。これでブロックベースのカートのプレビューが表示され、サイドバーの設定を使ってカスタマイズすることができます。

画像 [6] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、迅速な対応

チェックアウトページをカスタマイズできるようになりました。チェックアウトステップ番号の表示/非表示、特定のフィールドの表示/非表示、ブロック設定を使って電話番号欄が必須に.

画像[7] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、迅速な対応

さらに、有料アドオンを設定することで、買い物客が注文にクーポンやメモを適用したり、複数の配送オプションを有効にしたりすることができる。

2.WooCommerceエクステンションでチェックアウトページをカスタマイズする

WooCommerce Blocksはチェックアウトページをカスタマイズする簡単な方法を提供します。いくつかのオプションを見てみましょう。

製品を推薦する

平均注文数を増やす最良の方法の一つは、チェックアウトページで商品を勧めることです。製品推薦エクステンションを使えば、これはとても簡単だ。

画像[8] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、速いレスポンス

クロスセリングは、「よく一緒に購入する」「こんな商品もおすすめ」といった人目を引く見出しで行うことができる。

画像[9] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、迅速な対応

あるいは注文額を増やすために商品をアップセルする.ショップのいたるところに、以下のようなおすすめ商品を表示することができます。単品ページおよび注文確認ページ。

複数の配送先住所を有効にする

WooCommerceのチェックアウトページをカスタマイズするもう一つの方法は、複数の配送先住所を有効にすることです。時々、顧客は異なる住所（例えば、自宅と会社の住所）に出荷する必要がある複数の製品を注文します。

さらに、ギフトを購入して友人や家族に直接送りたいという顧客もいる。このオプションがなければ、顧客は配送先ごとに別々の注文をしなければならず、非常に時間がかかることになる。

を使用することができます。「複数住所への発送エクステンションはこの機能を提供する。

画像[10] - WooCommerceのチェックアウトページを編集・カスタマイズする方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、速いレスポンス

顧客は、任意の数の製品を任意の数の住所に送信するように要求することができます。さらに、これらの配送先をすべてアカウントに保存することができます。この拡張機能を購入したら、WordPressウェブサイトにインストールして、複数の配送方法を有効にしてください。

顧客に配達日を選ばせる

ショップが競争力を得るための素晴らしい方法は、顧客が注文を受け取る納期を選べるようにすることだ。これは、あなたが余分なマイルを行くことをいとわないので、全体的な顧客満足度を高めることができます。

使うWooCommerceの注文配送すべての注文を指定された時間枠内で処理できるように、1日の注文数を制限する拡張機能。

画像[11] - WooCommerceのチェックアウトページを編集・カスタマイズする方法 - Photonflux.com｜専門的なWordPress修理サービス、グローバルなリーチ、速いレスポンス

銀行休業日、配送方法、その他の要因に基づく配送日オプションのリストを顧客に提供することができる。

WooCommerceでこのエクステンションを購入してインストールすると、チェックアウトフォームに配送日セレクタを表示することができます。ここで、期間を決定し、配達範囲を定義し、顧客が特定の日時を選択した場合に追加料金を請求することができます。

画像[12] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜プロのWordPress修理サービス、グローバルリーチ、迅速な対応

3.チェックアウトページの手動カスタマイズ

チェックアウトページを手動で変更することも可能です。コードの動作に慣れている場合は、この方法が最適です。

サイトファイルを直接編集する場合は、子テーマを作成するのがベストです。そうしないと、テーマを切り替えたときや、現在の親テーマを更新したときに、せっかくの変更が失われてしまいます。 データのバックアップを忘れずに!

画像[13] - WooCommerceチェックアウトページの編集とカスタマイズ方法 - Photonflux.com｜プロのWordPress修理サービス、グローバルリーチ、迅速な対応

このプラグインは自動的にライブバックアップを作成し、Jetpack Cloudに安全に保存されます。さらに良いことに、VaultPress BackupはWordPressとWooCommerceサイトのために設計されており、ファイル、データベース、顧客データをバックアップすることができます。

CSSでWooCommerceチェックアウトページのビジュアルデザインを編集する

WooCommerceのフィールドを手動で編集するには、まずブラウザのInspectツールを使用して、カスタマイズする特定のエリアを決定します。次に、変更をテーマに適用します。

以下は、編集可能なチェックアウトページデザインの主なタグ（クラスとIDの両方）のリストです：

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout" action="">
<div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order">
<table class="woocommerce-checkout-review-order-table">
<div id="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order"><input type="hidden" name="trp-form-language" value="ja"/>

入力ボックスの背景色を変更したいとします。この場合、次のコード・スニペットを使うことができる：

.woocommerce-checkout input[type="text"] { 以下のようになります。
     background-color: #222；
}

チェックアウトページからフィールドを削除したい場合、例えば以下のようになります。"お札"いくらか"会社名"フィールドに追加する必要がある。この場合、以下のコード・スニペットをfunctions.php書類真ん中。

function wc_remove_checkout_fields( $fields ) {
    unset( $fields['billing']['billing_company'] ); }.
    return $fields.
}

add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' )；

準備ができたら、忘れずに変更を保存してください。

概要

WooCommerceはビルトインのチェックアウトページを提供していますが、売上を伸ばしたり、便利なチェックアウトオプションを設定するためにページを拡張する方法はまだたくさんあります。例えば、複数の配送先を有効にしたり、特定のフィールドを必須にしたり、ギフトラッピングを提供したりすることが可能です。WooCommerceチェックアウトのページを編集、カスタマイズするには3つの方法があります。WooCommerceショッピングカートとチェックアウトブロックの場合は、WooCommerceエクステンションを使用して、コードを使用して手動でチェックアウトページをカスタマイズします。

お問い合わせ
記事が読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み