Word Cracker의 잡다한 정보 모음

워드프레스 우커머스 쇼핑몰에서 ‘바로 구매’/’쇼핑 계속하기’ 버튼 추가하기

13

워드프레스의 우커머스(WooCommerce) 쇼핑몰에서 제품 상세 페이지의 “장바구니” 버튼을 클릭하면 제품이 장바구니에 담깁니다.

장바구니” 버튼을 “바로 구매” 또는 “구매하기” 버튼으로 바꾸어서 고객이 버튼을 누르면 곧바로 체크아웃 페이지로 이동하도록 할 수 있습니다.

WooCommerce Direct Checkout 플러그인

WooCommerce Direct Checkout 플러그인은 플러그인 그대로 곧바로 체크아웃 페이지로 이동하도록 해주는 플러그인입니다. 이 플러그인을 설치한 후에 “우커머스” > “Direct Checkout” 메뉴에서 기능을 활성화해야 합니다.

Direct Checkout - 워드프레스 우커머스 바로 구매 버튼 추가하기 플러그인

“우커머스” > “Direct Checkout” 메뉴를 클릭하면 다음과 같은 화면이 표시됩니다.

Direct Checkout Options - 워드프레스 우커머스 바로 구매하기 버튼 추가하기

  • (1) Enable을 체크해야 이 기능이 활성화됩니다.
  • (2) “Add Continue Shopping Button“(계속 쇼핑하기 버튼)을 추가합니다.
  • (3) “Add to Cart“(장바구니) 버튼의 이름을 바꿉니다.
  • (4) 버튼을 클릭했을 때 이동할 페이지를 지정합니다. 기본값은 체크아웃 페이지입니다. 다른 페이지를 지정할 수 있습니다.

실제로 적용해보면 다음과 같이 상품 상세 페이지가 바뀝니다(실제 버튼 모양이나 상품 페이지 레이아웃은 테마에 따라 다릅니다).

워드프레스 우커머스 장바구니 버튼을 바로 구매하기 버튼으로 바꾸기

Add Continue Shopping Button” 옵션을 체크하면 다음과 비슷하게 바뀝니다.

워드프레스 우커머스 - 쇼핑 계속하기 버튼 추가하기

Salient 테마에서 테스트를 했는데, 테마의 영향인지 “Continue Shopping” 버튼 부분의 레이아웃이 약간 어색하게 나옵니다. 사용 중인 워드프레스 테마로 인해 이 부분의 레이아웃이 깨져나오는 경우 CSS를 통해 조정할 수 있습니다. 그리고 “Continue Shopping” 문구도 플러그인 소스 파일을 직접 수정하거나 CSS를 통해 한글로 바꾸어주도록 합니다.

함수를 이용하여 장바구니 버튼을 “바로 구매” 버튼으로 바꾸기

다음과 같은 두 가지 함수를 이용하여 “장바구니” 버튼을 “바로 구매” 버튼으로 쉽게 바꿀 수 있습니다.

// 곧바로 체크아웃시키기
add_filter ('add_to_cart_redirect', 'redirect_to_checkout');

function redirect_to_checkout() {
return WC()->cart->get_checkout_url();
}

// 장바구니 텍스트 변경하기

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );    // 2.1 +

function woo_custom_cart_button_text() {

return __( '바로 구매', 'woocommerce' );
}

첫 번째 함수는 장바구니 페이지 대신 체크아웃 페이지로 리디렉션시키는 함수이고, 두 번째는 “장바구니” 버튼 텍스트를 바꾸는 함수입니다. “바로 구매” 대신에 “구매하기” 또는 다른 이름으로 변경이 가능합니다.

위의 함수를 적용하면 WooCommerce Direct Checkout 플러그인과 동일한 효과를 얻을 수 있습니다. 만약 상품 설명 페이지에 “쇼핑 계속하기” 버튼을 추가하려면 WooCommerce Direct Checkout 플러그인을 사용하도록 합니다.

Woocommerce Quick Buy 플러그인

“장바구니” 버튼은 그대로 두고 “바로 구매” 버튼을 추가하려면 Woocommerce Quick Buy 플러그인을 사용할 수 있습니다. 이 플러그인의 사용 방법은 다음 YouTube 동영상을 참고하시기 바랍니다.

Woocommerce Quick Buy 플러그인을 사용하면 “바로 구매”(Quick Buy) 버튼의 라벨, 버튼을 눌렀을 때 이동할 페이지(사용자 지정 가능), 클래스 지정, 표시할 곳 등을 설정할 수 있습니다. 그리고 Add to Cart(장바구니) 버튼과 함께 Quick Buy(바로 구매) 버튼이 추가됩니다. 버튼을 추가한 후에 CSS 작업이 필요할 수 있습니다.

WooCommerce-Quick-Buy

예를 들어 Enfold 테마의 Shop 데모에 Quick Buy 버튼을 테스트로 가해보니 위와 같이 위치가 어색하게 추가됩니다. 이 경우 CSS나 jQuery 등을 통해 위치를 Add to cart 뒤로 이동시켜주도록 합니다.

장바구니 페이지에 “쇼핑 계속하기” 버튼 추가하기

장바구니 보기 페이지에 “쇼핑 계속” 버튼을 추가하려면 다음 함수를 사용합니다.

