WooCommerce 한 페이지 결제를 만드는 방법

게시 됨: 2021-03-18

장바구니 이탈을 줄이고 전환율을 높이시겠습니까? 이 가이드에서는 판매 증대에 도움이 되도록 플러그인 이 있거나 없는 WooCommerce 한 페이지 결제를 만드는 방법을 배웁니다.

결제가 온라인 상점에서 가장 중요한 페이지 중 하나라는 것은 비밀이 아닙니다. 그러나 많은 사용자가 장바구니를 포기하는 단계이기도 합니다. 최근 연구에 따르면 거의 70%의 쇼핑객이 어느 시점에서 장바구니를 버리고 21%가 계산대에서 장바구니를 버립니다. 왜요? 일반적으로 구매 과정이 너무 길거나 복잡하기 때문입니다.

모든 단일 전자 상거래 사이트에 작동하는 단일 솔루션은 없지만 대부분의 비즈니스에서는 1페이지 결제 페이지가 더 잘 작동합니다. 그렇기 때문에 WooCommerce 스토어에 대한 한 페이지 결제를 생성하면 장바구니 포기를 줄이고 매출을 높일 수 있습니다.

WooCommerce 한 페이지 결제란 무엇입니까?

한 페이지 결제는 결제의 모든 필드를 한 페이지에 표시합니다 . 여기에는 장바구니 내용, 지불 세부 정보, 청구 및 배송 주소, 배송 옵션, 이미지, 텍스트 또는 추가 문의 양식과 같은 기타 정보가 포함될 수 있습니다.

WooCommerce 한 페이지 결제 만들기 - QuadLayers
한 페이지 결제의 예

한 페이지 결제의 주요 목표는 구매 프로세스를 단축하고 장바구니 포기를 줄이는 것입니다. 고객이 한 페이지에 주문하기 위해 모든 정보를 입력하면 프로세스를 완료할 가능성이 높아집니다.

한 페이지 결제의 이점

한 페이지 결제의 이점은 다음과 같습니다.

  • 장바구니 포기를 줄이는 데 도움이 됩니다.
  • 체크아웃 프로세스를 단축
  • 전환율 증가
  • 쇼핑객이 입력해야 하는 모든 정보를 한 페이지에서 볼 수 있으므로 이해하기 쉽습니다.

한 페이지 및 여러 페이지 결제에 대한 자세한 내용은 이 전체 가이드를 참조하세요.

WooCommerce 한 페이지 결제를 만드는 방법

WooCommerce 한 페이지 결제를 만드는 방법에는 여러 가지가 있습니다 .

  1. 플러그인 사용
  2. 프로그래밍 방식으로
  3. 페이지 빌더와 함께
  4. WordPress 대시보드에서

이 섹션에서는 각 옵션을 살펴보고 귀하의 기술과 요구 사항에 가장 적합한 옵션을 선택할 수 있습니다.

1) 플러그인으로 한 페이지 체크아웃 만들기

WooCommerce에서 한 페이지 결제를 만드는 첫 번째 옵션은 플러그인을 사용하는 것입니다. 무료 및 프리미엄 모두 한 페이지 체크아웃 플러그인이 많이 있습니다. 이 데모에서는 WooCommerce Direct Checkout을 사용합니다. 이 플러그인은 체크아웃 프로세스를 단축하고 전환율을 높이는 데 도움이 됩니다. 한 페이지 결제를 생성할 수 있을 뿐만 아니라 불필요한 결제 필드를 제거하고 빠른 구매 버튼을 추가하는 등의 작업을 수행할 수 있습니다.

다이렉트 체크아웃을 통한 한 페이지 체크아웃

Direct Checkout에는 기본 기능이 포함된 무료 버전과 19 USD(일회성 결제)부터 시작하는 더 많은 기능이 포함된 3개의 프리미엄 플랜이 있습니다.

