현재 버전은 아래의 글과 달라졌습니다. “2. 추가사용법”은 사용할 필요 없이 플러그인 기능에 추가되었고, 기본사용법의 크래스를 통한 레이아웃 잡는 방법도 달라졌습니다.

1. 기본 사용법

우커머스를 이용한 쇼핑몰 제작을 하게 되면 각각 상품 목록에서의 구매 진행 절차는 ‘장바구니 담기’- ‘결제’ 순서입니다.
이때 ‘장바구니’담기 과정을 생략하고 바로 결제화면으로 넘어갈 수 있는 기능인 ‘바로 구매’ 버튼을 제공하는 플러그인이 국내에서 몇몇 업체를 통해 유료로 판매되고 있습니다. (2015.10월 현재)
이 기능이 가능한 무료 플러그인이 바로 Woocommerce Quick Buy 이고,Woocommerce Quick Buy 플러그인의 사용법을 알아보고자 합니다.

플러그인을 설치하면 아래의 그림과 같이 우커머스 – 설정 – 상품 탭 내에 ‘Wc quick buy’ 서브 탭이 생성됩니다.

바로구매 버튼 넣기 플러그인 설정

Wc quick buy 탭안으로 들어가면 아래와 같이 옵션 설정 화면이 나타납니다.

바로구매 버튼 넣기 플러그인 설정

  1. Redirect Location : 추가되는 Buy Now(바로구매) 버튼을 눌렀을 경우 어느 화면으로 전환될 것인가를 설정합니다. 장바구니 화면과 결제 화면을 선택할 수 있습니다. ‘Checkout Page’를 선택합니다.
  2. Automatically Add Button : 자동으로 Buy Now(바로구매) 버튼을 추가할 것인지를 정합니다. yes를 선택하면 개별 상품 페이지 전체에 바로구매 버튼이 삽입됩니다. 이 플러그인이 제공하는 숏코드를 사용해 개별적으로 다루고 싶을 때는 no를 선택합니다.
  3. Position : Buy Now(바로구매) 버튼의 삽입위치를 선택합니다. ‘장바구니’버튼의 앞과 뒤 두 군데 중 하나를 선택합니다.
  4. Show Quick Buy Button For : 단순상품과 옵션상품 중 Buy Now(바로구매) 버튼을 사용하고 싶지 않은 경우는 선택 삭제하면 됩니다.
  5. Quick Buy Button Style : 플러그인에서 제공하는 Buy Now(바로구매) 버튼은 기본값만 가진 디자인입니다. 그래서 대부분의 테마와 이질감이 있을 것입니다. 이 섹션을 이용해 css 코드를 입력 할 수 있습니다.
  6. Quick Buy Button Text : Buy Now(바로구매) 버튼에 나타 날 텍스트를 입력합니다. 예)바로구매
  7. Quick Buy Button Class : Buy Now(바로구매) 버튼의 button 태그 내에 들어갈 class 속성을 내가 임의의 값으로 추가 설정해 줄 수 있습니다.

wc-quick-buy_05

위의 이미지처럼 플러그인을 활성화하면 기본 ‘바로구매’버튼이 삽입됩니다.

실제 적용한 화면(아래의 이미지)의 경우 설정화면의 5번 ‘Quick Buy Button Style’ 칸에 추가한 CSS는 아래와 같습니다.
(깔끔한 코드는 아니지만 참고가 될 수 있을까 해서 올려봅니다. 테마는 아바다 테마입니다. 코드의 화합 여부는 테마에 따라서 다릅니다. )

