WooCommerce 체크아웃 페이지를 사용자 정의하고 수익을 높이는 7가지 쉬운 방법

WooCommerce 결제 페이지를 사용자 정의하는 방법을 찾고 계십니까?

결제 페이지는 구매 프로세스에서 가장 중요한 단계 중 하나입니다. 온라인 상점을 운영하는 경우 전환율을 높이려면 맞춤화에 집중해야 합니다.

이 가이드에서는 WooCommerce 체크아웃 페이지 사용자 지정, 그렇게 하는 것의 이점, Elementor 및 CartFlows를 사용하여 직접 쉽게 디자인할 수 있는 방법에 대해 설명합니다.

시작하자!

체크아웃 페이지란 무엇입니까?

결제 페이지는 결제를 완료하기 전에 구매자에게 표시되는 마지막 페이지입니다. 이 페이지는 고객, 배송 세부 정보(필요한 경우), 결제 정보 및 주문 이행에 필요한 기타 세부 정보를 수집하는 데 도움이 됩니다.

기본 WooCommerce 결제 페이지는 다음과 같습니다.

이것은 아주 정상적인 것처럼 보입니다. 맞춤화에 대해 논의하는 이유는 무엇입니까?

함정이 있습니다.

WooCommerce에서는 표시되는 필드를 편집할 수 없습니다. 따라서 디지털 제품을 판매하는 경우에도 주소 필드를 표시해야 합니다.

그런 산만.

Woocommerce 결제 페이지를 사용자 정의해야 하는 3가지 이유

Baymard Institute에 따르면 카트의 70%가 버려진다고 합니다. 이는 사용자의 대다수가 절대 구매하지 않을 것임을 의미합니다.

결제 경험을 사용자 지정하면 장바구니 포기를 줄이는 데 도움이 됩니다.

맞춤형 WooCommerce 체크아웃 페이지를 사용하면 소셜 증거 요소를 추가하여 신뢰를 구축하고 관련 제품을 표시하여 평균 주문 금액(AOV)을 높이며 웹사이트 스타일에 맞게 전체 페이지를 다시 디자인할 수도 있습니다.

이러한 수정 사항은 미학적으로 보기 좋을 뿐만 아니라 맞춤형 체크아웃 페이지도 훨씬 더 잘 변환됩니다.

이 마지막 단계의 사용자 지정에 시간을 소비해야 하는 3가지 주요 이유에 대해 알아보겠습니다.

1. 사용자 경험 개선

디지털 제품을 판매하는 경우 기본 WooCommerce 결제는 산만할 정도로 오래 걸립니다. 실제 제품의 경우 브라우저에 저장된 데이터를 사용하여 청구지 및 배송지 주소를 자동으로 채울 수 있습니다.

이것이 WooCommerce 결제 페이지를 사용자 정의해야 하는 주요 이유입니다.

브라우저는 사용자가 옵트아웃하지 않는 한 사용자의 이름, 전화번호, 주소 및 카드 세부정보까지 저장합니다.

대부분의 사용자는 기본값으로 작업하므로 동일한 기능을 활용하여 체크아웃 속도를 높일 수 있습니다.

가능한 경우 이러한 세부 정보를 사용하여 양식을 최대한 많이 자동으로 채우십시오. 그렇게 하면 고객이 구매하는 제품에서 주의가 산만해지는 데 소비해야 하는 시간을 줄일 수 있습니다!

전환율을 높일 방법을 찾고 있는 모든 전자 상거래 기업가는 아직 시도하지 않은 경우 이를 시도해야 합니다.

2. 전환 최적화

결제 페이지에 도달한 고객은 구매 결정을 앞두고 있습니다. 그들은 아직 결제를 하지 않았기 때문에 언제든지 뒤로 버튼을 누를 수 있습니다.

사람들이 카트를 버리는 데에는 여러 가지 이유가 있습니다.

다음은 몇 가지 주요 이유입니다.

• 신뢰의 부족
• 높거나 예상치 못한 운송 비용
• 복잡한 형태

신뢰는 사용자가 계속할지 여부를 결정하는 #1 요소입니다.

고객은 약속을 지키고 상품을 집으로 배달하기 위해 상점을 신뢰할 수 있어야 합니다.

