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

워드프레스 우커머스 결제 화면의 기본 표시항목

워드프레스 우커머스 결제 화면에 표시되는 항목들은 다음과 같습니다.(결제 화면에서 회원가입을 관리하는 account 관련 필드는 제외)

청구주소 (11개)
billing_first_name-이름
billing_last_name-성
billing_company-회사이름
billing_address_1-주소1
billing_address_2-주소2
billing_city-시/도
billing_postcode-우편번호
billing_country-국가
billing_state-주/군
billing_email-이메일
billing_phone-전화번호

배송주소 (9개)
shipping_first_name-이름
shipping_last_name-성
shipping_company-회사이름
shipping_address_1-주소1
shipping_address_2-주소2
shipping_city-시/도
shipping_postcode-우편번호
shipping_country-국가
shipping_state-주/군

결제창 계정생성 (3개)
account_username-사용자명
account_password-비밀번호
account_password-2-비밀번호 확인

order (1개)
order_comments-주문 메모

총 21개의 필드를 필요에 따라서 보이기/감추기 할 수 있고, 표시되는 라벨의 이름을 변경하거나 필수항목 체크/언체크 해 줄 수 있습니다.

각 항목 1개당 가질 수 있는 속성은 다음과 같습니다.

  • type – 입력 필드의 유형 text, textarea, password, select 중 선택 가능합니다.
  • label – 입력 필드의 라벨(화면에 표시되는 이름)
  • placeholder – 입력 필드 안에 미리 들어가 있는 견본 문구
  • class – 입력 필드의 input 태그 안에 추가할 class 이름
  • required – 필수 입력 항목으로 할 것인지 말 것인지를 결정합니다. true 또는 false
  • clear – 입력필드 아래에 clear class 적용 여부를 결정합니다. 다른 필드와 나란히 서는 것을 방지합니다.
  • label_class – 입력 필드의 label 태그에 추가되는 class
  • options – 입력 필드 유형이 select인 경우 선택 옵션의 키=>값 배열

워드프레스 우커머스 결제화면의 커스터마이징 플러그인 사용

위에서 언급한 각종 필드를 보이고 감추며 라벨을 바꾸거나 필수 항목 여부를 조정하는 데 유용한 플러그인이 있습니다.
Woo Checkout Field Editor Pro 플러그인이 그것입니다. 사용방법도 비교적 간단하여, 설치 후 ‘관리자 메뉴-우커머스-Checkout Form’ 메뉴 안에서 먼저 원하는 영역(billing Fields ,shipping Fields ,Additional Fields)을 선택하면 나타나는 각 필드를 편집하면 됩니다.

워드프레스 우커머스 결제화면의 커스터마이징 소스코드 사용 예제

플러그인의 도움 없이 소스코드를 현재 사용 중인 테마의 차일드 테마 functions.php 파일의 아랫부분에 붙여넣어 사용 할 수 있습니다. 아래의 소스코드는 워드프레스 우커머스 결제화면에서 표시되는 각 필드의 문구나, 필수 항목 여부, 보이기/감추기 등을 조정할 수 있는 예제입니다.

예제1) 주문 메모 필드 안에 표시되는 견본 문구 교체하고, 필수 입력으로 만들기

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields_01' );

function custom_override_checkout_fields_01( $fields ) {
     $fields['order']['order_comments']['placeholder'] = '새로운 견본 문구 입니다.';
     $fields['order']['order_comments']['required'] = true;
     return $fields;
}

예제2)주문 메모 필드에 표시되는 라벨과 견본 문구 교체하기

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields_02' );

function custom_override_checkout_fields_02( $fields ) {
     $fields['order']['order_comments']['placeholder'] = '새로운 견본 문구 입니다.';
     $fields['order']['order_comments']['label'] = '새로운 라벨';
     return $fields;
}

예제3)필요없는 입력필드 지우기 (전체 삭제- 필요한것만 사용하면 됨)

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields_03' );

function custom_override_checkout_fields_03( $fields ) {
     unset($fields['billing']['billing_first_name']);
     unset($fields['billing']['billing_last_name']); 
     unset($fields['billing']['billing_company']); 
     unset($fields['billing']['billing_address_1']); 
     unset($fields['billing']['billing_address_2']); 
     unset($fields['billing']['billing_city']); 
     unset($fields['billing']['billing_postcode']); 
     unset($fields['billing']['billing_country']); 
     unset($fields['billing']['billing_state']); 
     unset($fields['billing']['billing_email']); 
     unset($fields['billing']['billing_phone']); 
     unset($fields['shipping']['shipping_first_name']);
     unset($fields['shipping']['shipping_last_name']);
     unset($fields['shipping']['shipping_company']);
     unset($fields['shipping']['shipping_address_1']);
     unset($fields['shipping']['shipping_address_2']);
     unset($fields['shipping']['shipping_city']);
     unset($fields['shipping']['shipping_postcode']);
     unset($fields['shipping']['shipping_country']);
     unset($fields['shipping']['shipping_state']);
     unset($fields['account']['account_username']); // 이것과 아래의 두개 필드를 제거하면 사용자가 계정을 만들지 못합니다.(결제과정에서)
     unset($fields['account']['account_password']);
     unset($fields['account']['account_password-2']);
     unset($fields['order']['order_comments']); // 주문 메모 필드 제거

     return $fields;
}

필요 없는 필드의 경우 원하는 배열 값을 선택하고 위의 예처럼 unset 해주면 됩니다. (사용할 것은 위 코드에서 지워버립니다.)

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

1개의 댓글이 있습니다.

  1. 안녕하세요. 내용 잘봤습니다.
    check플러그인은 설치해서 반영했는데 주문확정 버튼을 누르면

    기존에 필수 사항인 [계속하려면 주소를 입력해 주세요.] 라고 뜹니다.

    어떻게 해야 저게 안뜰까요?

댓글 남기기

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