[워드프레스] 우커머스 주소에 우편번호를 추가해주는 Beomps Korea Postcode Search

워드프레스 우커머스 쇼핑몰에 다음 우편번호 검색 버튼을 추가하여 고객이 결제하기 페이지에서 주소를 입력할 때 쉽게 도로명 주소를 입력하도록 하고 싶은 경우 플러그인을 사용하면 편리합니다. 이 글에서 소개한 Beomps Korea Postcode Search 플러그인은 오랫동안 업데이트가 안 되어 최신 우커머스 버전에서는 작동하지 않습니다. 대신 다음 글에서 소개하는 한국형 주소, Korea Address 플러그인을 사용해보시기 바랍니다.

우커머스 주소에 우편번호를 추가해주는 Beomps Korea Postcode Search

Beomps Korea Postcode Search는 우커머스 결제 화면에서 주소에 우편번호를 추가해주는 한국형 도로명 주소/우편번호 검색 플러그인입니다. 이 플러그인은 Daum 우편번호 서비스를 이용하여 우커머스 체크아웃 화면에서 우편번호를 검색하여 쉽게 주소를 입력할 수 있도록 합니다.

워드프레스 대시보드에서 플러그인 > 플러그인 추가하기에서 "Beomps Korea Postcode Search"를 검색하여 설치하고 활성화합니다. 활성화하면 별다른 설정 페이지를 찾아볼 수 없습니다.

개별 상품 페이지에서 장바구니에 담고 결제를 진행해보면 주소를 입력하는 화면에 우편번호 검색란이 추가되어 있습니다.

Billing Details - WooCommerce

위와 같은 형식으로 "우편번호 찾기"가 추가되어 있습니다. 레이아웃은 테마에 따라 다릅니다. 위에 예는 "Just Press"라는 무료 테마를 적용했을 때의 화면입니다. 우커머스는 최신 버전이라서 그런지 한글로 표시되지 않네요. (우커머스 버전을 낮추거나 Loco Translate를 사용하여 직접 번역을 해주어야 할 것 같습니다.)

위의 화면에서 Postcode / ZIP이 주소 입력란 아래에 위치하여 보기가 좋지 않네요. 순서를 바꾸어주면 좋을 듯합니다.  순서를 바꾸는 방법은 여러 가지가 있겠지만 소스를 수정하지 않고 할 수 있는 방법으로 jQuery를 사용하는 것입니다. 이 글에 나와 있는 방법을 응용하여 우편번호 입력란의 위치를 조정할 수 있습니다.

Billing Details - WooCommerce - Corrected

우편번호 입력란의 위치를 바꾼 화면입니다. 우편번호 찾기를 눌러 주소를 선택하고 결제를 진행해보면 예상대로 잘 작동합니다. 전체적인 레이아웃은 테마에 따라 조정이 필요할 것 같습니다. 레이아웃 조정은 CSS를 통해 가능합니다.

참고


댓글 남기기

* 이메일 주소는 공개되지 않습니다.