.summary-container form.cart { width:60%;display:inline-block;}
.summary-container form.wc_quick_buy_form {width:35%;display:inline-block;}
.summary-container .wc_quick_buy_button { background-color: #3a5795; border: 0px; color: white; line-height: 14px; padding: 9px 20px; border-radius: 2px; cursor:pointer;}
.summary-container .wc_quick_buy_button:hover { background-color: #445d93; border: 0px; color: white; line-height: 14px; padding: 9px 20px; border-radius: 2px;}

wc-quick-buy_03

2.추가 사용법

Woocommerce Quick Buy 플러그인은 ‘바로구매’버튼을 상품의 개별페이지에만 제공합니다.

만약 shop(상점)화면이나 관련 상품 화면, 카테고리나 태그 어카이브 리스트의 상품목록에도 이 바로구매 버튼을 삽입하고 싶다면 다음과 같이 커스터 마이징 해야 합니다.

아래에서는 우커머스 플러그인이 제공하는 ‘woocommerce_loop_add_to_cart_link’ 훅을 사용하였습니다.
더 부드럽게 융합할 수 있는 방법이 있다면 어떤 식으로든 커스터마이징은 가능합니다.

현재 사용 중인 테마의 functions.php파일을 열어서 ( 기본적으로 차일드 테마를 사용할것을 권장합니다. 차일드테마 사용방법 )

아래와 같은 코드를 추가합니다.

add_filter('woocommerce_loop_add_to_cart_link','custom_woocommerce_loop_add_to_cart_link');
function custom_woocommerce_loop_add_to_cart_link() {
	  global $product;
	
	   $cart_link= sprintf( '%s',
		esc_url( $product->add_to_cart_url() ),
		esc_attr( $product->id ),
		esc_attr( $product->get_sku() ),
		esc_attr( isset( $quantity ) ? $quantity : 1 ),
		$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
		esc_attr( $product->product_type ),
		esc_html( $product->add_to_cart_text() )
	).do_shortcode('[[wc_quick_buy]]');
	   return $cart_link;
};

코드의 내용은 우커머스에서 장바구니 버튼을 추가하는 기본코드에 이 플러그인이 제공하는 바로가기 버튼의 숏코드(shortcode)를 추가한 것입니다. (맨 아래에서 세번째줄)

그러면 아래와 같이 이제껏 없었던 버튼이 상점 화면의 상품 목록에 나타납니다.

wc-quick-buy_04

이것 또한 디자인이 기본 버튼이고, 위치 또한 정확하지 않으므로 다음과 같은 CSS 코드를 위의 설정 화면 5번 입력 칸에 추가로 입력합니다.

.products .wc_quick_buy_form {width: 80px; display: inline-block;float: left; margin-left: 10px;}
.products .wc_quick_buy_form button { position: relative;top: -2px;background-color: white !important; border: none; cursor:pointer; color:#333333;}

적용된 이미지는 다음과 같습니다.

wc-quick-buy_06

3.결론

우커머스는 좋은 플러그인이지만 아직도 필요로 하는 기능들이 많이 있습니다. 그중 하나였던 ‘바로구매’버튼 기능을 구현하기 위해 적당한 플러그인 인 것 같습니다.
물론 깨끗한 디자인을 위해서는 CSS를 어느 정도 알아야 한다는 단점은 있으나, 기능구현 자체만으로도 유익한 플러그인이 틀림없을 것입니다.

인기글
카페24 웹호스팅 보안서버 SSL 인증서 443 포트 사용
인스타그램 Access Token 과 UserID 가져오는 방법
FTP 파일질라 전송시 한글파일 누락
워드프레스 도메인변경
워드프레스가 제한하는 파일을 업로드 하는 방법
워드프레스 우커머스 쇼핑몰 플러그인 한국형 배송 설정 정리
워드프레스 쇼핑몰 플러그인 우커머스 설정
워드프레스 업로드파일 용량 제한 올리기
워드프레스 우커머스 배송 지역(Shipping Zones) 설정
워드프레스 우커머스 쇼핑몰 결제화면 추가 입력 필드 만들기

22개의 댓글이 있습니다.

  1. 안녕하세요 글 잘 봤습니다:)

    http://etourismkorea.cafe24.com/product/seoul-grevin-wax-museum-discount-ticket/

    위 사이트가 지금 개발 중인 사이트 인데 보시는 것과 같이 Add to cart 버튼과 Book now 버튼이 사이즈가 다르고 두 버튼이 붙어 있는 것을 보실 수 있습니다.

    위의 코드를 입력해보아도 아무런 변화가 없습니다ㅠㅠ
    어떻게 해야 보기 좋게 버튼이 배치가 될까요…

    감사합니다.

    1. 사이즈 관련은 the 7 테마를 사용하여 해결이 되었고 붙어있는 부분을 떨어트릴 수 있으면 좋겠습니다..ㅎㅎ

  2. 안녕하세요.

    덕분에 많이배워가네요!

    비회원이 바로구매 버튼을 클릭시 로그인페이지로 이동하는 방법은 혹시 없을까요ㅠ

    1. .single-product .summary-container .quick_buy_container { width: 100%; text-align: center; }
      .single-product .summary-container .wc_quick_buy_button { margin-left: 0px !important; }

      두줄을 style.css 에 추가해 보세요.

      1. 아랫줄을
        .single-product .summary-container .wc_quick_buy_button { margin-left: 0px !important; width: 100%; }

        로 바꿔보세요.

      2. 정말 감사합니다. 덕분에 잘 해결되었습니다 ㅠㅠ

        여기서 워드프레스 관련 정보 많이 얻어 갑니다

        자주 들르겠습니다~!

  3. 안녕하세요.
    WPBOX로 많은 도움을 받고 있습니다.
    퀵바이 플러그인 설치 후 여기에 나와있는 설명데로 CSS코드를 버튼 스타일란에 복사 후 붙여넣기 했는데 버튼 스타일에 아무런 변동이 없습니다다.
    style.css 에도 추가 해봤으나 기본우카머스 스탈일로만 보입니다.
    도움이나 의견 감사하겠습니다.

  4. 안녕하세요. 등재하신 내용으로 많은 도움이 되고 있습니다.
    다름이 아니라, 말씀하신 설정화면의 5번 ‘Quick Buy Button Style’ 칸에
    올려주신 코드를 추가했는데, 회색버튼으로 나타납니다. 아바다 테마 버튼속성으로
    변경하려면, class를 변경해될껏같은데요. 어떻게 변경하는지 알 수 있을가요?
    Wc quick buy 플러그인에서 클래스를 추가해보니 적용이 안되네요.

    1. 현재 플러그인은 업데이트가 많이 되어 위의 css 가 적용되지 않습니다.
      현재 wpbox에 적용된 코드의 모음을 보면 (따로 추가 class 없음, 상품상세페이지, 카트버튼 오른쪽 설정 기준)

      .single-product .summary-container .wc_quick_buy_button {
          margin-left: 10px;
          padding: 13px 29px !important;
          line-height: 17px;
          font-size: 14px;
          background: #3a5795;
          color: white;
          border: none;
          border-radius: 2px;
          font-weight: 700;
      }
      
      .single-product .summary-container .wc_quick_buy_button:hover {
          background: #35baf2;
          color: #ffffff;
      }
      
      .single-product .summary-container .quick_buy_container {
          float: left;
      }

      입니다. 참고하세요 ^^

      1. 정말,,, 감사합니다. 이틀동안 이것저것 다해봤는데, 알려주신 소스추가하니 변경되네요. 정말 감사합니다.

    1. 우커머스가 2.6으로 업데이트 하면서 나타난 현상같습니다.
      플러그인 개발자가 업데이트 할때 까지 사용하지 않거나, 이전 우커머스 버전을 사용하면 됩니다.

  5. 바로 결재를 적용한 후 바로 결재를 눌렀을 시 그 상품만 결재해야 하는데,,,,장바구니 전체에 있는것이 결재창에 보여지는데,,

    이것은 어떻게 적용하나요?

    바로결재란 말 자체가 그 상품만 결재를 할려고 하는데,,,장바구니에 상품이 있었더니,,결재창에 장바구니까지 전부 결재가 보여서요,,,

    1. 네 이 플러그인은 현재 바로구매 클릭시 클릭한 것만 바로 구매할 것인지 아니면 장바구니에 있던것 까지 모두 한꺼번에 결제창으로 가져갈 것인지를 선택하는 옵션은 없습니다.

  6. 안녕하세요, 덕분에 바로결제 플러그인을 깔아서 설치해보았는데요,

    제품의 수량을 늘리고 바로결제를 클릭해도 1개씩밖에 결제가 안 되던데 혹시 이건 어떻게 하는 것인지 잘 모르겠더라구요,,

    이곳저곳 찾아봐도 잘 안나오는 것 같아, 간단한 것이라면 도움을 좀 부탁드려도 될까요?

    감사합니다.

    성민현 올림.

댓글 남기기

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