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

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

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

글쓴이 : 이명성
WPBOX.KR 운영자
AVADA.KR 운영자
EnnioLove.com 운영자
Facebook
everygofine@gmail.com

카테고리 우커머스태그 결제, 쇼핑몰, 우커머스, 필드추가