woocommerce_checkout_fields -20 woocommerceチェックアウトをカスタマイズする20のコード例

プラグインなしでWooCommerceチェックアウトをカスタマイズしますか？それは可能です - あなたが数本のPHPに慣れているなら。この投稿には、 woocommerce_checkout_fieldsフィルターを使用して、20個のすぐに使用できるコードスニペットがあります。フィールドの削除、ラベルの名前の変更、新しいオプションの追加などの実際のケースをカバーしています。

コーディングに興味がない場合は、心配しないでください。フレキシブルチェックアウトフィールドプラグインを使用して同じ結果を視覚的に達成する方法も示します。

チェックアウトのカスタマイズとは何ですか？また、コンバージョンの改善にどのように役立ちますか？

チェックアウトは、訪問者が顧客になる場所です。しかし、不必要なフィールドで雑然としているか、柔軟性がない場合、摩擦を引き起こす可能性があります。チェックアウトをカスタマイズすると、放棄を減らし、購入をスピードアップし、より良い体験を作成できます。

woocommerceには、柔軟なフィルターが付属しています： woocommerce_checkout_fields 。それを使用して、請求、配送、または追加のフィールドを変更できます。フィールドの可視性、注文、コンテンツを制御したい開発者に最適です。

WOOCOMMERCE_CHECKOUT_FIELDSフィルターを使用した20のコード例

以下は20の例です。これらのスニペットを子供のテーマのfunctions.phpまたはカスタムプラグインに追加します。

1. 2番目のアドレスフィールドを削除します

// This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2。電話フィールドを隠す

// This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3.電子メールフィールドをオプションにします

// This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

4。最初の名前と姓フィールドのプレースホルダーを変更する

// This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5.「姓」を「姓」に名前を変更します

// This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6.カスタムテキストフィールドを追加します

// This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7.配達手順のためにTextareaを追加します

// This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8.カスタムCSSクラスを設定します

// This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9.電子メールフィールドの優先順位を変更します

/* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10。郵便番号フィールドを削除します

// This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11。姓の後に名を並べ替えます

// This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12.請求書リクエストのチェックボックスを追加します

// This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13.配送時間の選択を選択します

// This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14。充填前の注文コメント

// This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15.カスタム番号フィールドを追加します

// This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16.日付ピッカーを追加します

// This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17.電話の検証を無効にします

// This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18.輸送国のフィールドを最後に表示します

/* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19.配送郵便番号フィールドを削除します

// This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20。注文の詳細の後にカスタムフィールドを追加します

// This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

柔軟なチェックアウトフィールドを使用してコーディングせずにチェックアウトをカスタマイズする方法

開発者ではありませんか？問題ない。柔軟なチェックアウトフィールドプラグインを使用すると、WordPressダッシュボードから視覚的にすべてを実行できます。

• ドラッグアンドドロップを使用して、フィールドを追加、削除、再配置します
  

  

• ラベル、プレースホルダー、およびデフォルト値の編集
• 必要に応じてフィールド、オプション、または非表示に設定します
  

  

• CSSクラスまたは検証ルールを適用します
  

  

• セクションを選択してください：請求、配送、または追加情報
• テストまたはUXの目的にデフォルト値を割り当てます
• PHPを編集したり、カスタムコードを書いたりすることなくすべて

開発オーバーヘッドのない結果。

柔軟なチェックアウトフィールドPro - 高度な機能

より多くのパワーと柔軟性が必要ですか？ Proバージョンは、高度な機能を追加します。

• カートコンテンツまたはユーザーデータに基づいてフィールドを表示/隠すための条件付きロジック
• 追加のフィールドタイプのサポート：日付ピッカー、タイムピッカー、色や画像付きラジオなど
• ユーザーロールの視認性制御 - B2BおよびB2Cユーザーに異なるフィールドを表示する
• 選択した配送方法または支払い方法に基づくフィールド表示
• フィールド設定ごとの追加価格

製品ページにプラグイン機能が表示される場合があります。

概要：チェックアウトに最適な方法はどれですか？

woocommerce_checkout_fieldsを使用することは、woocommerceチェックアウトをカスタマイズする強力な方法ですが、慎重なコーディングとテストが必要です。また、コードとテーマの更新を処理する必要があります。

テーマを編集していると確信している場合は、上記の20の例は、最も一般的なシナリオを処理するのに役立つはずです。

しかし、他のすべての人にとって、WooCommerceプラグイン用の柔軟なチェックアウトフィールドは、PROバージョンでさらに多くのオプションを備えたコードのないユーザーフレンドリーな代替品を提供します。

キーポイント

• woocommerce_checkout_fieldsフィルターを使用すると、PHPでチェックアウトフォームをカスタマイズできます
• それを使用して、フィールドを追加、削除、名前変更、並べ替え、またはスタイルフィールド
• 柔軟なチェックアウトフィールドプラグインは同じことをしますが、コーディングする必要はありません
• Proバージョン条件付きロジック、追加のフィールドタイプ、およびフィールド価格設定ルールを追加
• ワークフローに適合する方法を選択します：コントロール用コード、プラグインの速度