Shopify와 같은 WooCommerce 결제를 만드는 방법

결제를 변경하고 Shopify처럼 보이게 하시겠습니까? 당신을 위한 완벽한 튜토리얼이 있습니다. 이 가이드에서는 Shopify처럼 WooCommerce 결제를 만드는 방법을 보여줍니다.

WooCommerce는 다양한 사용자 정의 옵션이 있는 가장 유연한 전자 상거래 플랫폼 중 하나입니다. 그러나 때때로 이러한 모든 특혜는 사이트 관리자와 고객에게 압도적일 수 있습니다. 예를 들어, 필드가 많은 복잡한 체크아웃 페이지가 전환율에 영향을 미칠 수 있음을 이미 보았습니다. 그렇기 때문에 불필요한 필드를 제거하고 결제를 깨끗하고 단순하게 유지해야 합니다.

이는 매우 간단한 체크아웃 페이지가 있는 Shopify와 같은 다른 플랫폼 에 이점이 될 수 있습니다. 예를 들어 결제를 사용자 정의하고 한 페이지 결제를 생성할 수 있지만 일부 사용자는 여전히 Shopify와 같은 결제 페이지를 선호합니다. 좋은 소식은 WooCommerce의 엄청난 유연성을 통해 Shopify가 제공하는 것과 같은 결제를 할 수 있다는 것입니다.

그 방법을 보기 전에 WooCommerce와 Shopify 결제 페이지의 차이점을 살펴보겠습니다.

WooCommerce Checkout 대 Shopify Checkout

WooCommerce에서 많은 체크아웃 필드를 추가할 수 있다는 것을 이미 알고 있습니다. 그러나 너무 많이 추가하면 길고 복잡한 체크아웃 페이지 가 될 수 있습니다. 이렇게 하면 사용자가 너무 많은 필드를 채우는 것이 지루할 수 있으므로 장바구니 포기가 증가하고 전환율에 영향을 줄 수 있습니다.

반면 Shopify 기본 체크아웃 페이지를 보면 필요한 체크아웃 필드만 있는 심플하고 아름다운 디자인 이다. 그에 비해 WooCommerce 결제 페이지는 확실히 개선되어 더 효율적으로 만들 수 있습니다.

좋은 소식은 WooCommerce에는 많은 사용자 지정 옵션이 있으므로 WooCommerce 결제를 Shopify처럼 쉽게 만들 수 있다는 것입니다.

Shopify처럼 WooCommerce Checkout을 만드는 방법

WooCommerce에서 Shopify 결제를 생성하는 가장 쉬운 방법 은 플러그인을 사용하는 것 입니다. WordPress는 결제를 사용자 정의하는 데 사용할 수 있는 많은 플러그인을 제공합니다. 이 섹션에서는 WooCommerce 결제를 Shopify처럼 보이게 하는 몇 가지 최고의 도구를 분석합니다.

WooCommerce 차단

WooCommerce Blocks 는 Automattic에서 개발한 무료 플러그인입니다. WooCommerce를 위해 특별히 설계된 많은 Gutenberg 블록과 결제 전용 블록이 있습니다.

체크아웃 블록을 사용하면 WooCommerce 체크아웃을 Shopify 체크아웃처럼 쉽게 만들 수 있습니다. 기본적으로 유사한 레이아웃과 콘텐츠 섹션이 있어 변환이 매우 쉽습니다. 또한 이 도구는 체크아웃 블록에 대한 다양한 옵션을 제공하므로 필요에 맞게 사용자 정의할 수 있습니다.

주요 특징들

• 간소화된 체크아웃 블록
• 여러 제품 차단 옵션
• 카테고리 및 제품 블록별 리뷰
• 멋진 지원

가격

이것은 WordPress 저장소에서 다운로드할 수 있는 무료 플러그인입니다.

체크아웃WC