add_action( 'woocommerce_after_cart_totals', 'tl_continue_shopping_button' );
function tl_continue_shopping_button() {
$shop_page_url = get_permalink( woocommerce_get_page_id( 'shop' ) );

echo '<div class="">';
echo ' <a href="'.$shop_page_url.'" class="button">쇼핑 계속하기</a>';
echo '</div>';
}

그러면 다음 그림과 같이 “쇼핑 계속하기” 버튼이 추가됩니다.

워드프레스 우커머스 장바구니에 쇼핑 계속하기 버튼 추가하기

참고:

Related Posts

Comments

13 Comments
  1. MP TeamK says

    함수를 이용하여 장바구니 버튼을 “바로 구매” 버튼으로 바꾸기 는 함수는 어디파일에 넣는거죠?

    1. Word says

      안녕하세요?
      모든 함수 코드는 테마의 함수 파일에 추가하시면 됩니다. 반드시 차일드 테마를 만든 후에 작업하시기 바랍니다. 자식 테마를 쉽게 만드는 방법은 http://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%9B%90%ED%81%B4%EB%A6%AD%EC%9C%BC%EB%A1%9C-%EA%B0%84%ED%8E%B8%ED%95%98%EA%B2%8C-%EC%B0%A8%EC%9D%BC%EB%93%9C-%ED%85%8C%EB%A7%88-%EC%9E%91%EC%84%B1/ 글을 참고해보시기 바랍니다.

  2. 오정민 says

    테마와 충돌이 있는지 사용할수 있는 플러그인이 WooCommerce Direct Checkout 밖에 없습니다. 본 플러그인에서 바로구매는 그대로 두고 Continue Shopping 버튼을 장바구니 버튼 기능으로 변경할 수 있는 방법이 있을까요?

    1. Word says

      플러그인을 살펴보니 장바구니 버튼을 바로 구매 버튼이나 다른 버튼을 사용할 수 있고 Continue shopping(쇼핑 계속하기) 버튼은 옵션으로 추가할 수 있도록 되어 있네요. 원하는 경우 플러그인을 직접 수정하셔야 할 것 같습니다. 그런 경우 나중에 플러그인이 업데이트되면 수정 사항이 사라질 것입니다. 가급적 다른 방법을 강구해보시는 것이 좋을 듯 합니다.

      1. 오정민 says

        답변 감사드립니다. 바로구매와 장바구니를 같이 운용할 수 있는 다른 방법이 있을까요? 가령 바로구매는 플러그인을 활용해 사용할 수 있도록 설정하고 다른 글에 올려주신 add_action(‘woocommerce_after_add_to_cart_button’,’cmk_additional_button’);
        function cmk_additional_button() {
        echo ‘쇼핑 계속하기’;
        } 와 같은 테그를 변형하여 장바구니로 사용할 수 있을지 문의드립니다.

      2. Word says

        안녕하세요?

        한 번 시도해보시고 잘 안 되면 http://www.thewordcracker.com/support-system/ 페이지에서 서비스를 의뢰하실 수 있습니다.

        그런데 테마와 충돌이 발생한다고 하셨는데, 본문에 있는 코드는 제대로 작동하나요?

      3. 오정민 says

        네 올려주신 코드는 정상적으로 작동이 됩니다. 다만 기존의 장바구니 버튼을 바로구매 버튼으로 변경하면 해당 코드도 체크아웃으로 이동이 되므로 코드를 수정해 장바구니 기능으로 쓸수 있는지 문의드렸습니다.

      4. Word says

        원하는 내용이 “장바구니” 버튼 옆에 “바로 구매” 버튼을 추가하고 싶다는 것으로 들리네요.

        위의 올린 코드는 “장바구니 보기” 페이지에서 사용 가능한 페이지입니다.

        장바구니 버튼 옆에 “바로 구매” 버튼을 추가하는 코드를 찾아보시면 좋을 듯 합니다.

      5. 오정민 says

        네 결국은 바로구매 옆에 장바구니 버튼을 두개 모두 사용하고자 하는 것입니다. 해외 사이트를 검색해도 뚜렷한 해결책이 안보여 문의 드렸습니다. 답변 감사드립니다.

      6. Word says

        Woocommerce Quick Buy 플러그인을 사용하면 간편한데요, 코드로 직접 해결하고 싶다면 우커머스 필터/액션 목록을 확인하여 원하는 기능을 넣을 수 있는지 체크해보시기 바랍니다:
        https://docs.woocommerce.com/wc-apidocs/hook-docs.html

      7. Word says

        위의 코드를 자세히 보니까 장바구니 보기 페이지에서 ‘쇼핑 계속하기’ 버튼을 추가하는 소스이네요. 직접 적용하기는 어려울 것 같습니다.

  3. Sang-mook Lee says

    안녕하세요 운영자님.
    작성하신 여러글들을 읽으며 감탄을 연발하고 있습니다.
    하지만 어디에서 코드를 넣어야 할지 난감합니다.
    이런 코드는 워드프레스 어디에서 삽입을 해야 되는건가요?

    직접소소코드를 열어서 넣어야 한다면 어느 파일을 열어서 넣어야 하는지
    워드프레스 관리자에서 넣는다면 어디에서 관련 코드를 넣어야 하는지 궁금합니다.

    1. Word says

      안녕하세요?

      블로그를 방문해주셔서 감사합니다.

      문의하신 내용은 http://www.thewordcracker.com/basic/how-to-add-custom-codes-to-wordpress/ 글을 참고해보세요.

Leave A Reply

Your email address will not be published.