이메일 WooCommerce에 사용자 정의 체크아웃 필드를 추가하는 방법

게시 됨: 2020-12-17

이메일 WooCommerce에 사용자 정의 체크아웃 필드 추가 WooCommerce 스토어의 이메일에 사용자 정의 체크아웃 필드를 추가하시겠습니까?

WooCommerce는 사용자 정의에 유연한 WordPress용 강력한 전자 상거래 플러그인입니다.

이 게시물에서는 청구서 수신 주소 제거, 사용자 정의 체크아웃 필드 추가/편집, 이러한 사용자 정의 필드를 데이터베이스에 저장과 같은 추가 필드를 동적으로 사용자 정의하는 방법을 볼 수 있습니다. 또한 이메일을 주문하기 위해 이러한 사용자 정의 필드를 추가하는 방법을 보여 드리겠습니다.

사용자 정의 체크아웃 필드에서 추가 정보 제거

첫 번째 단계는 테마의 function.php 파일에 사용자 정의 PHP 코드 스니펫을 추가하여 청구 화면에서 주소 필드를 제거하는 것입니다.

 기능 woocommerce_remove_additional_information_checkout($fields){

    unset( $fields["billing_first_name"] );

    unset( $fields["billing_last_name"] );

    $ 필드 반환;

}

add_filter( 'woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' );

결과는 다음과 같습니다. 청구 화면에서 주소 필드 제거

다음 코드 스니펫은 체크아웃 페이지에 사용자 정의 필드를 추가하고 데이터를 주문 메타에 저장하고 주문 관리에 주문 메타를 표시합니다. 여러 필드를 추가하는 과정에 대한 몇 가지 질문을 받았습니다. 문제를 해결하는 데 도움이 되도록 두 개의 필드를 추가하는 코드 스니펫을 추가합니다.

이메일 WooCommerce에 사용자 정의 체크아웃 필드 추가

코드 조각은 테마의 functions.php 파일에 추가되어야 합니다. 업그레이드 중에 변경 사항이 손실되지 않도록 하위 테마를 사용하는 것이 좋습니다.

1. WooCommerce 사용자 정의 결제 필드 추가

functions.php 파일에 다음 코드를 추가하여 맞춤형 WooCommerce 체크아웃 필드를 추가하세요.

 기능 njengah_custom_checkout_fields($fields){

$fields['njengah_extra_fields'] = 배열(

'njengah_text_field' => 배열(

'유형' => '텍스트',

'필수' => 참,

'label' => __( '입력 텍스트 필드' )

),

'njengah_dropdown' => 배열(

'유형' => '선택',

'옵션' => array( '첫 번째' => __( '첫 번째 옵션' ), '두 번째' => __( '두 번째 옵션' ), '세 ​​번째' => __( '세 번째 옵션' ) ),

'필수' => 참,

'label' => __( '드롭다운 필드' )

)

);

$ 필드 반환;

}

add_filter( 'woocommerce_checkout_fields', 'njengah_custom_checkout_fields' );

기능 njengah_extra_checkout_fields(){

$checkout = WC()->checkout(); ?>

<div class="extra-fields">

<h3><?php _e( '추가 필드' ); ?></h3>

<?php

foreach ( $checkout->checkout_fields['njengah_extra_fields'] as $key => $field ) : ?>

<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

<?php endforeach; ?>

</div>

<?php }

add_action( 'woocommerce_checkout_after_customer_details' ,'njengah_extra_checkout_fields' );

결과는 다음과 같습니다. 추가 필드 섹션

2. 커스텀 체크아웃 WooCommerce 필드의 데이터 저장

functions.php 파일에 다음 코드를 추가하여 커스텀 체크아웃 WooCommerce 필드의 데이터를 저장합니다.

 함수 njengah_save_extra_checkout_fields( $order_id, $posted ){

// 다른 필드 유형을 사용하는 경우 적절한 살균을 잊지 마십시오.

if( isset( $posted['njengah_text_field'] ) ) {

update_post_meta( $order_id, '_njengah_text_field', Sanitary_text_field( $posted['njengah_text_field'] ) );

}

if( isset( $posted['njengah_dropdown'] ) && in_array( $posted['njengah_dropdown'], array( '첫 번째', '두 번째', '세 번째' ) ) ) {

update_post_meta( $order_id, '_njengah_dropdown', $posted['njengah_dropdown'] );

}

}

add_action( 'woocommerce_checkout_update_order_meta', 'njengah_save_extra_checkout_fields', 10, 2 );

3. WooCommerce 사용자 정의 필드의 데이터를 사용자에게 표시

functions.php 파일에 다음 코드를 추가하여 WooCommerce 사용자 정의 필드의 데이터를 사용자에게 표시합니다.

 기능 njengah_display_order_data( $order_id ){ ?>

<h2><?php _e( '추가 정보' ); ?></h2>

<table class="shop_table shop_table_responsive additional_info">

<바디>

<tr>

<th><?php _e( '입력 텍스트 필드:' ); ?></th>

<td><?php echo get_post_meta( $order_id, '_njengah_text_field', true ); ?></td>

</tr>

<tr>

<th><?php _e( '드롭 다운 필드:' ); ?></th>

<td><?php echo get_post_meta( $order_id, '_njengah_dropdown', true ); ?></td>

</tr>

</t바디>

</표>

<?php }

