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

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

워드프레스의 우커머스(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>';
}

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

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

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.