CheckoutWC 는 WooCommerce 체크아웃을 사용자 정의하는 가장 인기 있는 플러그인 중 하나입니다. Shopify에서 영감을 받은 여러 템플릿과 함께 제공되므로 이를 사용하여 WooCommerce 결제를 Shopify처럼 보이게 할 수 있습니다.

이 플러그인은 또한 반응형 디자인과 대부분의 주요 WordPress 플러그인 및 테마와의 뛰어난 호환성 옵션을 제공합니다. 또한 암호 생성기, 주소 자동 완성 기능 등과 같은 고객을 위한 편리한 옵션이 제공됩니다.

주요 특징들

• 여러 체크아웃 페이지 템플릿
• 완전 반응형 디자인
• 주소 자동 완성
• 장바구니 편집

가격

CheckoutWC 는 월 15달러 또는 연간 149달러부터 시작하는 프리미엄 플러그인입니다. 또한 30일 환불 보장, 무료 업데이트 및 한 사이트에 대한 지원이 포함됩니다.

플러그인을 사용하여 WooCommerce에서 Shopify Checkout 만들기

이 튜토리얼에서는 WooCommerce 블록 을 사용하여 Shopify와 같은 WooCommerce 결제를 만듭니다. WooCommerce 스토어와 전용 체크아웃 블록을 편집할 수 있는 많은 기능을 갖춘 훌륭한 무료 플러그인입니다.

시작하기 전에 WooCommerce 사이트를 올바르게 설정했는지 확인하십시오. 또한 우리는 Divi 테마를 사용할 것이므로 다른 테마를 사용하는 경우 웹사이트에서 일부 페이지와 옵션이 다를 수 있습니다. 그러나 문제 없이 단계를 따를 수 있어야 합니다.

1. WooCommerce 블록 설치 및 활성화

먼저 플러그인을 설치하고 활성화합니다. 이를 위해 WordPress 대시보드에서 플러그인 > 새로 추가 로 이동하여 WooCommerce Blocks 플러그인을 검색합니다. 찾으면 지금 설치 를 클릭하여 설치합니다.

설치가 완료되면 플러그인을 활성화 합니다. 이 프로세스에 대한 추가 정보가 필요하면 WordPress 플러그인을 수동으로 설치하는 방법에 대한 가이드를 참조하세요.

2. 결제 페이지 구성 및 사용자 지정

이제 대시보드의 페이지 로 이동하여 체크아웃 페이지를 찾은 다음 편집 을 누르기만 하면 됩니다.

그러면 여기에 기본 WooCommerce 결제 페이지 단축 코드가 표시됩니다. WooCommerce 결제를 Shopify처럼 보이게 하려면 단축 코드를 제거해야 합니다. 제거하려면 단축 코드를 클릭 하고 세 개의 수직 점 을 눌러 옵션을 엽니다.

그런 다음 블록 제거 를 클릭하여 단축 코드를 제거합니다. 또는 옵션 바로 가기에 표시된 대로 블록을 클릭한 다음 Ctrl+Alt+Z 를 누를 수 있습니다.

그런 다음 ' + ' 아이콘을 클릭하거나 ' / '를 입력하여 새 블록을 추가하고 “ Checkout ”을 검색합니다. 결제 블록을 선택하고 페이지를 업데이트합니다. WooCommerce에서 Shopify에서 영감을 받은 새로운 결제 페이지를 볼 수 있습니다.

이제 두 가지 옵션이 있습니다. 그대로 두거나 사용자 정의하는 것입니다. 수정하는 방법에 대해 알아보겠습니다.

먼저 화면 오른쪽 상단에 있는 설정 아이콘 을 엽니다. 페이지 및 차단 설정이 오른쪽 사이드바에 나타납니다. 그런 다음 블록 중 하나를 클릭하면 블록 설정 사이드바에서 특정 블록 편집을 시작할 수 있습니다.

