WooCommerceチェックアウトページ（Checkout Page）の内容を変更する方法

もしあなたがWooCommerceを使ってEコマースサイトを構築した場合、デフォルトではチェックアウト時にページがユーザーに名前、都市、地域、メールアドレス、会社などの煩雑な内容の入力を要求します。一部のEコマースサイトでは、顧客にこれほど多くの内容を入力させる必要がないかもしれませんし、逆にこれだけの内容では足りず、自分で新しいオプションを追加して顧客に入力させたい場合もあるでしょう。または、チェックアウトページに表示内容を追加したい場合もあるでしょう。では、どうすればよいでしょうか？順を追って説明します。

チェックアウトページの会社住所情報を簡素化する

もし単にチェックアウトページの会社と都市の住所情報を簡素化したいだけなら、以下のコードを使用して直接解決できます。テーマの関数ファイルに追加するだけです。コードの管理には、Code Snippetsこのプラグインを使用することをお勧めします。

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
//unset($fields['order']['order_comments']);
unset( $fields['billing']['billing_country'] );
//unset( $fields['billing']['billing_first_name'] );
//unset( $fields['billing']['billing_last_name'] );
unset( $fields['billing']['billing_company'] );
unset( $fields['billing']['billing_address_1'] );
unset( $fields['billing']['billing_address_2'] );
unset( $fields['billing']['billing_city'] );
unset( $fields['billing']['billing_state'] );
unset( $fields['billing']['billing_postcode'] );
//unset($fields['billing']['billing_email']);
unset( $fields['billing']['billing_phone'] );
return $fields;
}

追加後、サイトのフロントエンドのチェックアウトインターフェースはこのようになります。

プラグインを使用してフィールドを管理する

もしこの簡素化コードがあなたのニーズを満たさず、チェックアウトページにいくつかの特殊なフィールドを追加したい場合は、どうすればよいでしょうか？プラグインを利用して対応できます。WooCommerceのチェックアウトページをカスタマイズするプラグインは多くありますが、ここではユーザー数が多いCheckout Field Editor (Checkout Manager) for WooCommerceこのプラグインをお勧めします。このプラグインを使用すると、フィールドの追加、削除、有効化、無効化を簡単に行うことができます。もしコードで解決したい場合は、公式ドキュメント

チェックアウトページを再設計する

を参照してください。上記の2つの方法で、Checkout Page内のフィールドを変更および管理することができます。しかし、デフォルトのチェックアウトページのスタイルがあなたのサイトのカスタマイズニーズを満たさない可能性もあるため、プラグインを使用してチェックアウトページを再設計することもできます。ここでは比較的有名なCartFlowsプラグイン。WordPress管理画面からCartFlowsをインストールした後、プラグイン設定に進みます。このプラグインはビルダーと連携して使用できるため、自分でページをデザインすることも非常に簡単です。初心者にとっては、プラグインに付属のFlow Templatesから1つ選んで修正して使用するのが便利です。まず、Checkout Pageを作成またはインポートし、ページデザインを行い、保存します。次に、プラグイン設定で、Global Checkoutを先ほど作成したチェックアウトページに設定します。最後に、フロントエンドのユーザーがチェックアウトを行う際、チェックアウトページが自分でデザインしたこのページに変わります。以上がNaibaが共有するWooCommerceチェックアウトページをカスタマイズする方法です。お役に立てれば幸いです。