Woocommerce Quick Buy – 플러그인 : 우커머스 상품목록에 바로구매 버튼 넣기

현재위치:///Woocommerce Quick Buy – 플러그인 : 우커머스 상품목록에 바로구매 버튼 넣기
현재버전은 아래의 글과 달라졌습니다. “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는 아래와 같다.
(깔끔한 코드는 아니지만 참고가 될수 있을까 해서 올려본다. 테마는 아바다 테마이다. 코드의 화합여부는 테마에 따라서 다르다. )

wc-quick-buy_03

2.추가 사용법

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

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

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

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

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

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

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

wc-quick-buy_04

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

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

wc-quick-buy_06

3.결론

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

| 2017-06-28T10:05:25+00:00 2015 10 09|카테고리: 플러그인|Tags: , , , , , , , |22 개의 댓글

글쓴이 :

22 Comments

  1. Etourism 2018년 5월 2일 - 9:59 오전 - 답글쓰기

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

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

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

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

    감사합니다.

    • Etourism 2018년 5월 2일 - 10:47 오전 - 답글쓰기

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

  2. PPAP 2017년 2월 18일 - 8:45 오후 - 답글쓰기

    .wc_quick_buy_button {
    background-image: url(http://gharbazar.pk/wp-content/uploads/2014/01/red-buy-now.jpg); !important
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    /*background-position: 50% 50%;*/
    height: 146px;
    width: 380px;
    }

  3. noeul 2016년 12월 22일 - 2:56 오후 - 답글쓰기

    안녕하세요.

    덕분에 많이배워가네요!

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

  4. picter 2016년 10월 21일 - 12:13 오전 - 답글쓰기

    http://picter.co.kr/product/shop/1006/

    버튼이 카트랑 똑같이 중앙으로 오고 싶은데 어떻게 하죠?ㅠㅠ

    • wpbox 2016년 10월 23일 - 6:25 오후 - 답글쓰기

      .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 에 추가해 보세요.

      • picter 2016년 10월 24일 - 12:41 오후 - 답글쓰기

        감사합니다. 센터는 맞춰졌는데 바탕 박스를 장바구니와 같이 긴 박스로 할 순 없을까요?

        • wpbox 2016년 10월 24일 - 4:16 오후 - 답글쓰기

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

          로 바꿔보세요.

          • picter 2016년 10월 25일 - 11:52 오전

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

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

            자주 들르겠습니다~!

  5. 김지원 2016년 8월 18일 - 11:42 오전 - 답글쓰기

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

    • wpbox 2016년 8월 19일 - 3:48 오전 - 답글쓰기

      혹시 아래 댓글들 중에 적혀있는 대로 해 보셨나요?

  6. 심상엽 2016년 7월 13일 - 10:30 오전 - 답글쓰기

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

    • wpbox 2016년 7월 14일 - 12:53 오후 - 답글쓰기

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

      입니다. 참고하세요 ^^

      • 심상엽 2016년 7월 14일 - 8:40 오후 - 답글쓰기

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

        • wpbox 2016년 7월 14일 - 11:02 오후 - 답글쓰기

          잘 되었다니…
          저도 좋습니다. ^^

  7. gom1009 2016년 6월 21일 - 1:13 오후 - 답글쓰기

    테마와 플러그인 업데이트이후 버튼이 사라졌는데 해결방안이 있을까요?

    • wpbox 2016년 6월 21일 - 2:32 오후 - 답글쓰기

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

  8. 오훈 2016년 3월 7일 - 2:07 오후 - 답글쓰기

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

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

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

    • wpbox 2016년 3월 7일 - 11:45 오후 - 답글쓰기

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

    • JH 2016년 12월 13일 - 3:52 오전 - 답글쓰기

      저도 이와 같은 기능을 원하고 있는데 다른 방법을 알고계신분 계신가요?

  9. 성민현 2015년 10월 26일 - 4:31 오전 - 답글쓰기

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

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

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

    감사합니다.

    성민현 올림.

댓글 쓰기