워드프레스 우커머스 쇼핑몰 결제화면 추가 입력 필드 만들기

현재위치:Home/Wodrpress/우커머스/워드프레스 우커머스 쇼핑몰 결제화면 추가 입력 필드 만들기

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

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

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

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

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

(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)주문완료시 전송되는 이메일에 표시

주문완료시 전송되는 이메일에 추가 입력 내용 표시

주문완료시 전송되는 이메일에 추가 입력 내용 표시

By | 2016-12-23T19:48:35+00:00 2016 5 11|카테고리: 우커머스|Tags: , , , |5 Comments

글쓴이 :

5 댓글

  1. 도와주십숑 2016년 12월 22일 at 5:02 오후 - Reply

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

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

  2. 양양 2016년 11월 11일 at 5:28 오후 - Reply

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

    • 이명성 2016년 11월 19일 at 3:26 오후 - Reply

      제품 상세페이지에 입력필드라는 것이 무엇을 뜻하는 것인지 잘 모르겠습니다.

      • 양양 2016년 12월 1일 at 12:15 오후 - Reply

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

        • 양양 2016년 12월 1일 at 12:15 오후 - Reply

          text input( 오타입니다ㅠㅠ.)

댓글을 남겨주세요.