그렇게 하려면 페이지에 신뢰 요소를 추가해야 합니다.

그런데 왜 그걸로 그만둬?

아래와 같은 체크아웃 페이지 사용후기를 사용하여 소셜 인증을 통해 신뢰를 높입니다.

후기는 고객의 막판 의심을 해결하고 고객이 처음으로 제품을 구매할 때 믿음을 갖도록 도와줍니다.

초기 구매가 이루어지면 추가 제안으로 사용자를 업셀링/다운셀링하는 것이 훨씬 쉽습니다.

3. 평균 주문 가치(AOV) 증가

주문 범프, 상향 판매, 하향 판매 및 할인 코드는 AOV를 높이는 데 도움이 될 수 있습니다. 이 모든 것이 기본 결제 페이지에서 가능한 것은 아닙니다.

주문 범프 + 회원 평가 콤보는 신뢰와 흥분을 강화하는 강력한 방법입니다.

결제 페이지를 사용자 정의하면 다음과 같은 다양한 요소를 추가할 수 있습니다.

• AOV 향상
• 고객과의 관계 구축
• 그들이 당신에게서 더 많은 것을 구매하는 것에 대해 기분이 좋아지게하십시오!

주문이 급증할 때 관련 제품을 제안하는 것은 충동을 불러일으키고 장바구니에 더 많은 제품을 추가하고 싶어지게 만듭니다.

또한 귀하가 자신의 요구 사항을 이해하는 것을 보고 즉시 귀하와 연결하는 데 도움이 됩니다.

이것은 우리가 모든 상점에 대해 만들고자 하는 윈-윈 상황입니다!

결제 페이지 사용자 지정을 시작하는 방법

사용자 지정을 시작하기 전에 목표를 이해해야 합니다.

다음 목표 중 하나를 가질 수 있습니다.

• 더 빠른 체크아웃을 위해 페이지를 더 짧게 만드세요
• 원클릭 결제로 충동 구매 유도
• 제안을 통해 AOV를 높이세요
• 장바구니 포기 줄이기
• 브랜딩 개선
• 또는 웹사이트에 맞게 스타일을 수정하세요.

목표(또는 여러 목표)를 염두에 둔 후에는 해당 목표를 달성하기 위한 모범 사례를 찾아야 합니다.

각 목표의 모범 사례는 이 문서의 범위를 벗어나지만 아래 섹션에서 이러한 목표의 일부에 대해 설명합니다.

강력한 체크아웃 템플릿으로 사용자 정의 프로세스 속도를 높이십시오

웹사이트 코드를 수정하는 경우 템플릿을 다시 디자인하는 것이 번거로울 수 있습니다. 지저분하고 유지 관리하기 어렵고 다른 사람들이 미래에 변경하기 어렵습니다.

사용자 정의 프로세스의 속도를 높이려면 먼저 CartFlows와 같은 코드 없는 판매 깔때기 및 체크아웃 페이지 빌더로 시작해야 합니다.

현재 플러그인을 좋아하는 활성 사용자가 200,000명이 넘습니다. 페이지를 처음부터 디자인할 수 있는 끌어서 놓기 기능을 제공하고 즐겨찾는 페이지 빌더와 통합되므로 새로 배울 것이 없으며 쉽게 AOV를 높일 수 있습니다.

그러나 프로세스 속도를 더욱 높여주는 강력한 기능이 하나 있습니다. 바로 CartFlows 체크아웃 템플릿 입니다.

다양한 체크아웃 템플릿을 사용하여 비즈니스에 적합한 템플릿을 선택하고 콘텐츠를 편집하고 몇 분 안에 라이브로 시작할 수 있습니다.

이러한 템플릿은 전문가가 설계하고 시장에서 테스트를 거쳐 잘 변환된다는 것을 알고 있습니다.

따라서 초보자라면 끝없이 모든 모범 사례를 검색하고 구현하는 데 시간을 낭비하지 마십시오.

템플릿을 선택하고 편집한 다음 다시 비즈니스에 시간을 할애하세요.

7 WooCommerce 체크아웃 페이지 사용자 정의