add_action( 'woocommerce_thankyou', 'njengah_display_order_data', 20 );

add_action( 'woocommerce_view_order', 'njengah_display_order_data', 20 );

결과는 다음과 같습니다. 추가 정보

4. WooCommerce 관리자 사용자 정의 주문 필드 표시

이 코드 조각은 배송 및 청구 주소 데이터로 작동하며 사용자가 작은 연필 아이콘을 클릭할 때 입력을 표시합니다.

 기능 njengah_display_order_data_in_admin( $ 주문 ){ ?>

<div class="order_data_column">

<h4><?php _e( '추가 정보', '우커머스' ); ?><a href="#" class="edit_address"><?php _e( '편집', '우커머스' ); ?></a></h4>

<div 클래스="주소">

<?php

에코 '<p><strong>' . __( '텍스트 필드' ) . ':</strong>' . get_post_meta( $order->id, '_njengah_text_field', true ) . '</p>';

에코 '<p><strong>' . __( '쓰러지 다' ) . ':</strong>' . get_post_meta( $order->id, '_njengah_dropdown', true ) . '</p>'; ?>

</div>

<div class="edit_address">

<?php woocommerce_wp_text_input( array( 'id' => '_njengah_text_field', 'label' => __( '일부 필드' ), 'wrapper_class' => '_billing_company_field' ) ); ?>

<?php woocommerce_wp_text_input( array( 'id' => '_njengah_dropdown', 'label' => __( '다른 필드' ), 'wrapper_class' => '_billing_company_field' ) ); ?>

</div>

</div>

<?php }

add_action( 'woocommerce_admin_order_data_after_order_details', 'njengah_display_order_data_in_admin' );




기능 njengah_save_extra_details( $post_id, $post ){

update_post_meta( $post_id, '_njengah_text_field', wc_clean( $_POST[ '_njengah_text_field' ] ) );

update_post_meta( $post_id, '_njengah_dropdown', wc_clean( $_POST[ '_njengah_dropdown' ] ) );

}

add_action( 'woocommerce_process_shop_order_meta', 'njengah_save_extra_details', 45, 2 );

결과는 다음과 같습니다. 추가 정보 수정

5. 이메일 주문에 WooCommerce 사용자 정의 필드 추가

functions.php 파일에 다음 코드를 추가하여 이메일을 주문하기 위한 WooCommerce 사용자 정의 필드를 추가하십시오. 이메일의 출력을 사용자 정의하려면 이메일 템플릿에서 사용 가능한 후크에 일부 텍스트를 추가할 수 있습니다. 

 기능 njengah_email_order_meta_fields( $fields, $sent_to_admin, $order ) {

$fields['인스타그램'] = 배열(

'레이블' => __( '일부 필드' ),

'값' => get_post_meta( $order->id, '_njengah_text_field', true ),

);

$fields['라이센스'] = 배열(

'label' => __( '다른 필드' ),

'값' => get_post_meta( $order->id, '_njengah_dropdown', true ),

);

$ 필드 반환;

}

add_filter('woocommerce_email_order_meta_fields', 'njengah_email_order_meta_fields', 10, 3 );

기능 njengah_show_email_order_meta( $order, $sent_to_admin, $plain_text ) {

$njengah_text_field = get_post_meta( $order->id, '_njengah_text_field', true );

$njengah_dropdown = get_post_meta( $order->id, '_njengah_dropdown', true );

if( $plain_text ){

echo '일부 필드의 값은 '입니다. $njengah_text_field . ' 다른 필드의 값은 ' 입니다. $njengah_dropdown;

} 또 다른 {

echo '<p><strong>입력 텍스트 필드</strong>의 값은 ' 입니다. $njengah_text_field. ' 반면 <strong>드롭다운</strong> 값은 ' 입니다. $njengah_dropdown . '</p>';

}

}

add_action('woocommerce_email_customer_details', 'njengah_show_email_order_meta', 30, 3 );

결론

요약하면 WooCommerce 결제 페이지에 사용자 정의 필드를 추가, 편집 및 저장하는 방법을 설명했습니다. 또한 이메일 템플릿을 편집하여 이메일의 사용자 정의 필드에서 정보를 추가했습니다. 체크아웃 페이지를 추가로 커스터마이징해야 하는 경우 체크아웃 커스터마이저 플러그인을 사용할 수 있습니다.

유사한 기사

  1. 제품 페이지에 Woocommerce 사용자 정의 텍스트 필드를 추가하는 방법
  2. WordPress에서 사용자 정의 위젯 영역을 단계별로 만드는 방법
  3. 기본 메뉴 스토어프론트 WooCommerce를 이동하는 방법
  4. 무료 배송이 가능한 경우 배송비를 숨기는 방법 WooCommerce
  5. WooCommerce에서 재고 수량을 숨기는 방법
  6. SKU, 카테고리, 태그 메타 제품 페이지를 숨기는 방법 WooCommerce
  7. 장바구니 업데이트 버튼을 숨기는 방법 WooCommerce 장바구니 페이지
  8. WooCommerce 제목을 숨기는 방법
  9. 모든 탭을 숨기는 방법 내 계정 페이지 WooCommerce
  10. WooCommerce Checkout 오류 메시지를 변경하는 방법