배송조회 기능 추가하기

Woocommerce

안녕하세요. 피프티피프티입니다. 그동안 다른 업무로 바빠서 블로그를 방치하고 있었는데요. 소개해드릴 만한 좋은 정보가 있어서 포스트를 작성합니다. 워드프레스, 그중에서도 우커머스를 사용하여 쇼핑몰을 운영 중(이거나 준비 중)인 분들에게는 사막의 오아시스 같은 꿀팁이 되리라 감히 장담해봅니다 :)

워드프레스는 세계적으로 높은 인지도와 많은 사용자를 거느린 CMS 툴입니다. 무수히 많은 플러그인과 SNS, SEO, 모바일 등 다양한 서비스 및 환경과 궁합이 좋아 국내에서도 점차 확산되고 있는 중이죠. 이렇게 관심이 높아지면서 워드프레스로 쇼핑몰을 제작하려는 시도도 늘고 있습니다.

하지만 워드프레스가 가진 태생적 한계가 있으니, 국내 실정과는 맞지 않는 부분이 있다는 점입니다. 또, 다양한 플러그인이 장점이지만 쓸만한 플러그인은 유료로 구입해야 하거나 무료 버전과 유료 버전을 구분하고 무료 버전에는 기능을 빼놓는 경우도 많습니다. 물론 개발자들의 수고에 대가를 지불하는 것은 지극히 당연한 일입니다. 하지만 우리(?)의 지갑은 그리 넉넉하지 않다는 게 함정…

서론이 길었습니다. 이번에 제가 소개해드릴 내용은 무료 플러그인을 통해 우커머스에 배송조회 기능을 추가하는 방법입니다.

이전까지는 우커머스를 이용해 국내 택배사의 배송조회를 하는 것은 사실상 불가능했습니다. 국내 택배사까지 신경 써주는 플러그인 개발자는 없었으니까요. 하지만 지금은? 국내 개발사에서 제작한 플러그인이 있습니다. 국내 택배사의 배송조회, 가능합니다 :)

다만, 아쉽게도 이 플러그인은 유료입니다. 상황은 해외도 마찬가지여서 배송조회 플러그인은 대부분 유료이며 5만원 정도의 가격으로 책정되어 있습니다. 해외의 경우 무료 플러그인도 있지만, 단순히 송장 번호를 보여줄 뿐, 배송상태를 보여주진 않습니다. 개인적으로 이러한 플러그인이 유료인 점은 이해가 되지만 가격은 다소 높게 책정된 게 아닌가 싶어 아쉬웠습니다. 그래서 제가 생각한 방법은 무료 플러그인을 수정하는 방법이었습니다.

이 방법을 위해 사용된 플러그인은 YITH WooCommerce Order Tracking입니다(기본적인 설치 방법 및 사용법은 플러그인 페이지를 확인해주세요). 이 플러그인을 이용하면 관리자가 송장 번호를 입력할 수 있고, 이렇게 입력된 송장 번호는 고객의 주문내역에 표시됩니다. 하지만 배송상태를 조회하려면 고객이 직접 택배사 홈페이지에 접속해서 송장 번호를 입력해야 하니 불편함이 따릅니다.

자, 이제 이런 불편을 해결해보도록 하겠습니다. 정상적으로 플러그인을 설치했고, 송장 번호를 입력했다면, 고객의 주문내역에 아래와 같이 배송되었음을 알리는 버튼이 활성화됩니다.

screenshot-4

배송 버튼에 마우스를 오버하면 배송 정보 메시지가 툴팁 형태로 보여지고 클릭을 하면 이 메시지가 커졌다 작아질 뿐 별다른 기능은 하지 않습니다. 이제 이 버튼에 배송조회 기능을 적용해보겠습니다.

  1. FTP에 접속하여 /wp-content/plugins/yith-woocommerce-order-tracking 폴더로 들어갑니다.
  2. class.yith-woocommerce-order-tracking.php를 다운로드하여 에디트 프로그램으로 열어줍니다.
  3. 253번째 줄 아래에 다음과 같은 소스를 추가합니다.

    // 위 소스는 송장 번호를 전달해주는 역할을 합니다.
  4. 다음으로 버튼의 링크를 수정합니다.

    위 소스를 아래처럼 고쳐줍니다.

    // $order_tracking_code = $this->get_tracking_code( $data );로 송장 번호를 가져오고 이를 a 태그의 href 속성에 적용합니다.
    // http://www.hlc.co.kr/hydex/jsp/tracking/trackingViewCus.jsp?InvNo= ← 이 부분은 현대택배를 기준으로 작성된 URL입니다.
    // 다른 택배사의 경우 포스트 마지막의 <택배사 URL 목록>에서 해당하는 URL을 찾아 변경해주세요.
    // 정리하자면 택배사별 송장 조회를 위한 URL에 $order_tracking_code, 즉 송장 번호를 파라메터로 연결해주는 방식입니다.
  5. FTP에 접속하여 /wp-content/plugins/yith-woocommerce-order-tracking/assets/js 폴더로 들어갑니다.
  6. ywot.js를 다운로드하여 에디트 프로그램으로 열어줍니다.
  7. 8번째 줄부터 14번째 줄까지의 소스를 다음과 같이 주석으로 처리합니다.

    // 위 소스는 버튼에 적용되어 있는 애니메이션입니다.
    // 우리는 이 애니메이션 대신에 링크를 사용해야하기에 주석으로 처리한 것입니다.
  8. 수정된 class.yith-woocommerce-order-tracking.php 파일과 ywot.js 파일을 FTP를 통해 각각 원래 있던 위치에 업로드(덮어씌우기)합니다.