예를 들어 배송 주소 필드를 편집하려면 배송 주소 블록을 누르기만 하면 오른쪽 사이드바에 사용 가능한 모든 설정이 표시됩니다. 여기에서 체크아웃 페이지의 필드 편집기를 표시하거나 숨길 수 있습니다.

필요한 모든 변경을 완료했으면 페이지를 업데이트 하십시오. 프런트 엔드에서 결제를 확인하면 Spotify에서 영감을 받은 새로운 결제 페이지가 표시됩니다.

전문가 팁: 장바구니 페이지를 체크아웃 페이지와 일치시키십시오.

장바구니 페이지가 있는 경우 장바구니 페이지에 대해 위의 프로세스를 반복하고 결제 및 장바구니 페이지의 스타일을 일치시킬 수 있습니다.

WordPress 대시보드에서 페이지로 이동하여 장바구니 페이지 를 찾아 기본 WooCommerce 장바구니 페이지 단축 코드를 제거합니다. 그런 다음 장바구니 페이지와 함께 새 장바구니 블록을 추가하고 업데이트합니다.

보유하고 있는 제품이나 서비스의 유형에 따라 다르지만 일반적으로 장바구니 페이지를 건너뛰어 결제 프로세스를 단축하는 것이 좋습니다. 이에 대해 더 알고 싶다면 WooCommerce에서 장바구니 페이지를 건너뛰는 방법에 대한 가이드를 확인하세요.

Shopify와 같은 WooCommerce Checkout을 만드는 또 다른 방법

편집하여 결제 페이지를 사용자 정의하는 것이 너무 많은 작업이라고 생각한다면 다른 대안이 있습니다. 프리미엄 플러그인인 CheckoutWC 를 사용하여 WooCommerce 결제를 Shopify처럼 보이게 할 수 있습니다.

이를 위해서는 유료 제품이기 때문에 그들의 계획 중 하나에 가입해야 합니다. 7일 무료 평가판을 사용하여 도구가 필요한 기능을 제공하는지 테스트할 수도 있습니다.

이제 CheckoutWC를 사용하여 WooCommerce에서 Shopify 결제를 생성하는 프로세스를 살펴보겠습니다.

1. CheckoutWC 설치 및 활성화

먼저 플러그인을 활성화하고 설치해야 사용을 시작할 수 있습니다. 대시보드에서 플러그인 > 새로 추가 로 이동하고 플러그인 업로드 를 클릭합니다. 구매 시 다운로드한 zip 파일을 업로드하고 업로드가 완료되면 지금 설치 를 누릅니다.

설치가 완료되면 플러그인을 활성화 합니다. 이 프로세스에 대해 의심이 가는 경우 다시 한 번 WordPress 플러그인을 수동으로 설치하는 가이드를 볼 수 있습니다.

2. 결제 템플릿 선택

이 플러그인의 주요 장점은 Shopify 체크아웃 페이지를 염두에 두고 특별히 설계된 체크아웃 템플릿이 있다는 것입니다. 4개의 템플릿이 있으므로 상점에 더 적합한 템플릿을 선택하십시오.

WordPress 대시보드에서 설정 > WooCommerce용 체크아웃 > 템플릿 으로 이동하면 네 가지 템플릿 옵션이 표시됩니다.

• 기본
• 미래파 예술가
• 복사
• 유리

복사 템플릿 은 Shopify 체크아웃 페이지와 가장 유사하지만 다른 세 가지에도 일부 Shopify 요소가 있습니다.

템플릿을 선택했으면 로고로 사용자 정의할 차례입니다. 디자인 탭을 열고 로고 업로드 를 클릭합니다. 이미지를 업로드한 후 변경 사항을 저장해야 합니다.

그게 다야! 이제 프런트 엔드에서 결제를 확인하면 WooCommerce 스토어에 Shopify 결제 페이지가 표시됩니다 .

보너스: WooCommerce 체크아웃 필드 제거

