워드프레스 우커머스 쇼핑몰 사이트의 결제 화면에서 결제정보를 입력받을 때 사용되는 기본 입력 필드는 정해져 있습니다. 기본 상거래를 위한 정보입력 창으로는 충분하지만 운영하는 쇼핑몰의 성격에 따라 다른 종류의 입력 필드가 필요할 수도 있습니다. ( 반대로 우커머스 결제화면에서 불필요하다고 생각하는 필드를 없애는 방법은 이 글을 참고 )

1.우커머스 쇼핑몰 결제화면 추가 입력 필드 만들기-플러그인 사용

Woo Checkout Field Editor Pro 플러그인은 결제창에서 사용되는 필드의 사용 유무와 라벨, 플레이스홀더(견본글), 필수 항목 유무 등을 자유롭게 변경할 수 있도록 도와줍니다. 어지간한 컨트롤은 모두 이 플러그인으로 하면 될 것입니다. 추가 필드를 만드는 것도 가능하여 원하는 위치( 청구주소 입력란의 맨 아래, 배송주소 입력란의 맨 아래, 추가정보 입력란의 아래)를 선택하고 추가하면, 즉시 사용이 가능합니다. 이후 관리자의 주문 편집화면의 사용자 정의 필드, 구매자의 주문완료 화면, 구매자의 구매내역 상세화면, 주문 완료 이메일 등에 입력한 내용이 표시됩니다.

2.우커머스 쇼핑몰 결제화면 추가 입력 필드 만들기-추가 코드 사용

플러그인을 사용하면 몇 가지 아주 작은 단점이 존재합니다.
이메일에서 표시되는 위치, 관리자 주문 편집화면에서의 표시 위치가 그것입니다. 다음의 소스 코드를 이용해서 원하는 기능을 구현 수 있습니다. 아래는 “개인통관고유번호” 라는 필드를 추가하고, 필요한 화면에 표시하기 위한 방법입니다. 이 소스코드를 현재 사용 중인 테마의 차일드 테마 functions.php 파일 하단에 붙여넣고, 내가 원하는 문구나 설정으로 변경하면 됩니다.

// (1)주문화면의 청구주소에 추가 입력 필드 표시
add_filter( 'woocommerce_checkout_fields' , 'my_custom_override_checkout_fields' );
function my_custom_override_checkout_fields( $fields ) {
     $fields['billing']['billing_custom_number'] = array(
      'label'     => '개인통관고유번호',
      'placeholder'   => '개인통관고유번호를 입력 해 주세요',
      'required'  => true,
      'class'     => array('form-row-wide'),
      'clear'     => true
     );
	 return $fields;
}

// (2)관리자 화면의 주문 내용에 표시
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_number_display_admin_order_meta', 10, 1 );
function my_custom_number_display_admin_order_meta($order){
    echo '<p>개인통관고유번호 : ' . get_post_meta( $order->id, '_billing_custom_number', true ) . '</p>';
}

// (3)주문완료시 고객의 주문서 에 표시
add_action('woocommerce_order_details_after_customer_details', 'my_custom_number_display_order_details', 20, 1);
function my_custom_number_display_order_details($order) {
	echo '<p><strong>개인통관고유번호 : </strong>' . get_post_meta( $order->id, '_billing_custom_number', true ) . '</p>';
}

// (4)주문완료시 전송되는 이메일에 표시
add_action( 'woocommerce_email_customer_details', 'my_custom_number_display_emails', 11, 3 );
function my_custom_number_display_emails($order) {
	echo '<ul><li><strong>개인통관고유번호 : </strong>' . get_post_meta( $order->id, '_billing_custom_number', true ) . '</li></ul>';
}

(1)주문화면의 청구주소에 추가 입력 필드 표시

  • 필터훅을 ‘woocommerce_checkout_fields’로 사용하여 결제화면에 추가 입력 필드를 표시하는 방법을 사용하면, 데이터베이스에 입력필드를 저장하는 것과 입력필드 필수 항목지정시 유효성 검증을 하지 않아도 됩니다.
  • 만약 독립적( billing 배열, shipping 배열, order배열에 종속적이지 않고)으로 추가 필드를 표시하려면 , 각 위치를 지정하는 훅( woocommerce_before_checkout_billing_form, woocommerce_after_checkout_billing_form, woocommerce_before_checkout_shipping_form, woocommerce_after_checkout_shipping_form, woocommerce_before_order_notes, woocommerce_after_order_notes)을 사용합니다.
  • 코드의 세번째 줄 ‘billing’ 은 ‘shipping’ 또는 ‘order’ 로 위치를 바꿀수 있습니다.
  • 코드의 세번째 줄 ‘billing_custom_number’은 새로운 입력 필드의 이름이고 배열의 인덱스이며, 저장시 메타키가 되는데, 상위 인덱스 값이 맨 앞에 나와야 하고 뒷부분은 겹치지 않는 값을 임으로 만들어 넣습니다.
  • 그외 배열값은 표시되는 모양, 필수 항목 유무, 추가 class 등을 정의 합니다.