우리는 지금까지 많은 것을 다루었습니다. 이제 본격적인 커스터마이징을 해보자.

WooCommerce 결제 페이지에서 사용자 지정할 수 있는 다양한 요소는 무엇입니까?

이 섹션에서는 Elementor와 함께 CartFlows를 사용하여 체크아웃 페이지의 일부 요소를 사용자 지정합니다. CartFlows와 함께 다른 페이지 빌더를 사용하고 단계를 수행할 수 있습니다.

귀하의 제품과 관련된 사용자 정의 체크 아웃 필드 생성

CartFlows Pro를 사용하면 결제 페이지의 각 필드가 수행하는 작업을 제어할 수 있습니다. 필요한 경우 사용자 정의 필드를 만들어 추가 정보를 캡처할 수 있습니다.

어떻게 작동하는지 봅시다.

1단계. WordPress 대시보드에서 CartFlows > Flows 로 이동합니다. 흐름을 선택하고 편집 을 클릭합니다.

2단계. 이제 결제 페이지를 편집 합니다.

3단계 . 체크아웃 레이아웃 섹션의 맨 아래로 스크롤합니다.

체크아웃 필드 탭 을 선택하고 사용자 정의 필드 편집기 체크아웃 활성화를 선택합니다.

결제 양식에 표시되는 청구 및 배송 결제 필드를 찾을 수 있습니다. 필드를 사용자 정의할 수 있는 다양한 옵션을 보려면 오른쪽에 있는 화살표를 클릭하여 필드를 확장하십시오.

새 사용자 정의 필드 추가 를 선택합니다. 이 필드를 사용하면 체크아웃 양식의 청구 또는 배송 섹션에 추가 필드를 입력할 수 있습니다.

4단계: 텍스트, 텍스트 영역, 선택, 확인란 또는 숨겨진 필드 유형을 만들 수 있습니다. 완료되면 새 필드 추가 및 단계 업데이트 를 클릭합니다.

그러면 추가 필드를 반영하도록 결제 페이지가 업데이트됩니다.

한 페이지 체크 아웃을 구축하기 위해 체크 아웃 필드를 제거하는 방법

CartFlows를 사용하면 결제 필드를 쉽게 추가하거나 숨길 수 있습니다. 이는 더 빠른 구매를 가능하게 하는 WooCommerce 한 페이지 결제를 구축하려는 경우 중요한 기능입니다.

결제 필드를 제거하고 한 페이지로 된 WooCommerce 결제를 생성하는 방법은 무엇입니까?

한 페이지짜리 체크아웃을 만들기 위해 필드를 제거하는 것부터 시작해 보겠습니다.

1단계: CartFlows > Flows > edit your_flow > Edit Checkout 페이지로 이동합니다.

2단계: 양식 필드 탭으로 이동한 다음 비활성화된 경우 사용자 정의 필드 편집기 활성화 옵션을 활성화합니다.

3단계: 체크아웃 페이지에서 필드를 숨기거나 제거하려면 눈 아이콘 을 클릭합니다.

4단계: 저장/업데이트 버튼 을 클릭하면 완료됩니다.

그게 다야!

변경 사항이 저장되면 이제 업데이트가 결제 페이지에 반영됩니다.

결제 시 배송비 및 배송 필드를 계산하는 방법

실제 제품의 경우 구매자의 배송 주소를 캡처하고 배송비를 계산해야 합니다.

그러나 먼저 계산이 올바르게 수행되도록 배송 지역을 만들어야 합니다. WooCommerce 설정에서 배송 지역을 만들 수 있습니다.

사용자 정의로 이동하기 전에 먼저 WooCommerce에서 배송 옵션을 설정하려면 이 간단하고 쉬운 기사를 따르십시오.

이제 배송을 설정한 후 CartFlows의 특정 결제 페이지에서 배송을 숨기고 싶은 경우가 있을 수 있습니다. 다행히도 활성화 및 비활성화 옵션을 제공했습니다.

WooCommerce 결제 페이지에서 배송 필드를 활성화 및 비활성화하는 방법

CartFlows 체크아웃 페이지에서 배송 필드 섹션을 활성화/비활성화하는 간단한 단계를 수행할 수 있습니다.