마지막으로 결제에서 일부 필드를 제거하는 방법을 살펴보겠습니다.

WooCommerce 결제를 Shopify와 똑같이 만들고 싶지 않지만 여전히 결제 페이지를 단순화하고 일부 불필요한 필드를 숨기고 싶다고 가정해 보겠습니다. 이렇게 하면 결제 프로세스가 빨라지므로 전환율을 높이고 장바구니 이탈을 줄이는 데 도움이 됩니다.

결제를 제거하는 가장 쉬운 방법은 WooCommerce Checkout Manager 플러그인을 사용하는 것입니다.

이 도구를 사용하면 필요에 따라 결제 필드를 추가, 숨기기 및 편집하여 결제 페이지를 쉽게 사용자 지정할 수 있습니다.

플러그인 설치 및 활성화

먼저 플러그인 > 새로 추가 로 이동하여 플러그인을 검색합니다. 그런 다음 설치하고 활성화 하십시오. 이것은 프리미엄 도구이므로 무료 버전을 다운로드하거나 더 고급 기능이 포함된 프리미엄 플랜 중 하나를 얻을 수 있으며 단 19 USD(일회성 결제)부터 시작합니다.

결제 페이지 편집

플러그인을 설치했으면 WooCommerce > 설정 으로 이동하여 체크아웃 탭을 엽니다. WooCommerce 결제 페이지를 편집할 수 있는 모든 옵션이 표시됩니다.

또한 대부분의 결제 필드가 있으므로 결제 탭으로 이동합니다. 결제 탭으로 이동하여 비활성화 됨 토글을 사용하여 원하는 체크아웃 필드를 제거하기만 하면 됩니다. 필수 토글을 사용하여 필수 항목으로 만들거나 사용하지 않을 수도 있습니다.

선택에 만족하면 변경 사항을 저장 하는 것을 잊지 마십시오. 그런 다음 프런트 엔드에서 결제를 확인하면 새 결제 페이지가 표시됩니다.

이 프로세스에 대해 더 많은 도움이 필요하면 WooCommerce 체크아웃 필드를 제거하기 위한 가이드를 살펴보세요. 기존 필드를 추가하거나 편집하지 않고 필드만 제거하려는 경우 Direct Checkout이라는 다른 플러그인을 사용할 수 있습니다.

결론

요약하면 기본 Shopify 체크아웃은 WooCommerce보다 깨끗하고 간단합니다. 이 가이드에서는 WooCommerce 결제를 스토어에서 Shopify처럼 보이게 만드는 방법을 살펴보았습니다. 가장 편리한 방법은 플러그인을 사용하는 것이며 두 가지 다른 도구를 사용하여 프로세스를 보여주었습니다.

WooCommerce Blocks는 무료이며 블록을 사용하여 체크아웃 페이지를 편집하는 반면 CheckoutWC 는 체크아웃 페이지를 사용자 정의하는 데 도움이 되는 여러 체크아웃 템플릿과 함께 제공되는 프리미엄 플러그인 입니다. 두 플러그인 모두 작업을 완료하고 사용하기가 매우 쉽기 때문에 필요에 가장 적합한 플러그인을 선택하십시오.

또한 WooCommerce 체크아웃 필드를 제거하여 체크아웃 페이지를 추가로 사용자 정의하고 전환율을 개선하는 방법도 보여주었습니다. 이렇게 하면 결제 페이지가 더 간단해지고 결제 프로세스가 빨라집니다.

결제를 최대한 활용하는 방법에 대해 자세히 알아보려면 WooCommerce 결제 페이지를 편집하는 방법을 살펴보세요. 이 게시물이 마음에 들면 다음 튜토리얼을 확인하십시오.

• WooCommerce 한 페이지 결제를 만드는 방법
• 결제에 수수료를 추가하는 다양한 방법
• WooCommerce 결제에 조건부 필드를 추가하는 방법