우커머스 결제화면 커스터마이징하기

이상한모임 커뮤니티에서 발간하는 월간이모는 리디북스에서 판매중이다. 하지만 운영을 하다보니 몇가지 아쉬운 점이 있었는데 1) 리디북스에서는 누가 구매했는지 로그를 확인하기가 어려워 2차 마케팅이 이뤄지지 않았다. 그래서 누가 안사고 산척하는지도 판단하기가 어렵다. 범인을 색출하자. 2) 전자책 원본파일을 제공하고 있으나, 실제로는 원본 다운로드가 쉽게 전환되지 않았다.

그래서 전자책파일(PDF)의 원본을 판매하고 구매자 정보를 모으기 위해서 별도의 온라인 서점을 만들어 보려고 한다. 굳이 온라인 서점이라고 하기엔… 그냥 쇼핑몰이다. 하지만 우커머스 기본 테마는 실물 상품을 배송하는 것이 기본이고, 디지털 컨텐츠라고 하더라도 이것저것 입력을 잡다하게 요구하는 게 많다.

woo-custom-1

위 화면은 기본값들이고, 이것들은 대부분 해외 구매시에 자주 볼 수 있는 주소필드들이다. 너무 많다. 어차피 전자책이고 구매 즉시 다운로드 되기도 하며 이메일로 날아가니까, 구매자 정보도 저렇게까지 디테일할 필요가 있을까 싶다. 다 지워버리고 싶다. 그래서 찾다보니 우커머스 커스터마이징 관련 문서가 있어 개선해봤다.

1. 불필요한 필드 정리하기

문서 예제에 나와있는 add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );를 추가하고, function custom_override_checkout_fields( $fields ) {} 블럭의 내부에 unset($fields['field']['sub-field']); 들을 추가해주면 내가 넣어준 필드들이 페이지에서 빠진다.

woo-custom-2

역시 문서가 시키는대로 하니까 잘 빠진다.

2. Label, Placeholder 바꾸기 + 필드 추가하기

중간샷이 없으니 그냥 퉁치쟈(…)

2.1 Field Overide
우선 라벨이 영어라서 한국어로 바꿔봤다. 위에서 필드를 뺐던 function custom_override_checkout_fields( $fields ) {
}
블럭안에다 아래의 코드를 추가해줬다.

$fields['billing']['billing_email']['label'] = '이메일';
$fields['billing']['billing_phone']['label'] = '휴대폰 번호';
$fields['order']['order_comments']['placeholder'] = '예) 반드시 선불로 배송해주세요';
$fields['order']['order_comments']['label'] = '참고사항';

2.2 Add a Field
커뮤니티 회원 아이디만으로는 구분이 안되니 슬랙 아이디를 추가로 받아볼까 한다. Lesson3 – Adding a custom special field 샘플을 복붙하고 my_field_nameslack_id로만 바꿔줬다.

위의 2.1과 2.2를 따라하다보니 아래의 이미지처럼 적용됐다.
woo-custom-3

결제 테스트를 진행해보고 Order history에도 Slack ID가 잘 들어온게 확인됐다.
woo-custom-4

앱 & 서비스 기획자입니다. 잘하고 싶어요.

Sliding Sidebar