워드프레스 우커머스 쇼핑몰 사이트의 결제 화면에서 결제정보를 입력받을 때 사용되는 기본 입력 필드는 정해져 있습니다. 기본 상거래를 위한 정보입력 창으로는 충분하고 운영하는 쇼핑몰의 성격에 따라 필요 없는 필드를 제거할 수도 있습니다. ( 반대로 우커머스 결제화면에서 추가로 필요한 필드를 만드는 방법은 이 글 참고 ) 그때 사용할 수 있는 방법입니다.
워드프레스 우커머스 결제 화면의 기본 표시항목
워드프레스 우커머스 결제 화면에 표시되는 항목들은 다음과 같습니다.(결제 화면에서 회원가입을 관리하는 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 해주면 됩니다. (사용할 것은 위 코드에서 지워버립니다.)
안녕하세요. 내용 잘봤습니다.
check플러그인은 설치해서 반영했는데 주문확정 버튼을 누르면
기존에 필수 사항인 [계속하려면 주소를 입력해 주세요.] 라고 뜹니다.
어떻게 해야 저게 안뜰까요?
감사합니다^^