우커머스 결제화면 추가 입력칸 생성
우커머스 결제화면 추가 입력칸 생성

(2)관리자 화면의 주문 내용에 표시

우커머스 결제화면 추가 입력 내용 관리자 화면 주문 내용에 표시
우커머스 결제화면 추가 입력 내용 관리자 화면 주문 내용에 표시

(3)주문완료시 고객의 주문서에 표시

추가 입력 내용 주문완료시 고객의 주문서 에 표시
추가 입력 내용 주문완료시 고객의 주문서 에 표시

(4)주문완료시 전송되는 이메일에 표시

주문완료시 전송되는 이메일에 추가 입력 내용 표시
주문완료시 전송되는 이메일에 추가 입력 내용 표시
인기글
카페24 웹호스팅 보안서버 SSL 인증서 443 포트 사용
인스타그램 Access Token 과 UserID 가져오는 방법
FTP 파일질라 전송시 한글파일 누락
Woocommerce Quick Buy – 플러그인 : 우커머스 상품목록에 바로구매 버튼 넣기
워드프레스 도메인변경
페이스북 , 카카오톡, 트위터의 공유 정보 캐시 삭제하기
워드프레스 우커머스 원화(KRW) 설정시에도 페이팔 사용하기
워드프레스 우커머스 쇼핑몰 플러그인 한국형 배송 설정 정리
다른 도메인 으로 들어온 요청을 메인 도메인의 특정 페이지로 연결하기
워드프레스 우커머스 쇼핑몰 결제화면 입력 필드 삭제하기

10개의 댓글이 있습니다.

  1. // (3)주문완료시 고객의 주문서 에 표시
    add_action(‘woocommerce_order_details_after_customer_details’, ‘my_custom_number_display_order_details’, 20, 1);
    function my_custom_number_display_order_details($order) {
    echo ‘개인통관고유번호 : ‘ . get_post_meta( $order->id, ‘_billing_custom_number’, true ) . ”;
    }

    위의 코드가 order 테이블에 표기가 안되어서 아래 형태로 변경하여 적용하였습니다. 위치는 조금 다르지만요…
    //
    add_action(‘woocommerce_order_details_after_order_table’, ‘my_custom_number_display_order_details’, 20, 1);
    function my_custom_number_display_order_details($order) {
    echo ‘개인통관고유번호 : ‘ . get_post_meta( $order->id, ‘_billing_custom_number’, true ) . ”;
    }

    레퍼런스(https://docs.woocommerce.com/wc-apidocs/hook-docs.html)를 보니 order-details.php 에 action으로 넣을 수 있는 예약어들은 아래 뿐인 것 같습니다. 참고하세요.

    woocommerce_order_details_after_order_table (action, order-details.php)
    woocommerce_order_details_after_order_table_items (action, order-details.php)
    woocommerce_order_details_before_order_table (action, order-details.php)
    woocommerce_order_details_before_order_table_items (action, order-details.php)

  2. function custom_override_checkout_fields_02( $fields ) {
    $fields[‘billing’][‘paper_number’][‘required’] = true; //필수입력값 만들기
    $fields[‘billing’][‘paper_number’][‘placeholder’] = ‘000’;
    $fields[‘billing’][‘paper_number’][‘label’] = ‘Paper Number’;

    다른 글을 보고 새로운 필드를 추가하였습니다.
    관리자에서 보고 싶어 위와 같이 따라해봤는데 안되어 글을 남김니다ㅠㅜ

    // (2)관리자 화면의 주문 내용에 표시
    add_action( ‘woocommerce_admin_order_data_after_billing_address’, ‘custom_override_checkout_fields_02’, 10, 1 );
    function custom_override_checkout_fields_02($order){
    echo ‘Paper Number : ‘ . get_post_meta( $order->id, ‘_billing_paper_number’, true ) . ”;

    이거저것 부분부분 해봤는데 안되어 도움을 요청드립니다!..ㅠ

  3. 좋은 정보 감사합니다. 혹시, 제품의 결제페이지가 아니라 제품의 상세페이지에 입력필드를 추가하고 싶을때는 추가 경로를 알수 있을까요?

      1. 아,, 넵, 설명이 부족했습니다. 제품의 상세페이지에 보면 제품에 대한 정보, 예를 들어서 수량선택이라든지, 옵션상품의 경우, 색상선택등을 추가 할수 있잖아요. 여기에 날짜라든지, 사용자가 직접 입력하는 test input을 추가하고 제품주문서에 해당 내용이 추가되기를 원해서요..

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다