もしあなたが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つの方法でチェックアウトページのフィールドを変更・管理できますが、デフォルトのチェックアウトページのスタイルがサイトのカスタマイズ要件を満たさない場合もあります。その場合は、プラグインを使用してチェックアウトページを再デザインすることもできます。
ここでは有名なものをおすすめします。CartFlowsプラグイン。
WordPress 管理画面から CartFlows をインストールした後、プラグイン設定に入ります。このプラグインはビルダーと連携して使用できるため、自分でページをデザインするのも非常に簡単です。
初心者にとっては、プラグインに付属の Flow Templates から1つ選んで修正して使用するのが便利です。
まず、Checkout Pageを作成またはインポートし、ページデザインを行い、保存します。
次に、プラグイン設定で、Global Checkoutを先ほど作成したチェックアウトページに設定します。
最後に、フロントエンドでユーザーがチェックアウトする際、チェックアウトページは自分でデザインしたページになります。
以上が Naiba が共有する WooCommerce チェックアウトページのカスタマイズ方法です。お役に立てれば幸いです。