모든 과정이 끝났습니다. 이제 주문내역을 다시 확인해보세요. 배송 버튼을 클릭하면 새 창이 열리고 배송상태 조회화면이 나올 것입니다. 참 쉽죠?

다소 어렵게 느껴지더라도 차근차근 따라하면 성공하시리라 생각합니다. 수정되는 내용을 이해하실 필요느 없습니다. 된다는게 중요한거죠! 아무쪼록 도움이 되셨기를 :)

 

택배사 URL 목록(네이버 스크립트 참고)

우체국택배 → http://service.epost.go.kr/trace.RetrieveRegiPrclDeliv.postal?sid1=
대한통운 → http://www.doortodoor.co.kr/servlets/cmnChnnel?tc=dtd.cmn.command.c03condiCrg01Cmd&invc_no=
한진택배 → http://www.hanjin.co.kr/Delivery_html/inquiry/result_waybill.jsp?wbl_num=
로젠택배 → http://www.ilogen.com/iLOGEN.Web.New/TRACE/TraceView.aspx?gubun=slipno&slipno=
현대택배 → http://www.hlc.co.kr/hydex/jsp/tracking/trackingViewCus.jsp?InvNo=
KG옐로우캡택배 → http://www.yellowcap.co.kr/custom/inquiry_result.asp?invoice_no=
KGB택배 → http://www.kgbls.co.kr/sub5/trace.asp?f_slipno=
EMS → http://service.epost.go.kr/trace.RetrieveEmsTrace.postal?ems_gubun=E&POST_CODE=
DHL → http://www.dhl.co.kr/publish/kr/ko/eshipping/track.high.html?pageToInclude=RESULTS&type=fasttrack&AWB=
한덱스 → http://btob.sedex.co.kr/work/app/tm/tmtr01/tmtr01_s4.jsp?IC_INV_NO=
FedEx → http://www.fedex.com/Tracking?ascend_header=1&clienttype=dotcomreg&cntry_code=kr&language=korean&tracknumbers=
동부익스프레스 → http://www.dongbuexpress.co.kr/Html/Delivery/DeliveryCheckView.jsp?item_no=
CJ GLS → http://nexs.cjgls.com/web/service02_01.jsp?slipno=
UPS → http://www.ups.com/WebTracking/track?loc=ko_KR&InquiryNumber1=
하나로택배 → http://www.hanarologis.com/branch/chase/listbody.html?a_gb=center&a_cd=4&a_item=0&fr_slipno=
대신택배 → http://home.daesinlogistics.co.kr/daesin/jsp/d_freight_chase/d_general_process2.jsp?
경동택배 → http://www.kdexp.com/sub4_1.asp?stype=1&p_item=
이노지스택배 → http://www.innogis.net/trace02.asp?invoice=
일양로지스택배 → http://www.ilyanglogis.com/functionality/tracking_result.asp?hawb_no=
CVSnet 편의점택배 → http://was.cvsnet.co.kr/src/ctod_status.jsp?invoice_no=
TNT Express → http://www.tnt.com/webtracker/tracking.do?respCountry=kr&respLang=ko&searchType=CON&cons=
HB한방택배 → http://www.hbtb.co.kr/search/s_search.asp?f_slipno=
GTX → http://www.gtx2010.co.kr/del_inquiry_result.html?s_gbn=1&awblno=

참고사항: YITH WooCommerce Order Tracking 플러그인은 1.0.2 버전을 사용했습니다(2015년 3월 16일 기준 최신 버전).

3
  • Guest

    아직 써보진 않았는데 꿀팁이네요. 따봉!

  • Jiyoung Ye

    덕분에 잘 사용했어요!!ㅠㅠㅠ 감사합니다!!! (엄지척!!!)

  • Marimori

    꼭 필요했던 기능인데, 이렇게 알려주셔서 정말 감사합니다!! 완벽하게 작동합니다. ㅠㅠ

  • Pingback: 워드프레스 홈페이지 제작전문 CODECLOUD | 배송조회 기능 추가하기()

  • http://it.hillmarucc.com Hong Sik Won

    와우!! 국내 배송 조회 아주 잘됩니다. 감사감사 또 감사해요..^^;; 적용 버전 1.0.5 입니다.

  • 박성환

    지금은 적용이 되질 않는 코드인가 봅니다. 적용하니 사이트 전체가 먹통이 되네요…. ㅠㅠ

  • 박성환

    업데이트후 코드가 늘어나 256 번째에 넣어야 하네요 감사합니다. ^^

  • 박성환

    주문보기를 하였을 경우에도 목록 아래에 배송조회 버튼을 넣고싶어서 위의 버튼 링크를 응용해서 버튼은 넣었는데 이 버튼에서는 송장번호를 읽어오질 않네요. 어떻게 해야 할지 알려주시수 있으신가요?

    • 김철중

      해당 자료는 1.0.2 버전을 기준으로 진행되었으며, 이 경우 말씀하신 주문 상세에서도 배송 조회가 가능합니다.
      저도 최신 버전은 살펴보지 않아서 답변이 어려울 것 같구요. 굳이 최신 버전으로 업데이트 할 필요성도 느끼지 못하고 있으니 1.0.2 버전으로 다시 시도해보시는게 좋을 것 같네요.
      1.0.2 버전은 다음 링크에서 받아보실 수 있습니다. https://wordpress.org/plugins/yith-woocommerce-order-tracking/developers/

      • 박성환

        1.0.2 버전 소스를 알려주시면 제가 수정했으면 하는데, 괜찮으시면 부탁드려봅니다.