1단계: CartFlows > Flows > Your Flow 로 이동합니다.

2단계: 결제 페이지에서 수정 을 클릭합니다.

3단계: 사용자 정의 필드 탭으로 스크롤하여 " 다른 주소로 배송"을 선택 취소합니다.

4단계: 업데이트 를 클릭하고 체크아웃 페이지에서 변경 사항이 잘 보이는지 확인하십시오!

결제 시 쿠폰 필드 사용자 정의

더 많은 사용자 정의를 시작하기 전에 WooCommerce 스토어에 대한 사용자 정의 쿠폰을 만드는 방법을 보여주는 기사가 있습니다.

필수 쿠폰을 생성했으면 결제 페이지에서 쿠폰 필드를 사용자 정의할 수 있습니다.

CartFlows에서 접을 수 있는 쿠폰 필드를 만들려면 다음 단계를 따르세요.

• 1단계: CartFlows 대시보드 > Flows > Flows 설정 아래에서 체크아웃 페이지를 편집합니다.
• 2단계: 이제 체크아웃 레이아웃 > 체크아웃 필드 로 이동하면 사용 가능한 모든 필드 사용자 정의 옵션이 표시됩니다.
• 3단계: 접을 수 있는 필드 옵션을 활성화합니다.
  • 먼저 필드를 접을 수 있으려면 필드가 필수로 표시되지 않았는지 확인해야 합니다.
  • 다음으로 변경 사항 저장/업데이트 후 축소 가능 확인란을 활성화하고 옵션 필드를 축소할 수 있도록 설정했습니다.
• 4단계: 설정 저장 페이지로 돌아가 변경 사항이 적용되었는지 확인합니다.

Cartflows를 사용하여 WooCommerce 체크아웃 페이지에서 쿠폰 필드를 활성화하는 방법

쿠폰 필드를 만들고 결제 페이지에 표시하는 방법을 살펴보겠습니다.

1단계: CartFlows > Flows > Your Flow로 이동합니다.

2단계: 결제 페이지에서 편집 을 클릭합니다.

3단계: 사용자 정의 필드 탭으로 이동하여 쿠폰 필드 옵션을 활성화합니다.

완료되면 WooCommerce에서 설정한 쿠폰을 CartFlows 결제 페이지에서 사용할 수 있습니다.

다음부터는 새로운 쿠폰을 생성하기만 하면 되며 처음부터 설정하는 전체 과정을 거칠 필요가 없습니다!

더 나은 전환을 위해 체크아웃 페이지에서 방해 요소 제거

WooCommerce 결제 페이지를 사용자 지정하는 가장 중요한 이유 중 하나는 주의를 산만하게 하는 요소를 줄이거나 제거하는 것입니다.

우리는 방해 요소가 무엇이며 전환율에 어떤 영향을 미치는지 이미 논의했습니다.

WooCommerce 결제 페이지에서 결제 필드를 추가 및 제거하는 방법을 이미 알고 있으므로 방해 요소 제거로 바로 이동해 보겠습니다.

필수 결제 필드만 표시하여 결제 페이지에서 방해 요소를 제거하는 방법

다음은 주의를 산만하게 하는 것을 줄이고 체크아웃 프로세스의 속도를 높이는 데 도움이 되는 실제 및 디지털 제품에 사용할 수 있는 체크아웃 필드입니다.

디지털 제품의 경우:

• 이름 및 성 필드
• 이메일 및 선택적 전화번호
• 필요한 경우 청구서 수신 주소

실제 제품의 경우:

• 이름과 성
• 이메일 및 전화번호
• 배송 주소(기본값으로 설정하려면 체크박스 포함)
• 청구지 주소인 경우(배송 주소 복사 확인란 포함)

사용자가 여기에 필요한 모든 정보를 입력한 직후에 카드 세부 정보 섹션을 배치합니다.

특히 사용자가 카드 세부 정보를 입력할 때 항상 볼 수 있도록 체크아웃 페이지에 2-3개의 선택적 사용 후기를 표시합니다.

회사 정책에 따라 환불 보증 또는 평가 기간을 표시하여 거래에 위험이 없음을 강조합니다.

