[쇼핑몰 구축기] 바로구매 버튼 추가로 구매 단계 줄이기

우리나라 쇼핑몰엔 기본으로 달려있는 바로구매 버튼이 우커머스에는 기본이 아니죠. 그래서 커스터마이징을 통해서 바로구매 버튼을 달아야 합니다.

문화적인 차이 또는 아마존 특허의 이슈인지는 확실하지는 않지만 우커머스에는 관련 기능이 없습니다. 그리고 바로구매 버튼을 제공하는 예전 자료중에는 특허에 상관없이 달겠다는 체크 표시가 있었던 것을 보면 분명 측허 이슈가 있었던 것은 분명해 보입니다.

이제는 특허기간이 소멸되었지만 아마존이 원크릭 쇼핑과 같은 온라인 쇼핑 시 편리한 기능들에 대해 특허를 가지고 있었죠. 아마존의 원클릭쇼핑이나 아마존 대시에 대해서는 아래 글을 참조해 보세요

쇼핑몰을 대체하겠다던 아마존 대시(Amazon Dash)는 실패작일까?

여기에서는 우커머스 쇼핑몰에서 플러그인을 사용해서 바로구매 버튼 추가 방법에 대해서 알아봅니다.

[쇼핑경험 개선] 우커머스 쇼핑몰에 바로구매 버튼 추가로 구매 단계 줄이기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[쇼핑경험 개선] 우커머스 쇼핑몰에 바로구매 버튼 추가로 구매 단계 줄이기

우리나라의 대부분 쇼핑몰에서는 기본적으로 바로구매 버튼을 제공합니다.

기존에는 장바구니(Shopping Cart)에 담기 – 장바구니(Shopping Cart) – 결제 단계로 이어지는 다소 복잡한 프로세스를 거쳤지만 바로구매 버튼은 바로 구매(Buy Now) – 결제로 이어지도록 만들었기 때문에 그만큼 쇼핑 경험을 개선할 수 있습니다.

우리나라 쇼핑몰에서 매우 당연한 기능이지만 우커머스에서는 기본적으로 제공하지는 않는 기능으로 플러그인을 사용하든 프로그램으로 추가하든 별도 작업이 필요합니다.

이번에는 쇼핑 경험을 개선하기 위해서 워드프레스 쇼핑몰에서 바로구매 버튼을 추가하는 방법에 대해서 살펴보겠습니다.

1. 플러그인 사용

워드프레스 장점을 극대화하기 위해 별도의 프로그램하지 않고 관견 기능을 제공하는 플러그인을 구매하여 사용할 수 있습니다.

1.1 유료 플러그인

바로구매 기능 구현을 위한 가장 간편한 방법은 유료 플러그인을 구매하는 것입니다. 제가 알아본 바로 구매를 위한 유료 플로그인은 아래와 같습니다.

개인적으로 처음엔 어느정도 비용을 들이고자 가격이 상대적으로 저렴한 WooCommerce Direct Checkout Pro를 구입했습니다.

코드엠샵 바로구매 플러그인 29,900원

다보리 통합 플러그인

WooCommerce Direct Checkout Pro, 10$

1.2. 무료 플러그인

바로구매 기능 구현을 위한 무료 프로그램은 Quick Buy For WooCommerce가 있는데요.

이 플러그인은 아쉽게도 업데이트가 1년동안 거의 이루어지지 않고 있습니다. 그래서 사용하기가 매우 찜찜합니다.

오래전에 등장한 다른 플러그인도 있지만 그것들은 더 오래전부터 업데이트가 안되고 있습니다. 아쉬운 일이죠.

1.3. 프로그래밍 추가

플러그인들이 마음에 들지 않는다면 개인 취향을 최대한 반영한 프로그램을 통해서 바로구매를 반영할 수 있습니다.

이는 어느 정도 프로그램에 대한 능력이 요구되기 때문에 일반인들이 쉽게 접근하기는 쉽지는 않습니다.

2. 유료 플러그인 WooCommerce Direct Checkout Pro 사용기

앞서 잠깐 언급했듯이 바로구매 기능 구현을 위해서 WooCommerce Direct Checkout Pro를 구매했습니다.

이 플러그인은 아래와 같이 다양한 기능을 가지고 있습니다.

• AJAX ADD TO CART – 이 기능은 장바구니에 담은 상품을 장바구니까지 가서 볼 필요없이 간단히 메뉴에서 장바구니 현황을 볼 수 있습니다.
• 결제 단계의 불필요한 필드 제거 기능 – 예를 들어 동양에서는 성과 이름을 구분해서 잊력하지 않기 때문에 성에 해당하는 last_name, 국가, 주 등 불필요한 필드드릉ㄹ 제거할 수 있는 기능이 있습니다.
• 프로 버젼에서는 바로구매 버튼 추가 기능이 있습니다. 일반 버젼에서는 구매버튼을 바구구매 버튼으로 변경 기능을 제공합니다. 구매와 바로구매 버튼 두개다 필요없다면 일반 버젼을 사용해도 좋을 듯 하네요.
• 프로버젼에서는 ONE-PAGE CHECKOUT이라는 결제단계에서 상품 수량 및 상품 개별 리스트 제거 기능을 제공합니다.

다양한 기능을 10$에 제공하기 때문에 그리 나쁜 선택은 아니라는 생각입니다. 그러나 아직은 부족한 점이 몇개 보입니다.

