WooCommerce を使用する機能を提供します。カスタムフィールド特徴希望する配送先住所や電話番号など、顧客に関する追加情報を収集するのに最適です。しかし、時にはこれらのフィールドを編集または削除する必要があります。
このチュートリアルでは、請求先住所の削除、カスタムチェックアウトフィールドの追加/編集、カスタムフィールドのデータベースへの保存など、追加フィールドを編集または削除する方法を説明します。あなたのビジネスニーズに応じてWooCommerceのチェックアウトプロセスをカスタマイズすることができます。
![图片[1]-如何添加、编辑和自定义 WooCommerce 结账字段的完整指南](https://www.361sale.com/wp-content/uploads/2025/01/20250102095148277-image.png)
WooCommerceチェックアウトからの追加情報の削除
![图片[2]-如何添加、编辑和自定义 WooCommerce 结账字段的完整指南](https://www.361sale.com/wp-content/uploads/2025/01/20250102093229953-image.png)
次のコードは請求ページから住所フィールドを削除します。
function woocommerce_remove_additional_information_checkout($fields){unset( $fields["billing_first_name"] );;unset( $fields["billing_last_name"] );return $fields.}add_filter( 'woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' );function woocommerce_remove_additional_information_checkout($fields){ unset( $fields["billing_first_name"] );; unset( $fields["billing_last_name"] ); return $fields. } add_filter( 'woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' );function woocommerce_remove_additional_information_checkout($fields){ unset( $fields["billing_first_name"] );; unset( $fields["billing_last_name"] ); return $fields. } add_filter( 'woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' );
WordPressサイトに次のコードスニペットを追加します。の「Themes」フォルダにあります。 functions.php
書類真ん中。
![图片[3]-如何添加、编辑和自定义 WooCommerce 结账字段的完整指南](https://www.361sale.com/wp-content/uploads/2025/01/20250102093650670-image.png)
WooCommerceカスタムチェックアウトフィールドの追加
以下のコードは、チェックアウトページにフィールドを追加し、注文メタデータにデータを保存し、注文管理ページにその注文メタデータを表示します。以前、複数のフィールドを追加する方法についていくつか問い合わせがありました。これに対応するため、コードスニペットは2つのフィールドを追加するように修正されています。
function cloudways_custom_checkout_fields($fields){$fields['cloudways_extra_fields'] = array('cloudways_text_field' => array('type' => 'text'、'required' => true, 'label' => __(('cloudways_extra_fields')) => array('label' => __( '入力テキストフィールド' )),'cloudways_dropdown' => array('type' => 'select', 'options' => array('options' => array( 'first' => __( '第1の選択肢' ), 'second' => __( '第2の選択肢' ), 'third' => __( '第3の選択肢' ), 'required' => true, __( '入力テキストフィールド' ), 'cloudways_dropdown' => array( 'type' => 'select', 'options' => array('label' => __( 'ドロップダウンフィールド' ))).return $fields.}add_filter( 'woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' );関数 cloudways_extra_checkout_fields(){$checkout = WC()->checkout(); ?><div class="extra-fields"><h3><?php _e( 'Additional Fields' ); ?></h3>checkout_fields['cloudways_extra_fields'] as $key => $field ) : ?>get_value( $key ) ); ?></div><?php }add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );function cloudways_custom_checkout_fields($fields){ $fields['cloudways_extra_fields'] = array( 'cloudways_text_field' => array( 'type' => 'text'、 'required' => true, 'label' => __(('cloudways_extra_fields')) => array( 'label' => __( '入力テキストフィールド' ) ), 'cloudways_dropdown' => array( 'type' => 'select', 'options' => array( 'options' => array( 'first' => __( '第1の選択肢' ), 'second' => __( '第2の選択肢' ), 'third' => __( '第3の選択肢' ), 'required' => true, __( '入力テキストフィールド' ), 'cloudways_dropdown' => array( 'type' => 'select', 'options' => array( 'label' => __( 'ドロップダウンフィールド' ) ) ). return $fields. } add_filter( 'woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' ); 関数 cloudways_extra_checkout_fields(){ $checkout = WC()->checkout(); ?> <div class="extra-fields"> <h3><?php _e( 'Additional Fields' ); ?></h3> checkout_fields['cloudways_extra_fields'] as $key => $field ) : ?> get_value( $key ) ); ?> </div> <?php } add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );function cloudways_custom_checkout_fields($fields){ $fields['cloudways_extra_fields'] = array( 'cloudways_text_field' => array( 'type' => 'text'、 'required' => true, 'label' => __(('cloudways_extra_fields')) => array( 'label' => __( '入力テキストフィールド' ) ), 'cloudways_dropdown' => array( 'type' => 'select', 'options' => array( 'options' => array( 'first' => __( '第1の選択肢' ), 'second' => __( '第2の選択肢' ), 'third' => __( '第3の選択肢' ), 'required' => true, __( '入力テキストフィールド' ), 'cloudways_dropdown' => array( 'type' => 'select', 'options' => array( 'label' => __( 'ドロップダウンフィールド' ) ) ). return $fields. } add_filter( 'woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' ); 関数 cloudways_extra_checkout_fields(){ $checkout = WC()->checkout(); ?> <div class="extra-fields"> <h3><?php _e( 'Additional Fields' ); ?></h3> checkout_fields['cloudways_extra_fields'] as $key => $field ) : ?> get_value( $key ) ); ?> </div> <?php } add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );
WooCommerceカスタムチェックアウトフィールドのデータ保存
function cloudways_save_extra_checkout_fields( $order_id, $posted ){ // 別のフィールドタイプを使用する場合は、適切なサニタイズ処理を忘れないでください。// 別のフィールドタイプを使用している場合は、適切なサニタイズ処理を忘れないでください。if( isset( $posted['cloudways_text_field'] ) ) { // 別のフィールドタイプを使用している場合、適切なサニタイズ処理を忘れてはいけません。update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) );;}if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array( 'first', 'second', 'third' ) ) { .update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown' ] );}}add_action( 'woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 );function cloudways_save_extra_checkout_fields( $order_id, $posted ){ // 別のフィールドタイプを使用する場合は、適切なサニタイズ処理を忘れないでください。 // 別のフィールドタイプを使用している場合は、適切なサニタイズ処理を忘れないでください。 if( isset( $posted['cloudways_text_field'] ) ) { // 別のフィールドタイプを使用している場合、適切なサニタイズ処理を忘れてはいけません。 update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) );; } if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array( 'first', 'second', 'third' ) ) { . update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown' ] ); } } add_action( 'woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 );function cloudways_save_extra_checkout_fields( $order_id, $posted ){ // 別のフィールドタイプを使用する場合は、適切なサニタイズ処理を忘れないでください。 // 別のフィールドタイプを使用している場合は、適切なサニタイズ処理を忘れないでください。 if( isset( $posted['cloudways_text_field'] ) ) { // 別のフィールドタイプを使用している場合、適切なサニタイズ処理を忘れてはいけません。 update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) );; } if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array( 'first', 'second', 'third' ) ) { . update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown' ] ); } } add_action( 'woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 );
WooCommerceカスタムチェックアウトフィールドからのデータ表示
function cloudways_display_order_data( $order_id ){ ?><h2><?php _e( 'Extra Information' ); ?></h2><table class="shop_table shop_table_responsive additional_info"><tbody><tr><th><?php _e( 'Input Text Field:' ); ?></th><td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td></tr><tr><th><?php _e( 'Drop Down Field:' ); ?></th><td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td></tr></tbody></table><?php }add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 );add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );function cloudways_display_order_data( $order_id ){ ?> <h2><?php _e( 'Extra Information' ); ?></h2> <table class="shop_table shop_table_responsive additional_info"> <tbody> <tr> <th><?php _e( 'Input Text Field:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td> </tr> <tr> <th><?php _e( 'Drop Down Field:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td> </tr> </tbody> </table> <?php } add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 ); add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );function cloudways_display_order_data( $order_id ){ ?> <h2><?php _e( 'Extra Information' ); ?></h2> <table class="shop_table shop_table_responsive additional_info"> <tbody> <tr> <th><?php _e( 'Input Text Field:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td> </tr> <tr> <th><?php _e( 'Drop Down Field:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td> </tr> </tbody> </table> <?php } add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 ); add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );
![图片[4]-如何添加、编辑和自定义 WooCommerce 结账字段的完整指南](https://www.361sale.com/wp-content/uploads/2025/01/20250102094147341-image.png)
WooCommerce管理者カスタム注文フィールドの表示
このコード・スニペットは、配送先および請求先住所データとして使用され、ユーザーが小さな鉛筆アイコン入力ボックスが表示されます。
function cloudways_display_order_data_in_admin( $order ){ ?><div class="order_data_column"><h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4><div class="address"><?phpecho '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>';echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?></div><div class="edit_address">'_cloudways_text_field', 'label' => __( 'あるフィールド' ), 'wrapper_class' => '_billing_company_フィールド' ); ?>'_cloudways_dropdown', 'label' => __( '別のフィールド' ), 'wrapper_class' => '_billing_company_field' ); ? > ?フィールド' ) ); ?></div></div><?php }add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );function cloudways_display_order_data_in_admin( $order ){ ?> <div class="order_data_column"> <h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4> <div class="address"> <?php echo '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>'; echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?> </div> <div class="edit_address"> '_cloudways_text_field', 'label' => __( 'あるフィールド' ), 'wrapper_class' => '_billing_company_フィールド' ); ?> '_cloudways_dropdown', 'label' => __( '別のフィールド' ), 'wrapper_class' => '_billing_company_field' ); ? > ?フィールド' ) ); ?> </div> </div> <?php } add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );function cloudways_display_order_data_in_admin( $order ){ ?> <div class="order_data_column"> <h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4> <div class="address"> <?php echo '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>'; echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?> </div> <div class="edit_address"> '_cloudways_text_field', 'label' => __( 'あるフィールド' ), 'wrapper_class' => '_billing_company_フィールド' ); ?> '_cloudways_dropdown', 'label' => __( '別のフィールド' ), 'wrapper_class' => '_billing_company_field' ); ? > ?フィールド' ) ); ?> </div> </div> <?php } add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );
![图片[5]-如何添加、编辑和自定义 WooCommerce 结账字段的完整指南](https://www.361sale.com/wp-content/uploads/2025/01/20250102094406328-image.png)
注文メールへのWooCommerceカスタムフィールドの追加
function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) { 以下のようにします。$fields['instagram'] = array('label' => __( 'Some field' )、'value' => get_post_meta( $order->id, '_cloudways_text_field', true )、);$fields['licence'] = array('label' => __( 'another field' ), ); $fields['licence'] = array('value' => get_post_meta( $order->id, '_cloudways_dropdown', true ), .);return $fields.}add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 );function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) { 以下のようにします。 $fields['instagram'] = array( 'label' => __( 'Some field' )、 'value' => get_post_meta( $order->id, '_cloudways_text_field', true )、 ); $fields['licence'] = array( 'label' => __( 'another field' ), ); $fields['licence'] = array( 'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ), . ); return $fields. } add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 );function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) { 以下のようにします。 $fields['instagram'] = array( 'label' => __( 'Some field' )、 'value' => get_post_meta( $order->id, '_cloudways_text_field', true )、 ); $fields['licence'] = array( 'label' => __( 'another field' ), ); $fields['licence'] = array( 'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ), . ); return $fields. } add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 );
メール出力をカスタマイズしたい場合は、メールテンプレートで利用可能なフックのいずれかにテキストを追加することができます。
function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) { { $cloudways_text_field = get_post_meta( $order>id '_cloudways_text_field' true )$cloudways_text_field = get_post_meta( $order->id, '_cloudways_text_field', true );$cloudways_dropdown = get_post_meta( $order->id, '_cloudways_dropdown', true );もし( $plain_text ){ { 'あるフィールドの値が無効です。echo 'あるフィールドの値は ' . $cloudways_text_field . ' である一方、別のフィールドの値は ' . $cloudways_dropdown;} else {echo '<p>の値は <strong>入力テキストフィールド</strong> は' . $cloudways_text_field.'です。 <strong>ドロップダウン</strong> は ' . $cloudways_dropdown . '</p>';}}add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 );function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) { { $cloudways_text_field = get_post_meta( $order>id '_cloudways_text_field' true ) $cloudways_text_field = get_post_meta( $order->id, '_cloudways_text_field', true ); $cloudways_dropdown = get_post_meta( $order->id, '_cloudways_dropdown', true ); もし( $plain_text ){ { 'あるフィールドの値が無効です。 echo 'あるフィールドの値は ' . $cloudways_text_field . ' である一方、別のフィールドの値は ' . $cloudways_dropdown; } else { echo '<p>の値は <strong>入力テキストフィールド</strong> は' . $cloudways_text_field.'です。 <strong>ドロップダウン</strong> は ' . $cloudways_dropdown . '</p>'; } } add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 );function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) { { $cloudways_text_field = get_post_meta( $order>id '_cloudways_text_field' true ) $cloudways_text_field = get_post_meta( $order->id, '_cloudways_text_field', true ); $cloudways_dropdown = get_post_meta( $order->id, '_cloudways_dropdown', true ); もし( $plain_text ){ { 'あるフィールドの値が無効です。 echo 'あるフィールドの値は ' . $cloudways_text_field . ' である一方、別のフィールドの値は ' . $cloudways_dropdown; } else { echo '<p>の値は <strong>入力テキストフィールド</strong> は' . $cloudways_text_field.'です。 <strong>ドロップダウン</strong> は ' . $cloudways_dropdown . '</p>'; } } add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 );
概要
このチュートリアルでは、WooCommerceのチェックアウトページにカスタムフィールドを追加、編集、保存する方法を説明します。また、メールテンプレートを編集し、カスタムフィールドの情報をメールに追加するコードも追加されています。もしコードに問題があったり、議論に参加したい場合は、記事の下にコメントを残してください。
![图片[6]-如何添加、编辑和自定义 WooCommerce 结账字段的完整指南](https://www.361sale.com/wp-content/uploads/2024/12/20241231120706737-image.png)
よくある質問
Q: WooCommerceのチェックアウトフィールドはどのようにカスタマイズできますか?
- をインストールしてアクティブにします。チェックアウトフィールドエディタ「プラグイン
- チェックアウトフィールドエディターに移動します。
- クリック "フィールドの追加"を選択し、フィールドタイプを選択します。
- 既存のフィールドを編集するにはフィールド横の鉛筆アイコン.
- フィールドを削除するにはフィールド横のゴミ箱アイコン.
- クリック "変更の保存"ボタンをクリックしてチェックアウトページを更新してください。
Q: WooCommerceにカスタムフィールドを追加する方法を教えてください。
- 出向く WooCommerce > チェックアウトフィールド.
- フィールドの追加」をクリックしてカスタムフィールドを作成します。
- オプションフィールドタイプ.
- カスタムフィールドを表示する場所を選択します。
- カスタムフィールドの追加と設定が完了したら、「変更を保存」をクリックします。
Q: WooCommerceのチェックアウトボタンはどのようにカスタマイズできますか?
方法1: WooCommerceの設定から修正します。
- WooCommerce > Settings > Checkout (またはWooCommerce > Settings > Payments)にアクセスしてください。
- チェックアウトボタンのテキスト」設定を見つけて、希望のテキストに変更してください。
方法2:CSSのカスタマイズ
出向く 外観 > カスタマイズ > 追加CSS次のコードを追加してください:
.woocommerce-checkout .button {background-color: #FF5733; /* 背景色を変更 */color: #fff; /* 文字色を変更 */font-size: 16px; /* フォントサイズを調整します。}.woocommerce-checkout .button { background-color: #FF5733; /* 背景色を変更 */ color: #fff; /* 文字色を変更 */ font-size: 16px; /* フォントサイズを調整します。 }.woocommerce-checkout .button { background-color: #FF5733; /* 背景色を変更 */ color: #fff; /* 文字色を変更 */ font-size: 16px; /* フォントサイズを調整します。 }
お問い合わせ |
---|
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
① 電話:020-2206-9892 |
② QQ咨询:1025174874 |
三 Eメール:info@361sale.com |
④ 勤務時間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttps://www.361sale.com/ja/32363
この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。
コメントなし