請求の詳細を編集する方法WooCommerceチェックアウトページ

公開: 2021-02-22

請求の詳細を編集するWooCommerceチェックアウトページ WooCommerceで請求の詳細を編集する方法はいくつかあります。 このチュートリアルでは、請求の詳細を編集してフィールドを削除したり、要件を削除したりする方法を強調したいと思います。

前回の投稿では、チェックアウトページの[郵便番号]フィールドを無効にする方法、または[郵便番号]検証を削除する方法を共有しました。

請求の詳細を編集する方法WooCommerce(フィールドの削除、検証の無効化、カスタムプレースホルダーの追加、カスタムフォームラベルの追加)

今日は、請求の詳細を編集し、顧客に表示したくないフィールドを削除する方法を紹介します。

WooCommerce無料プラグインを使用して請求の詳細を編集

WooCommerceの請求の詳細を編集するために使用できる無料プラグインとプレミアムプラグインの両方が12以上あります。 請求の詳細を編集する方法woocommerce

これらのプラグインにはそれぞれ、独自の機能とインターフェイスデザインがあります。 WooCommerceで請求の詳細を編集するための最良の無料プラグインは、WooCommerceのCheckout Field Editor(Checkout Manager)です。

このプラグインを使用すると、WooCommerceチェックアウトの主要な[請求]、[配送]、および[追加]フィールドを編集できます。

編集フォームでは、名前、タイプ、ラベル、プレースホルダー、クラス、ラベルクラス、検証ルールなどのカスタムフィールドオプションを追加できます(これらのオプションの使用可能性は、フィールドタイプによって異なる場合があります)。

WooCommerceコードスニペットを使用して請求の詳細を編集する

テーマのfunctions.phpファイルにコードスニペットを追加することで、WooCommerceチェックアウトページで請求の詳細を編集することもできます。

WooCommerceのチェックアウト請求フィールドを削除する

まず、以下のコードスニペットを使用して、不要な請求フィールドを削除できます。

 

/ **
 *請求の詳細を編集して不要なフィールドを削除する 
 ** /
function njengah_remove_checkout_fields($ fields){

    //請求フィールド
    unset($ fields ['billing'] ['billing_company']);
    unset($ fields ['billing'] ['billing_email']);
    unset($ fields ['billing'] ['billing_phone']);
    unset($ fields ['billing'] ['billing_state']);
    unset($ fields ['billing'] ['billing_first_name']);
    unset($ fields ['billing'] ['billing_last_name']);
    unset($ fields ['billing'] ['billing_address_1']);
    unset($ fields ['billing'] ['billing_address_2']);
    unset($ fields ['billing'] ['billing_city']);
    unset($ fields ['billing'] ['billing_postcode']);
	
	$ fieldsを返します。
	
} 

	add_filter( 'woocommerce_checkout_fields'、 'njengah_remove_checkout_fields'); 

すべてのフィールドを削除してカスタムフィールドを追加するか、保持するフィールドの下のコードスニペットから削除することができます。

これは、プラグインを使用せずにWooCommerceチェックアウトページから請求フィールドを削除する最も速い方法です。

たとえば、請求の詳細にのみ名、姓、メールアドレスを表示したい場合は、以下のコードスニペットのようにコードを変更します。

 

function njengah_remove_checkout_fields_keep_email_name($ fields){

    //請求フィールド
    unset($ fields ['billing'] ['billing_company']);
    unset($ fields ['billing'] ['billing_phone']);
    unset($ fields ['billing'] ['billing_state']);
    unset($ fields ['billing'] ['billing_address_1']);
    unset($ fields ['billing'] ['billing_address_2']);
    unset($ fields ['billing'] ['billing_city']);
    unset($ fields ['billing'] ['billing_postcode']);
	
	$ fieldsを返します。
	
} 

	add_filter( 'woocommerce_checkout_fields'、 'njengah_remove_checkout_fields_keep_email_name'); 

WooCommerceCheckoutの請求フィールドと配送フィールドを削除します

このロジックを拡張して、請求フィールドだけでなく配送フィールドも削除することもできます。 請求フィールドと配送フィールドを削除する完全なコードは次のとおりです。

 

    関数njengah_remove_checkout_fields_billing_shipping($ fields){
   
		//請求フィールド
		unset($ fields ['billing'] ['billing_company']);
		unset($ fields ['billing'] ['billing_email']);
		unset($ fields ['billing'] ['billing_phone']);
		unset($ fields ['billing'] ['billing_state']);
		unset($ fields ['billing'] ['billing_first_name']);
		unset($ fields ['billing'] ['billing_last_name']);
		unset($ fields ['billing'] ['billing_address_1']);
		unset($ fields ['billing'] ['billing_address_2']);
		unset($ fields ['billing'] ['billing_city']);
		unset($ fields ['billing'] ['billing_postcode']);

		//配送フィールド
		unset($ fields ['shipping'] ['shipping_company']);
		unset($ fields ['shipping'] ['shipping_phone']);
		unset($ fields ['shipping'] ['shipping_state']);
		unset($ fields ['shipping'] ['shipping_first_name']);
		unset($ fields ['shipping'] ['shipping_last_name']);
		unset($ fields ['shipping'] ['shipping_address_1']);
		unset($ fields ['shipping'] ['shipping_address_2']);
		unset($ fields ['shipping'] ['shipping_city']);
		unset($ fields ['shipping'] ['shipping_postcode']);

    $ fieldsを返します。
  } 