먼저 플러그인을 다운로드합니다. 이 링크나 WordPress 대시보드에서 할 수 있습니다. 활성화 후 WooCommerce > Direct Checkout 으로 이동합니다. 여기서 다음과 같이 설정하여 사용자를 상점 및 단일 제품 페이지에서 직접 결제 페이지로 리디렉션합니다.

  • 장바구니에 추가됨 알림 : "장바구니 보기" 알림을 직접 결제로 대체합니다.
  • 장바구니 링크에 추가됨 : "장바구니 보기" 링크를 직접 결제로 대체합니다.
  • 장바구니 리디렉션 : 장바구니에 추가 버튼의 동작을 변경할 수 있습니다.
  • 장바구니 리디렉션 : 사용자가 장바구니에 항목을 추가한 후 리디렉션할 위치를 선택할 수 있습니다. 이 경우 체크아웃으로 리디렉션합니다.
  • 장바구니 URL 교체 : 쇼핑객이 장바구니에 상품을 추가한 후 결제 페이지로 리디렉션하는 것처럼 장바구니 URL을 결제 링크로 교체합니다.

WooCommerce 한 페이지 결제 만들기 - 직접 결제

이러한 변경 사항은 상점, 단일 제품 및 카테고리 페이지에 적용됩니다. 또한 비활성화할 예정이므로 사용자를 장바구니로 연결하는 링크가 없는지 확인하십시오.

그게 다야! 고객을 제품 및 쇼핑 페이지에서 직접 결제로 리디렉션하여 결제 프로세스를 단순화했습니다. 또한 쇼핑객은 결제 페이지에서 주문을 편집하고 확인할 수 있습니다.

WooCommerce Direct Checkout의 무료 버전을 사용하여 한 페이지짜리 결제를 생성할 수 있지만 더 많은 기능을 통해 결제를 한 단계 더 높이려면 프리미엄 플랜을 확인하세요.

2) 프로그래밍 방식으로 한 페이지짜리 체크아웃 만들기

이 섹션에서는 일부 PHP 스크립트와 CSS 스타일을 사용하여 플러그인으로 만든 한 페이지 체크아웃에 기능을 추가합니다. 따라서 첫 번째 섹션을 살펴보고 단일 페이지 체크아웃을 생성하도록 플러그인을 설치 및 설정하는 것이 좋습니다. 말 그대로 몇 분이 걸립니다.

완료했으면 프로그래밍 방식으로 한 페이지짜리 결제 페이지를 완전히 맞춤설정하는 방법을 살펴보겠습니다.

참고 : 일부 핵심 테마 파일을 편집하므로 시작하기 전에 사이트 백업을 만들고 사이트에 하위 테마를 설치해야 합니다. 이 하위 테마 플러그인을 사용하거나 이 가이드에 따라 직접 만들 수 있습니다.

2.1) 체크아웃 페이지에 제품 메타데이터 추가

사용자가 구매하는 제품에 대한 몇 가지 정보를 추가하는 것으로 시작하겠습니다. 상품명, 썸네일 이미지, 상품설명이 체크아웃 페이지에 표시됩니다.

장바구니 페이지를 비활성화했기 때문에 장바구니에 제품을 추가한 후 쇼핑객은 결제로 리디렉션됩니다. 장바구니 페이지가 숨겨져 있어도 장바구니 페이지에서 모든 제품 정보를 검색하는 데 사용할 수 있습니다.

그렇게 하려면 자식 테마의 functions.php 파일에 다음 코드를 붙여넣기만 하면 됩니다.

 // 제품 메타 데이터를 표시하기 위한 후크
 add_action('woocommerce_checkout_before_customer_details','QuadLayers_product_meta');
 함수 QuadLayers_product_meta(){
 echo '<div class="custom-product"><h2>'를 구매하려고 합니다.
 $cart = WC()->cart->get_cart();
 foreach( $cart as $cart_item_key => $cart_item ){
 $product = $cart_item['데이터'];
 echo $product->get_name()."</h2>";
 echo $product->get_image();
 echo "<span>".$product->get_description()."</span>";
 }
 echo "<h3>아래 양식을 작성하여 주문을 완료하세요</h3>";
 }

이를 테스트하려면 제품에서 구매 버튼을 클릭하고 결제 페이지로 리디렉션된 후 다음과 같이 표시됩니다.

결제 페이지에 제품 메타 데이터 추가

2.2) WooCommerce 결제 템플릿 파일 덮어쓰기

결제 페이지 인쇄를 담당하는 파일은 form-checkout-php 이며 템플릿 폴더의 WooCommerce 플러그인에 있습니다: /woocommerce/templates/checkout.

이 파일을 덮어쓰려면 WooCommerce 플러그인에서 원본 파일을 복사하여 자식 테마의 WooCommerce 디렉터리 내부에 있는 checkout 폴더 에 붙여넣습니다.