아래에서는 이러한 문제를 수정해 가는 과정을 케이스가 발생하는대로 공유하도록 하겠습니다.

2.1. 장바구니 버튼과 바로구매 버튼 매칭 문제

이러한 플러그인의 경우 버튼간 매칭 문제가 항상 발생합니다.

이럴경우 css 프로그램을 통해서 매칭하라고 하는데요. 이는 일반인의 능력을 넘어서는 분야이기 때문에 보다 많은 공부가 필요합니다.

다향히 이 WooCommerce Direct Checkout Pro의 경우 대부분 브라우저에서 장바구니 버튼과 바로구매 버튼 매칭에는 큰 문제가 없었습니다.

다만 소소한 두가미 문제를 만났는데요. 참고로 그 문제와 해결 과정을 적어 보도록 하겠습니다.

2.1.1. 장바구니 버튼과 바로구매 버튼 배열이 깨지는 경우

어느날 평소에는 잘 사용하지 않던 엣지로 테스트 했는데 여기서는 문제가 발생하더군요

문제는 아래 이미지처럼 마이크로소프트 엣지에서는 장바구니 버튼과 바로구매 버튼 배열이 깨지는 현상이 발생한 것입니다. 이는 오직 엣지에서만 그랬습니다.

이럴 경우 어떻게 해야할까요? 무엇을 점검해 보아야 할까요?

이 문제 해결은 생각보다 쉽게 찾았습니다. 사용하는 OceanWP 테마 문제 해결을 위해 세팅을 변경하면서 버튼들이 들어갈 공간이 부족해진 원인이었습니다.

즉 이미지와상품 설명 공간 배치 비율을 성정하면서 이미지를 크게 보이겠다는 생각에 상대적으로 이미지 공간크기를 늘렸는데 엣지와 다른 브라우져간 마진이나 pedding을 받아드리는 값이 달랐던 것 같습니다.

주로 파이어폭스 기준으로 작업해 아무 문제없을 정도로 이미지 공간크기를 ㄴㄹ렸는데 엣지에서는 상품 설명 공간이 더 작아지고 버튼 2개가 나란히 들어갈 공간이 부족해진 것이죠.

결국 이미지 공간 비율을 줄이고 상품 설명 공간 비율을 높여서 버튼이 들어갈 공간을 확보해주니 문제가 풀렸습니다.

2.1.2. 버튼 높이 조정

처음에는 장바구니 버튼과 바로구매 버튼이 나란히 배치된다는 것에 기뻐서 다른 것을 보지는 못했는데요.

어느날 찬찬히 살펴보니 두개 버튼의 높이가 미세하게 다르더군요. 이 문제는 어떻게 해결해야할까 고민 고민하다 css로 풀기로 했습니다.

이는 아래와 같은 방법으로 풀었습니다.

1단계, 버튼 class 정의

WooCommerce Direct Checkout Pro를 구입하면 무료 버젼인 WooCommerce Direct Checkout 플러그인과 프로 기능을 추가할 수 있는 WooCommerce Direct Checkout Pro 플러그인 두개를 설치해야 합니다.

아중 모든 세팅은 기본 프로그램이라 할 수 있는 WooCommerce Direct Checkout 플러그인에서 하는데요.

• 설정 – product로 들어가면 Add quick purchase class라는 항목이 있습니다.
• 여기에 원하는 class이름을 적어주면 됩니다. 저는 btn btn-primary이라고 적었습니다.

2단계, 장바구니 버튼과 바로구매 버튼의 속성값 확인

브라우저의 요소검사 기능을 통해서 장바구니 버튼과 바로구매 버튼의 속성값을 확인합니다. 그러면 미묘하게 차이나는 점들을 발견하게 되는데요.

저의 경우는 마진과 pedding값이 다를게 적용되어 있더군요. 그래서 그 값을 맞추는 값이 무엇인지 확인합니다.

3단계, css 코드 적용

pedding 등 차이를 맞추어주는 css 코드를 작성해 custom css에 추가합닏.

제가 사용한 css 코드는 아래와 같습니다.

/* 바로구매 버튼 높이 조정*/
.btn-primary {
    display: inline-block;
    font-family: inherit;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    padding: 12px 20px !important;
    border: 0;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background-color: #04d39f;
    box-shadow: none;
} Code language: PHP (php)

2.2. 모바일의 One Page Checkout 페이지

데스크탑은 워낙 폭이 넓기 때뭄에 별 문제가 없지만 스마트폰에서는 주문 현황 부문이 스마트폰 한 화면에 그대로 들어오지 않고 스마트폰 폭을 벗어나 버립니다.

이 문제는 아래와 같은 두가지 방법을 적용해 해결했습니다.

첫번째, 상품 리뷰 정보 항목 중 상품 개별 가격은 총가격이 있기 때문에 빼서 상대적으로 모바일에서도 공간 여유를 갖도록 했습니다.
두번째, 상품 리뷰 정보를 보여주는 테이블의 마진 및 pedding을 최소로 조정해 공간을 확보했습니다.

마진 및 pedding을 조정하가 위한 css코드입니다.

/* 상품 리뷰 테이블 마진 등 최소로 변경하기*/
.woocommerce #order_review table.shop_table{margin:0 0 5px;border:none !important}.woocommerce #order_review table.shop_table th{border:none;padding:5px 5px !important}.woocommerce #order_review table.shop_table td{border:none;padding:3px 5px;text-align:right !important}Code language: PHP (php)