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

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

워드프레스 우커머스 결제 화면에서 표시되는 항목들은 다음과 같다.(결제 화면에서 회원가입을 관리하는 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-주/군

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)주문 메모 필드 안에 표시되는 견본 문구 교체하고, 필수 입력으로 만들기
예제2)주문 메모 필드에 표시되는 라벨과 견본 문구 교체하기
예제3)필요없는 입력필드 지우기 (청구 주소의 성, 회사이름, 국가, 주문메모) 필요없는 필드의 경우 원하는 배열값을 선택하고 unset 해주면 된다.