화장실 체크아웃 템플릿 파일 덮어쓰기

기본 WooCommerce 체크아웃에서 레이아웃은 두 개의 열로 설정됩니다. 청구서, 배송 및 추가 양식은 첫 번째 열에 표시되고 다른 하나에는 주문 세부 정보가 표시됩니다.

다음과 같이 양식을 둘러싸는 <div> 요소의 HTML 클래스를 col2-set 에서 col1-set 으로 편집하여 이를 변경할 수 있습니다.

 <div 클래스="col1-set">

이 단순 버전 이후에는 모든 양식이 다음과 같이 단일 전각 열에 표시됩니다.

전체 너비 결제 양식

다음으로 다음 스크립트를 사용하여 주문 세부 정보의 제목을 편집하고 "주문"에서 "주문 검토"로 변경합니다.

 <h3><?php esc_html_e( '주문 검토', '우커머스' ); ?></h3>

여기에서 수행할 수 있는 작업의 몇 가지 간단한 예입니다. 자유롭게 더 나아가 자신의 사용자 정의를 만드십시오. 여기에서 모든 기본 WordPress 기능을 사용할 수 있습니다. 체크아웃 후크에 대한 자세한 내용은 이 기사를 참조하세요.

프로그래밍 방식으로 WooCommerce 템플릿을 사용자 지정하는 방법에 대해 자세히 알아보려면 이 전체 가이드를 살펴보세요.

2.3) 결제 페이지에 장바구니 추가

결제 페이지에서 일부 단축 코드를 사용할 수 있으므로 여기에 장바구니를 추가하려면 다음과 같이 WooCommerce 장바구니 단축 코드를 사용할 수 있습니다.

 echo do_shortcode(' [ woocommerce_cart ] ');

주문 세부 정보 바로 앞에 장바구니를 표시하려면 다음 PHP 스크립트를 하위 테마의 functions.php 파일에 붙여넣습니다.

 add_action('woocommerce_checkout_after_customer_details','QuadLayers_add_cart_checkout');
 기능 QuadLayers_add_cart_checkout(){
       echo do_shortcode(' [ woocommerce_cart ] ');
 }

이제 사용자가 결제 양식 끝에 추가한 제품이 포함된 장바구니가 표시됩니다.

결제 페이지에 장바구니 추가

2.4) 결제 페이지에 맞춤 콘텐츠 추가

고객은 주문 내역을 검토한 후 결제 수단을 선택하고 "주문하기"를 클릭하여 구매를 완료할 수 있습니다. 이 블록은 오른쪽 열에 표시되므로 균형 잡힌 디자인을 달성하기 위해 왼쪽에 일부 콘텐츠를 삽입합니다.

이것은 우리가 일부 반품 정책, 지불 방법, 배송 등을 설명하는 functions.php 파일에 붙여넣을 사용자 정의 콘텐츠 기능입니다. 자유롭게 사용자 정의하고 상점에 적용하십시오.

 add_action('woocommerce_checkout_before_order_review','QuadLayers_add_column_before_order_review');
함수 QuadLayers_add_column_before_order_review(){    
    printf(' <div><h3>주문에 대한 추가 정보:</h3>
 <p>매장에서 구매해주셔서 대단히 감사합니다. 다음은 알아야 할 몇 가지 유용한 정보입니다.</p>
 <울>
 <li>최대한 빨리 배송하기 위해 최선을 다하지만 최적의 서비스를 유지하기 위해 제품이 도착하기까지 영업일 기준 최대 2일이 소요될 수 있습니다.</li>
 <li>Google 반품 정책에 따라 구매 후 최대 15일 이내에 교체를 요청할 수 있습니다. <a href="#">여기에서 상점 정책 읽기</a></li>
 <li>신용카드 결제 수단을 선택하면 경우에 따라 배송이 2일 지연될 수 있습니다.</li>
 <li>받은 상품이 마음에 들지 않으면 환불 정책에 따라 환불을 선택할 수도 있습니다.</li>
 <li>할인쿠폰이 있나요? 메모가 있는 경우 여기에서 가져와서 적용할 수 있습니다.</li>
 </ul>
 </div>','우커머스');
}

최종 결과는 다음과 같습니다.

결제 페이지에 사용자 지정 콘텐츠 추가

2.5) 결제 페이지에 CSS 스타일 추가하기

