워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

최근에 워드프레스 기반 우커머스 쇼핑몰에 정기결제 기능을 추가한 프로젝트를 진행했습니다. 정기결제는 일정 기간동안 매월 결제되는 방식으로 정기적인 고객을 대상으로 하기 때문에 고정적인 고객을 유지할 수 있는 장점이 있습니다. 정기결제에 적합한 상품으로는 매월 또는 매주, 매일 배달되는 상품을 위주로 합니다.


정기결제를 워드프레스와 우커머스로 개발하려면 두 가지 옵션이 있습니다. 그중 하나는 가격이 비싼 플러그인을 사용하는데 1백만원에 달합니다. 플러그인은 대부분 1년간 사용할 수 있고 매년 갱신해야 합니다. 다행히 우커머스 제작사에서 개발한 정기구독 플러그인(WooCommerce Subscriptions)을 사용하면 보다 저렴하게 정기결제를 구현할 수 있습니다. 이 플러그인의 경우 가격이 199달러이고 1년 후에 갱신할 때 50%만 내면 됩니다.



아직 이미지가 준비가 안된 상태이므로 데모 이미지가 사용됐습니다. 홈 페이지 이므로 특별한 요소는 없습니다.



이 사이트의 핵심 기능인 쇼핑 페이지입니다. 고객의 요청에 의해 단계별로 옵션을 선택하고 최종적으로 바로구매로 이어지도록 했습니다. 이러한 기능을 지원하는 우커머스 플러그인을 찾아봤는데 없더군요. 그래서 복잡한 코드를 사용해 커스터마이징 했습니다. 다음 단계 버튼을 클릭하면 아래의 화면이 나타나면서 이동합니다.



옵션으로 이미지를 선택하면 다음 화면이 나타나면서 이동합니다.



다시 옵션을 선택하면 최종적으로 이전에 선택한 옵션의 결과가 나타납니다.



여기서 결제하기 버튼을 클릭하면 바로 결제화면으로 넘어갑니다.



고객의 요청에 의해 결제화면을 커스터마이징 해서 색 다르게 했습니다. 특히 주문내역은 필요한 것만 나타나도록 했습니다.



일반적으로 주문하기 버튼을 클릭하면 카드정보를 입력하기 위한 팝업창이 나타나는데 정기결제는 이미 카드정보를 입력할 수 있는 폼이 마련돼있습니다.



결제 후의 화면입니다. 우커머스 쇼핑몰은 구매정보와 구매자 정보등 여러 가지가 나오지만 모두 없애고 간단하게 했습니다. 친구추천 기능을 돋보이게 하기 위해서죠. 친구추천 플러그인과 소셜 공유 플러그인을 조합해 위와같은 폼을 만들었습니다. 복사를 클릭하면 아래처럼 추천 코드가 복사되면서 메시지가 나타납니다.



소셜 버튼을 클릭해 붙여넣고 공개하면 이 링크를 통해 타 고객이 쇼핑몰에 들어와 상품을 구매할 경우 추천인과 추천을 받은 고객 모드에게 쿠폰을 제공할 수 있습니다.



다양한 기능을 추가하기 위해 여러 가지 플러그인이 사용됐는데 정기결제 플러그인과 친구추천 플러그인 외에 쿠폰 플러그인도 추가됐습니다. 이 플러그인을 사용하면 복잡하고 긴 쿠폰 코드를 직접 입력할 필요없이 실제 쿠폰 모양으로 나타나므로 클릭하면 할인이 적용됩니다. 이 플러그인을 이용하면 단체로 이메일을 통해 쿠폰을 발행할 수도 있습니다.



플러그인을 사용하면 마이페이지에 해당 플러그인에서 제공하는 화면이 추가됩니다. 쿠폰 플러그인은 쿠폰 화면이 있고 보유하고 있는 쿠폰이 나타나며 추천 플러그인으로 인해 대시보드 하단에 목록으로 나타납니다. 해지신청 탭이 보이는데 워드프레스에서는 해지 기능이 없어서 별도로 신청해야 하며 관리자가 수동으로 계정을 해줘야 합니다.



컨택트 폼을 이용해 해지사유를 선택할 수 있도록 했습니다. 단순한 것 같지만 서브 라디오버튼 기능을 만들기 위해 복잡한 코드가 사용됐습니다. 컨택트 폼 플러그인은 서브 라디오 버튼을 제공하지 않기 때문이죠. 



컨택트 폼을 이용한 페이지가 하나 더 있는데 라디오 버튼을 이미지로 전환해 그래픽화 했습니다. 



상품 상세 페이지가 없기 때문에 리뷰를 별도로 입력할 수 있도록 했습니다. 이 화면의 핵심은 총 별점의 표시인데 우커머스에서 제공하는 별점 표시 기능을 이용해 작업했습니다. 없는 기능을 만들다보니 코드 작업이 아주 많았습니다. 리뷰 작성시 이미지를 추가할 수 있도록 리뷰 플러그인도 사용했습니다.


기능 추가를 위해 여러 가지 프리미엄 플러그인을 사용했는데도 속도가 좋은 테마를 사용해서 그런지 로딩 속도가 빠른 편입니다. 복잡한 기능의 쇼핑몰이라 해도 일반 웹호스팅 서비스를 이용해도 문제가 없더군요. 년간 비용이 종량제로 66,000원이면서 50기가 디스크 용량이 제공됩니다. 그동안 독립 호스팅을 사용했었는데 이번에 시험삼아 종량제로 사용해보고 속도가 느리면 독립으로 이전할까 했는데 쓸만합니다. 어차피 처음 오픈 시에는 고객이 많지 않기 때문에 종량제가 훨씬 저렴합니다. 고객의 수가 증가하면 종량제로 인해 트래픽 증가에 따른 비용만 추가될 것이고 아주 많아지면 오히려 정액제가 좋을 수도 있습니다.


쇼핑몰 제작을 원하시면 아래의 링크를 봐주세요.


바로가기