WooCommerceカスタムチェックアウトフィールドでフィールドとEメールを編集/削除する方法

WooCommerce を使用する機能を提供します。カスタムフィールド特徴希望する配送先住所や電話番号など、顧客に関する追加情報を収集するのに最適です。しかし、時にはこれらのフィールドを編集または削除する必要があります。

このチュートリアルでは、請求先住所の削除、カスタムチェックアウトフィールドの追加/編集、カスタムフィールドのデータベースへの保存など、追加フィールドを編集または削除する方法を説明します。あなたのビジネスニーズに応じてWooCommerceのチェックアウトプロセスをカスタマイズすることができます。

WooCommerceチェックアウトからの追加情報の削除

次のコードは請求ページから住所フィールドを削除します。

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 書類真ん中。

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 =&gt; $field ) : ?&gt;

            get_value( $key ) ); ?&gt;
    </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 )；

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 );

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">
        <?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' =&gt; __( 'あるフィールド' ), 'wrapper_class' =&gt; '_billing_company_フィールド' ); ?&gt;
             '_cloudways_dropdown', 'label' =&gt; __( '別のフィールド' ), 'wrapper_class' =&gt; '_billing_company_field' ); ? &gt; ?フィールド' ) ); ?&gt;
        </div>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );

注文メールへの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_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のチェックアウトページにカスタムフィールドを追加、編集、保存する方法を説明します。また、メールテンプレートを編集し、カスタムフィールドの情報をメールに追加するコードも追加されています。もしコードに問題があったり、議論に参加したい場合は、記事の下にコメントを残してください。

よくある質問

Q: WooCommerceのチェックアウトフィールドはどのようにカスタマイズできますか？

1. をインストールしてアクティブにします。チェックアウトフィールドエディタ「プラグイン
2. チェックアウトフィールドエディターに移動します。
3. クリック "フィールドの追加"を選択し、フィールドタイプを選択します。
4. 既存のフィールドを編集するにはフィールド横の鉛筆アイコン.
5. フィールドを削除するにはフィールド横のゴミ箱アイコン.
6. クリック "変更の保存"ボタンをクリックしてチェックアウトページを更新してください。

Q: WooCommerceにカスタムフィールドを追加する方法を教えてください。

1. 出向く WooCommerce > チェックアウトフィールド.
2. フィールドの追加」をクリックしてカスタムフィールドを作成します。
3. オプションフィールドタイプ.
4. カスタムフィールドを表示する場所を選択します。
5. カスタムフィールドの追加と設定が完了したら、「変更を保存」をクリックします。

Q: WooCommerceのチェックアウトボタンはどのようにカスタマイズできますか？
方法1: WooCommerceの設定から修正します。

1. WooCommerce > Settings > Checkout (またはWooCommerce > Settings > Payments)にアクセスしてください。
2. チェックアウトボタンのテキスト」設定を見つけて、希望のテキストに変更してください。

方法2：CSSのカスタマイズ

出向く 外観 > カスタマイズ > 追加CSS次のコードを追加してください：

.woocommerce-checkout .button {
    background-color: #FF5733; /* 背景色を変更 */
    color: #fff; /* 文字色を変更 */
    font-size: 16px; /* フォントサイズを調整します。
}