function.php 파일에서 custom-product 라고 하는 자체 클래스를 추가한 것을 볼 수 있습니다. 이 클래스를 사용하여 일부 CSS 스크립트로 콘텐츠의 스타일을 지정할 것입니다. 또한 사용자 정의 클래스를 사용하지 않고 새로운 1페이지 체크아웃 디자인에 최종 터치를 제공할 수 있습니다.

이것은 이 튜토리얼에서 사용한 전체 CSS 스크립트입니다. 하위 테마의 style.css 파일에 복사하여 붙여넣기만 하면 됩니다.

 /* 결제 양식 제목 숨기기 */
.woocommerce-billing-fields > h3:nth-child(1){
    디스플레이:없음;
}
/* 구매하려고 합니다... */
.custom-product > h2:nth-child(1){
    텍스트 정렬: 가운데;
}
/* 이미지 */
img.attachment-woocommerce_thumbnail:nth-child(2){
    여백:자동;
}
/* 설명 */
.custom-product > span:nth-child(3){
    여백:자동;
    너비: 50%;
    디스플레이:블록;
}
/* 주문 완료 ...*/
.custom-product > h3:nth-child(4){
    텍스트 정렬: 가운데;
    여백: 25px 0 25px 0;
}
/* 추가 정보.. */
.custom-product > div:nth-child(8){
    왼쪽으로 뜨다;
    너비:47%;
}
#고객의 세부 사항{
    여백-바닥:40px;
}

참고 : 이 데모에서는 Storefront 테마를 사용했으므로 다른 테마를 사용하거나 고유한 사용자 정의를 추가한 경우 CSS 선택기를 조정해야 할 수 있습니다.

그 후 모든 것이 잘 되었다면 체크아웃 페이지에 다음이 표시되어야 합니다.

한 페이지 체크아웃 샘플 페이지

그게 다야! 프로그래밍 방식으로 완전히 사용자 정의된 WooCommerce 한 페이지 체크아웃 을 만들었습니다.

3) 페이지 빌더로 한 페이지 체크아웃 만들기

WooCommerce에서 한 페이지 결제를 만들고 사용자 지정하는 또 다른 흥미로운 옵션은 페이지 빌더를 사용하는 것입니다. 여러 페이지 빌더가 있습니다. 이 데모에서는 Site Origin을 사용합니다. 백만 개 이상의 활성 설치가 있는 이것은 단순성과 효율성으로 인해 가장 인기 있는 페이지 빌더 중 하나입니다.

프로세스는 대부분의 페이지 빌더와 유사하므로 어떤 페이지 빌더를 사용하든 문제 없이 가이드를 따를 수 있어야 합니다.

먼저 WordPress 저장소에서 Site Origin을 다운로드하여 설치하고 웹사이트에서 활성화합니다. 그런 다음 편집기로 결제 페이지를 열고 이름을 추가합니다. 우리는 이것을 원페이지 체크아웃이라고 부를 것입니다.

보시다시피 결제 페이지는 Gutenberg 블록에 배치된 WooCommerce 단축 코드입니다. 백엔드에서 Gutenberg 블록을 비활성화하면 동일한 단축 코드가 표시되지만 이전 텍스트 편집기에도 표시됩니다. 단축 코드 블록을 삭제하고 페이지 빌더 블록을 추가하기만 하면 됩니다.

이제 페이지 빌더를 사용하여 완전히 사용자 정의된 1페이지 체크아웃 생성을 시작할 수 있습니다. 열에 위젯을 추가하고 원하는 레이아웃으로 설정할 수 있습니다. 삽입해야 함을 명심하십시오.

 [ woocommerce_checkout _체크아웃 ]

단축 코드를 다시 입력하십시오. 그렇지 않으면 작동하지 않습니다.

그리고 여기에 가장 좋은 부분이 있습니다. 페이지 빌더 레이아웃에서 사용 가능한 위젯이나 모듈을 사용할 수도 있습니다. 또한 다른 단축 코드를 포함할 수 있습니다. 장바구니와 "내 계정"은 매우 일반적입니다.

이것은 기본 예이므로 필요에 따라 각 위젯을 조정하고 체크아웃 페이지를 사용자 정의해야 합니다. 또한 각 페이지 빌더는 다르게 작동하므로 프로세스가 비슷하더라도 일부를 조정해야 할 수 있습니다. 일반적으로 전체 너비가 있고 사이드바가 없는 템플릿이 일반적으로 가장 잘 작동합니다.

