1.우커머스의 결제화면 문제

우커머스를 이용한 쇼핑몰 제작을 하게 되면 한국인들에게 이질감을 주는 화면이 몇 개 존재합니다.
그중 대표적인 것이 결제화면입니다.
first-last name 을 구분하는 이름 입력과 국내용으로 사용하려는데 국가 구분까지 나오는 등 사이트 운영자로서는 꼭 커스터마이징 하고 싶은 화면이 바로 이곳입니다.
게다가 한국의 주소체계와 우편번호를 제공하지 않으니 여간 불편한 것이 아닙니다.
이런 불편함을 없애주는 국내용 플러그인은 몇몇 업체에서 유료로 판매되고 있습니다.

이를 대체할 박성범 님이 만든 Beomps Korea Postcode Search 플러그인을 소개합니다.
간단하면서도 무료인, 결제화면 정리와 한국의 우편번호를 제공하는 강력한 플러그인입니다. (2015.10월 현재)

2.Beomps Korea Postcode Search 플러그인 설치

먼저 아래의 그림은 Beomps Korea Postcode Search 플러그인을 설치하기 이전의 우커머스 기본 결제 화면입니다. ( 아래의 이미지는 아바다테마를 사용한 화면이고, 테마별로 디자인은 다르지만, 결제를 위해서 정보를 입력하는 필드는 같으므로 다른 테마에서도 아래와 같은 입력창이 보일 것입니다.)

우커먼스 결제화면 우편번호 플러그인 1

이제 Beomps Korea Postcode Search 플러그인을 설치하게 되면 위의 화면은 아래와 같이 정리됩니다.

우커머스 결제화면 우편번호 플러그인 2

결제 정보 입력 필드가 줄어들었고, 한국의 주소체계를 검색해서 우편번호를 찾을 수 있는 기능이 추가되었습니다.

3.플러그인 세부 설정하기

이 플러그인은 관리자 창에서 설정을 세팅할 수 있는 화면을 아직 제공하지 않습니다.
어드민의 메뉴와 화면의 자리까지는 만들어 놓았지만, 개발자분께서 아직… (우리가 이런 플러그인 많이 사용해야 개발자도 신이 나서 추가 개발해 주시겠죠…. ^^ )

그렇지만 플러그인의 코드에는 자세하게 설정할 수 있는 방법을 기술해 놓았습니다.
우린 조금 돌아가지만, 이것을 이용하면 더 디테일한 설정을 할 수 있습니다.

먼저 FTP 클라이언트 프로그램( 파일질라, AL FTP 등)으로 나의 계정에 접속한 후 wp-content/plugins/Beomps Korea Postcode Search/ 폴더안의 beomps-korea-postcode-search.php 파일을 내려받은 후 편집기로 불러옵니다. 아래와 같은 코드가 보일 것입니다.

Beomps-Korea-Postcode-Search_03

코드를 읽을 줄 몰라도 간단하게 생각할 수 있는것이 20줄부터 나오는 unset이라는 이름의 함수입니다.
이 명령문이 우커머스결제 기본화면에 있던 필드들을 사라지게 만드는 것입니다. 이 명령어를 주석 처리하면 (명령문을 코드상에는 표기하지만, 실제 작동하지 않도록 하는 기능 – 개발자가 메모하거나 다른 이에게 코드를 설명할 때 사용합니다. 위의 코드에서는 11,14,17,18 이 주석입니다.)명령어가 작동을 하지 않아서 감춰졌던 기본 필드들이 다시 나타납니다. (예 20번 줄의 unset 앞에 // 라고 표기하면 결제 화면에서 ‘성(last name)’을 입력하는 필드가 나타납니다)
만약 회사의 이름을 입력하는 칸을 나타나게 하고 싶으면 23번 줄 앞에 //를 붙여넣으면 됩니다.

이제 적당한 곳 (19번 줄이 좋겠습니다.)에 아래의 코드를 추가합니다.


unset($fields['billing']['billing_country']);
unset($fields['shipping']['shipping_country']);

그러면 이제 국가를 나타내는 필드가 사라질 것입니다.

참고로, 전화번호를 입력하는 필드를 사라지게 하는 코드는 아래와 같습니다.


unset($fields['billing']['billing_phone']);

위의 코드에서는 보이지 않지만, 현재 사이트가 SSL을 사용한다면 65줄을 주석처리하고, 69줄의 주석을 해제하면 됩니다.

여기서 설명한 대로 국가를 나타내는 필드까지 삭제하고, beomps-korea-postcode-search.php 파일을 나의 계정 같은 자리에 업로드 하면 아래와 같은 화면이 나타납니다.

우커머스 결제화면 우편번호 플러그인 4

4.디자인 간단 정리

위에서 보이는 화면을 보면 몇 가지 문제가 있습니다.

이메일 입력 칸의 이름과 필드가 떨어져 있고, 입력 필드 내의 플레이스홀더( 견본내용)글자 아래가 덜 보입니다. (이것은 아바다테마에서 주로 나타나는 문제이고, 영어 폰트보다 한글폰트가 살짝커서 생기는 문제인 것 같습니다)
덧붙여서 우편번호 찾기 버튼을 살짝 입력필드와 떨어뜨려 보겠습니다.

먼저 테마의 style.css 파일을 열어서 (차일드 테마를 사용할 것을 권장합니다)

아래의 코드를 붙여 넣습니다.
테마가 제공하는 커스텀 CSS 입력 칸이 있다면 그곳에 입력해도 됩니다. (아바다테마는 테마옵션-CUSTOM CSS 에 입력할 수 있는 칸이 따로 제공됩니다)


#billing_email_field {clear:both;}     
.woocommerce-billing-fields input {line-height:18px !important;}
#billing_postcode_search {margin-bottom:18px;}

그러면 다음 화면과 같이 보일 것입니다.

Beomps-Korea-Postcode-Search_05

아직은 투박하지만…
그런대로 사용할만한 결제 화면이 만들어졌습니다.

5. 결론

쇼핑몰 사이트에서 가장 중요한 화면 중 하나가 결제화면입니다.
이곳에서 사용자가 느끼는 편리함과 귀찮음이 결제 성공의 여부를 판가름하기도 합니다.
이런 면에서 한국에서 우커머스를 사용하여 쇼핑몰을 만든다는 것은 리스크가 큰일 입니다.
많은 요소에서 우리의 정서와 맞지 않는 부분이 존재하기 때문입니다.

하지만 결제화면에서만큼은 이 플러그인이 큰 도움을 준다고 생각합니다.

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

2개의 댓글이 있습니다.

  1. 저는 엠샵의 대한민국 주소 플러그인을 69,900원에 vat 별도로 구입했습니다. 유료가 좋다는 생각에 그만,… 그런데 해마다 갱신해야한다고 합니다. 이런 좋은 정보가 있었다면 구입하지 않아도 되는 것을, 후회 막급입니다.

댓글 남기기

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