워드프레스 우커머스 쇼핑몰 결제화면 입력 필드 삭제하기

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

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

워드프레스 우커머스 결제 화면에 표시되는 항목들은 다음과 같습니다.(결제 화면에서 회원가입을 관리하는 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 해주면 됩니다. (사용할 것은 위 코드에서 지워버립니다.)

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

카테고리 우커머스태그 결제, 쇼핑몰, 우커머스, 입력필드, 커스터마이징