마지막으로, 사용자가 무의식적으로 이러한 기호를 찾아 결제를 진행할 때 신뢰 기호를 추가합니다.

이러한 몇 가지 변경 사항을 통해 필요한 사항만 묻고 필요한 모든 정보를 단일 페이지에 제공하는 간결한 체크아웃 페이지를 갖게 됩니다.

결제 페이지의 여러 지불 옵션

사람들은 여러 가지 이유로 카트를 버립니다. 선택할 지불 옵션이 충분하지 않은 것도 그 이유 중 하나입니다.

새로운 지불 게이트웨이를 사용하면 고객이 선호하는 모든 지불 방식을 쉽게 수락할 수 있습니다.

예를 들어 Stripe는 현재 가장 인기 있는 결제 게이트웨이 중 하나입니다. Stripe와 통합하면 직불 카드 및 신용 카드, 지갑, 은행 송금 등 고객의 다양한 지불 방법을 수락할 수 있습니다.

또한 결제 페이지를 PayPal과 통합하여 Stripe에 익숙하지 않은 고객이 PayPal을 선택할 수 있습니다.

고객이 어떤 형태의 디지털 지갑을 선호한다면 이를 시도하고 수락하십시오. 모든 결제 수단에서 발생하는 수익은 다르지만 옵션을 제공하지 않고 고객을 떠나게 하는 것보다 옵션을 열어 두는 것이 좋습니다.

CartFlows를 사용하여 여러 지불 방법과 통합하는 방법

CartFlows 에서 Stripe은 우리가 가장 좋아하는 결제 게이트웨이입니다. 귀하와 당사 모두를 위한 작업이 매우 쉽기 때문에 이 게이트웨이가 마음에 듭니다.

CartFlows와 원활하게 통합되며 대시보드에서 바로 고객에게 청구를 시작할 수 있습니다.

긴밀한 통합 덕분에 CartFlows 대시보드에서 직접 수익을 볼 수도 있습니다.

더 높은 AOV에 대한 주문 범프 추가

Order Bumps는 고객이 구매하려고 할 때 충동을 유발합니다. 적절한 제품이 적시에 제공되면 상점의 평균 주문 금액을 쉽게 높일 수 있습니다.

CartFlows Pro를 사용하면 결제 페이지에 단일 및 다중 주문 범프를 쉽게 추가할 수 있습니다.

1단계: CartFlows > 흐름 으로 이동합니다.

2단계: 주문 범프를 추가/편집/업데이트하려는 흐름을 엽니다.

3단계: 결제 페이지의 수정 버튼을 클릭합니다.

4단계: 주문 범프 탭으로 이동하고 주문 범프 추가 버튼을 클릭하여 여러 주문 범프를 추가하거나 편집 또는 주문 범프 이름을 클릭하여 주문 범프를 편집합니다.

새 주문 범프 추가 버튼을 클릭하면 주문 범프에 이름을 선택하여 문자 사용을 식별할 수 있는 팝업이 표시됩니다.

5단계: 주문 범프를 열면 제품, 디자인, 콘텐츠 및 설정이라는 4개의 탭이 표시됩니다.

오더 범프 설정에 진입한 후 단계와 동일한 방법으로 오더 범프의 이름을 변경할 수 있습니다.

주문 범프에서 제공되는 탭은 다음과 같습니다.

• 상품 탭: 상품 을 선택하고 해당 상품의 할인을 관리합니다.
• 디자인 탭 : 이 탭에서 디자인 i: 룩앤필을 관리할 수 있습니다.
• 콘텐츠 탭: 이 탭에서 주문 범프의 표시 콘텐츠를 관리할 수 있습니다.
• 설정 탭: 이 탭에서 특정 주문 범프에 대한 설정을 관리할 수 있습니다.

또한 새로운 개선 사항은 콘텐츠를 디자인하고 업데이트하는 동안 주문 범프 디자인을 미리 볼 수 있다는 것입니다.

6단계: 변경 사항이 완료되면 각 탭 하단에 있는 변경 사항 저장 버튼을 클릭하여 변경 사항을 저장하기 위해 각 탭을 필수로 저장해야 합니다.

이탈 의도 팝업