4) Gutenberg 블록 편집기를 사용하여 한 페이지 체크아웃 만들기

마찬가지로 Gutenberg 블록 편집기를 사용하여 WooCommerce 한 페이지 결제를 사용자 지정할 수 있습니다. 이를 위해 WordPress 대시보드에서 체크아웃 페이지를 열면 체크아웃 단축 코드가 있는 블록이 표시됩니다. 블록 추가 버튼( + )을 클릭하고 열 을 선택하여 이 페이지에 더 많은 블록을 추가해 보겠습니다.

WooCommerce 한 페이지 결제 만들기 - Gutenberg

여기에서 사용 가능한 블록과 단축 코드를 사용하여 결제 페이지를 완전히 사용자 지정할 수 있습니다. 또는 코딩 기술이 있는 경우 코드 블록과 함께 고유한 HTML 코드를 삽입하여 결제를 편집할 수도 있습니다. 이 데모에서는 카트와 내 계정 단축 코드를 2개의 열에 추가하여 다음과 같이 표시합니다.

이것이 Gutenberg 블록 편집기를 사용하여 WooCommerce에서 한 페이지 결제를 쉽게 만드는 방법입니다.

최종 팁

  • 1페이지 결제를 생성할 때 항상 결제의 주요 목표인 고객이 가능한 한 쉽게 주문할 수 있도록 하는 것을 염두에 두십시오. 이 목표에서 사용자의 주의를 산만하게 하는 콘텐츠를 피해야 합니다.
  • 사용자가 "주문하기" 버튼을 누르기 전에 검토해야 하는 모든 정보는 동일한 페이지에서 사용할 수 있어야 결제 페이지에서 모든 작업을 수행할 수 있습니다. 필요한 모든 정보를 포함하고 사용자를 다른 URL로 연결하는 링크를 삽입하지 마십시오.
  • 사용자는 구매할 때 긴 콘텐츠 페이지를 좋아하지 않습니다. 일을 단순하고 깔끔하게 유지하고 효율적이고 전문적인 결제 페이지를 만드는 데 집중하세요.

결론

대체로 한 페이지 결제는 구매 프로세스를 단축하고 장바구니 포기를 줄이며 전환율을 높이는 데 도움이 됩니다. 어떤 경우에는 다중 페이지 계산이 더 효과적일 수 있지만 대부분의 상점에서는 계산 시간이 짧을수록 더 효과적입니다.

이 가이드에서는 WooCommerce에서 한 페이지 결제를 만드는 다양한 방법을 보았습니다.

  • 플러그인으로
  • 프로그래밍 방식으로
  • 페이지 빌더와 함께
  • 구텐베르크 블록 편집기 사용

빠르고 효율적인 솔루션을 원한다면 Direct Checkout 을 사용하는 것이 최선의 선택입니다. 이 프리미엄 플러그인을 사용하면 몇 분 안에 한 페이지 결제를 구축할 수 있으며 결제를 개선하고 매출을 높이는 데 도움이 되는 몇 가지 기능도 포함되어 있습니다. 예를 들어 체크아웃 필드를 제거하고 빠른 구매 및 빠른 보기 버튼 등을 추가할 수 있습니다. 추가 플러그인을 설치하고 싶지 않고 페이지 빌더를 사용하는 경우 Gutenberg 블록 편집기 또는 페이지 빌더를 사용하여 체크아웃 페이지를 만들 수 있습니다.

반면에 코딩 기술이 있는 경우 결제 페이지를 편집할 수 있는 더 많은 옵션이 있습니다. Direct Checkout 플러그인으로 결제를 생성한 후 PHP 및 CSS 스크립트를 추가하여 결제를 완전히 맞춤화할 수 있습니다. 이 기사에서는 몇 가지 예를 보았지만 더 많은 작업을 수행할 수 있습니다. 그것들을 베이스로 자유롭게 사용하고 가장 적합한 것을 찾기 위해 놀아보십시오.

WooCommerce에서 한 페이지 결제를 생성할 때 가장 좋아하는 방법은 무엇입니까? 우리가 포함시켜야 할 다른 것을 알고 있습니까? 아래 의견 섹션에서 알려주십시오!