add_filter( 'woocommerce_checkout_fields'、 'njengah_remove_checkout_fields_billing_shipping'); 

WooCommerce Checkoutの請求フィールド、配送フィールド、注文メモを削除します

同じロジックを使用して、請求セクションと配送セクションの下にある注文メモフィールドを削除することもできますが、以下の組み合わせコードスニペットのようにorder_comments削除オプションを追加します。

 

    関数njengah_remove_checkout_fields_billing_shipping_order($ fields){
   
		//請求フィールド
		unset($ fields ['billing'] ['billing_company']);
		unset($ fields ['billing'] ['billing_email']);
		unset($ fields ['billing'] ['billing_phone']);
		unset($ fields ['billing'] ['billing_state']);
		unset($ fields ['billing'] ['billing_first_name']);
		unset($ fields ['billing'] ['billing_last_name']);
		unset($ fields ['billing'] ['billing_address_1']);
		unset($ fields ['billing'] ['billing_address_2']);
		unset($ fields ['billing'] ['billing_city']);
		unset($ fields ['billing'] ['billing_postcode']);

		//配送フィールド
		unset($ fields ['shipping'] ['shipping_company']);
		unset($ fields ['shipping'] ['shipping_phone']);
		unset($ fields ['shipping'] ['shipping_state']);
		unset($ fields ['shipping'] ['shipping_first_name']);
		unset($ fields ['shipping'] ['shipping_last_name']);
		unset($ fields ['shipping'] ['shipping_address_1']);
		unset($ fields ['shipping'] ['shipping_address_2']);
		unset($ fields ['shipping'] ['shipping_city']);
		unset($ fields ['shipping'] ['shipping_postcode']);

                //フィールドを注文します
                unset($ fields ['order'] ['order_comments']);

    $ fieldsを返します。
  } 
add_filter( 'woocommerce_checkout_fields'、 'njengah_remove_checkout_fields_billing_shipping_order'); 

WooCommerce請求詳細の編集要件または検証

請求フィールドの1つが入力されていない場合、WooCommerceは最も一般的なエラーのようなエラーを生成します–請求郵便番号は有効な郵便番号/郵便番号ではありません。

これは、デフォルトでWooCommerceの請求チェックアウトフィールドに検証機能があるために発生します。

この問題を解決し、フィールドが空のままのときにこれらのエラーが表示されないようにするには、請求の詳細の検証を削除する必要があります。

以下のコードスニペットは、[請求先電話]フィールドから検証を削除します。このコードは、アクティブなテーマのfunctions.phpファイルに追加する必要があります。

 / **
	 *請求フィールドの検証を削除する例
	 ** / 
 
		add_filter( 'woocommerce_billing_fields'、 'njengah_remove_phone_field_validation');

		function njengah_remove_phone_field_validation($ fields){
		
			$ fields ['billing_phone'] ['required'] = false;
			
			$ fieldsを返します。
		}

このロジックを、名前、電子メールなどのより多くのフィールドに拡張できます。 次のコード行を、検証を削除するフィールドのフィールドIDに置き換えるだけです。

$fields['billing_phone']['required'] = false;

WooCommerce請求の詳細の編集プレースホルダーとラベル

WooCommerceの請求の詳細を編集する別の方法は、デフォルトのWooCommerceチェックアウトページのフォームラベルとプレースホルダーを変更することです。 これは、以下のコードスニペットを使用して実現できます。

 add_filter( 'woocommerce_checkout_fields'、 'njengah_edit_checkout_placeholders_labels');
  
		関数njengah_edit_checkout_placeholders_labels($ fields){
		
			 $ fields ['billing'] ['billing_company'] ['placeholder'] = 'カスタムプレースホルダー';
			 $ fields ['billing'] ['billing_company'] ['label'] = 'カスタムラベル';
		 
		 $ fieldsを返します。
		 }

結論

このチュートリアルでは、WooCommerceの請求の詳細を編集して、ニーズに合わせてWooCommerceのチェックアウトページをカスタマイズするさまざまな方法を紹介します。 これらのコードスニペットは、請求の詳細、配送の詳細、注文メモを編集するプラグインと同じように機能することを覚えておくことが重要です。

また、これらのコードスニペットをアクティブなテーマの子テーマに常に追加することもお勧めします。 子テーマがない場合は、この投稿を使用して子テーマを作成する方法を学ぶことができます–ストアフロント子テーマを作成します。

WooCommerceをカスタマイズする方法はいくつかありますが、最も一般的なのは、気に入らない機能を非表示にすることです。WooCommerceストアでほとんどの機能を非表示にする方法に関する包括的なガイドであるUltimate WooCommerce HideGuideを共有しました。 これは、WooCommerceのカスタマイズを開始するのに最適な場所です。

WooCommerceのデフォルトテーマであるストアフロントテーマを使用している場合は、80以上のストアフロントのカスタマイズのヒントから、WooCommerceストアをプロフェッショナルなルックアンドフィールにする方法を学ぶことができます。

最後に、WordPressの専門家またはWooCommerce開発者を雇う必要がある場合は、WooCommerceの問題を解決したり、サイトのエラーを修正したりすることができます。

同様の記事