체크아웃 페이지의 구매자가 산만해져서 떠나려고 할 때 이탈 의도 팝업이 그들의 주의를 끌고 뒤로 끌어당길 수 있습니다!

이탈 의도 팝업은 어떻게 작동합니까?

귀하의 웹사이트는 사용자의 마우스 움직임을 추적합니다. 마우스가 브라우저 탭 외부로 이동하는 것을 감지하는 즉시 팝업이 표시됩니다.

이것은 사용자의 관심을 끌고 페이지로 다시 가져옵니다.

이탈 의도 팝업은 어떻게 만듭니까?

당신은 그것을 위해 기술자가 될 필요가 없습니다! Elementor는 페이지와 옵트인을 구축할 수 있는 강력한 끌어서 놓기 기능을 제공합니다. 또한 동일한 인터페이스에서 아름다운 종료 의도 팝업을 만들 수 있습니다.

얼마나 멋진가요?

동일한 페이지 디자이너를 사용하여 처음부터 아름답고 눈길을 끄는 팝업을 만들거나 강력한 옵트인 템플릿을 사용하여 작업 속도를 높이십시오.

Elementor는 마우스 추적을 처리하고 팝업과 적절한 시간을 표시합니다.

자주 묻는 질문

WooCommerce 체크아웃 사용자 정의와 관련된 몇 가지 일반적인 질문에 답해 보겠습니다.

1. WooCommerce 결제 페이지를 어떻게 커스터마이징합니까?

WooCommerce 결제 페이지를 사용자 지정하려면 WooCommerce > 설정 으로 이동하여 고급 탭을 클릭합니다. 그런 다음 결제 페이지 로 이동하여 드롭다운 메뉴에서 방금 만든 페이지를 선택합니다. 종료하기 전에 변경 사항을 저장하는 것을 잊지 마십시오.

2. WooCommerce 결제 페이지를 더 보기 좋게 만들려면 어떻게 해야 하나요?

다음은 WooCommerce 결제 페이지를 더 보기 좋게 만드는 몇 가지 팁입니다.

1. CartFlows와 같은 체크아웃 페이지 사용자 정의 플러그인을 사용하여 페이지의 모든 요소를 ​​제어하십시오.
2. 아름다운 결제 페이지 템플릿 선택
3. 결제 페이지의 양식 필드 수 줄이기
4. 사용자를 구매로 유도하지 않는 방해 요소 제거
5. 후기를 활용한 사회적 검증 도입
6. 신뢰 기호 추가

3. WooCommerce 결제 페이지를 사용자 정의하는 데 가장 적합한 플러그인은 무엇입니까?

CartFlows는 WooCommerce 결제 페이지를 사용자 정의하는 최고의 플러그인입니다. Elementor와 같이 즐겨 사용하는 WordPress 페이지 빌더와 통합되어 결제 페이지의 모든 요소를 ​​사용자 지정할 수 있습니다.

4. WooCommerce 결제 페이지에 사용자 정의 필드를 추가하는 방법은 무엇입니까?

사용자 정의 필드를 추가하려면 CartFlows를 사용하여 WooCommerce 결제 흐름을 편집하고 결제 레이아웃 섹션으로 이동합니다. 체크아웃 필드 탭 을 선택하고 사용자 정의 필드 편집기 체크아웃 활성화를 선택합니다. 아래에서 사용 가능한 옵션에서 새 필드를 추가합니다.

결론

괜찮은! 설정이 완료되었습니다. 이 지식을 바탕으로 최소한의 선행 노력으로 상점에서 최대의 수익을 얻으시기 바랍니다.

여기에서 몇 가지 모범 사례를 다루었지만 이것이 머리에 떠오르는 추가 질문에 대한 출발점으로 간주하십시오.

전환 및 수익 최적화로의 여정은 장기적으로 정말 흥미로운 결과로 이어질 것입니다!

따라서 시간을 내어 한 번에 하나씩 변경 사항을 구현하고 시도해 보십시오. 청중이 변화에 어떻게 반응하는지 확인하십시오.

곧 상점에서 최소한의 노력으로 최상의 결과를 얻을 수 있는 충분한 데이터를 갖게 될 것입니다!