WooCommerce 체크아웃 페이지를 사용자 정의하고 편집하는 3가지 효과적인 방법

WooCommerce 결제 페이지를 편집 하는 가장 좋은 방법을 찾고 계십니까?

WooCommerce 체크아웃 페이지를 사용자 정의하는 방법을 배우면 디자인을 더 잘 제어할 수 있고 더 많은 판매 가능성을 높일 수 있습니다.

‍ 이 자세한 튜토리얼에서는 디자인을 완전히 조정하거나 체크아웃 페이지에 표시되는 필드를 변경하는 것을 포함하여 체크아웃 페이지를 사용자 정의하는 세 가지 코드 없는 방법을 보여줍니다.

또한 WooCommerce가 결제 경험을 사용자 지정하기 위해 제공하는 모든 내장 기능을 살펴보겠습니다.

시작하자…

WooCommerce 결제 페이지를 수정하는 이유

WooCommerce 결제 페이지를 처음부터 수정해야 하는 분명한 이유가 있습니까? 조건에 따라서. 내장된 체크아웃 모듈은 깨끗하고 기능적이며 고객을 성가시게 하지 않고 결제를 처리할 수 있을 만큼 충분히 빠릅니다.

그러나 단점도 발견할 수 있습니다. 다음은 WooCommerce 결제 페이지를 편집 해야 하는 주요 이유입니다.

• 사전 설정 글꼴, 스타일 및 WooCommerce 보라색과 같은 기본 WooCommerce 브랜딩 요소를 대체합니다.
• 로고, 브랜드 색상 및 지원 문서 링크와 같이 비즈니스와 관련된 웹 항목을 추가합니다.
• 테스트 후 전환 체크 아웃을 최적화해야 하는 경우.
• 한 단계로 변환하여 결제 프로세스의 속도를 높입니다.
• 상향 판매, 교차 판매 및 관련 제품을 통합합니다.
• 사용자 정의 필드를 추가하거나 WooCommerce에서 제공하는 일부 필드를 제거합니다.
• 배송 옵션을 수정하려면.
• 버튼 텍스트, 사전 설정 필드 텍스트 및 게스트 체크아웃 옵션과 같은 디자인 요소를 변경합니다.

WooCommerce 결제 페이지를 수정하는 방법

WooCommerce 결제 페이지를 편집하는 데 사용할 수 있는 몇 가지 옵션이 있습니다. 당신에게 가장 잘 맞는 방법은 당신이 만들고자 하는 특정한 편집과 당신이 플러그인을 사용할 수 있는지 여부에 달려 있습니다.

아래에서 가장 좋은 세 가지 방법을 살펴보겠습니다.

1. 기본 WooCommerce 설정 – WooCommerce에는 결제를 사용자 정의하기 위한 많은 기본 제공 옵션이 포함되어 있으며 첫 번째 방법에서 자세히 설명합니다. 테마는 결제 페이지 디자인을 사용자 지정하기 위한 자체 옵션을 제공할 수도 있습니다.
2. Elementor Pro – Elementor Pro는 이제 결제 페이지 디자인을 완전히 사용자 지정할 수 있는 자체 결제 위젯을 제공합니다. 특히 페이지 디자인을 편집하려는 경우에 유용한 옵션입니다.
3. 체크아웃 필드 편집기 – 체크아웃 페이지에 표시되는 양식 필드를 편집하려는 경우에 유용한 옵션입니다. 이를 사용하여 새 필드를 추가하고, 기본 필드를 제거하고, 필요에 따라 모든 것을 재정렬할 수 있습니다.

그들을 통해 가자..

방법 1: 기본 WooCommerce 결제 설정 사용

WooCommerce는 체크아웃 모듈을 편집할 수 있는 기본 제공 설정을 제공하며 WordPress 테마는 WordPress 커스터마이저에서 일부 필드 및 체크아웃 설정을 조정하기 위한 도구를 이미 제공할 수 있습니다.

필요한 기능이 이미 있을 수 있으므로 추가 플러그인, 테마 또는 필드 사용자 지정 프로그램을 찾기 전에 항상 이러한 설정을 확인하는 것이 좋습니다.

예를 들어 WooCommerce에는 특정 필드를 제거하고, 체크아웃 시 세율을 활성화하고, 쿠폰 필드를 표시하는 도구가 있습니다.

1단계: 결제 시 세금 계산 및 쿠폰 필드 추가

WooCommerce에는 세금 계산을 자동화하고 결제 시 쿠폰을 수락하는 기본 제공 설정이 있습니다.

켜기/끄기를 토글하려면 WordPress의 WooCommerce > 설정 으로 이동하십시오.

일반 탭을 선택하고 세금 활성화 섹션까지 아래로 스크롤합니다. 체크아웃 시 세율 및 계산 활성화 확인란을 선택합니다. WooCommerce( WooCommerce > 설정 > 세금 > 표준 요율 )에서 구성한 요율을 기반으로 세금 수수료를 생성하고 표시합니다.

고객이 할인 코드를 입력할 수 있는 필드를 표시 하려면 쿠폰 코드 사용 활성화 확인란을 선택합니다.

특정 요소를 표시하지 않으려면 확인란을 제거하기만 하면 됩니다. 프런트엔드에서 변경 사항을 보려면 저장 버튼을 클릭해야 합니다.

2단계: 세금이 포함되거나 포함되지 않은 제품 가격 표시

결제가 끝날 때 세금을 계산하는 것도 중요하지만 특히 고객이 결제를 진행할 때 전체 제품 비용에 세금을 포함할지 여부도 결정해야 합니다.

일반적으로 이것은 고객이 지불하기 직전에 세금으로 가격을 인상하는 것보다 더 많은 투명성을 보여줍니다.

체크아웃 과정에서 가격에 세금을 포함시키려면 WooCommerce > 설정 > 세금 으로 이동하십시오.

페이지에서 아래로 스크롤하여 "장바구니 및 결제 중 가격 표시" 필드를 찾습니다.

드롭다운에서 선택:

• 세금 포함
• 세금 제외

변경 사항 저장 을 클릭합니다.

3단계: 결제 시 표시할 배송 항목 설정

또한 WooCommerce > 설정 에서 WooCommerce 결제에 표시되는 배송 지역, 방법 및 계산을 표시할 수 있습니다.

배송 탭으로 이동하여 다음을 조정하기만 하면 됩니다.

• 계산: 장바구니 페이지에서 배송 계산기 활성화
• 계산: 주소가 삽입될 때까지 결제 시 배송비 숨기기
• 배송 목적지: 결제 시 기본 배송 주소 설정

변경 사항 저장 을 클릭합니다.

4단계: 결제 시 계정 및 개인 정보 관리

WooCommerce > 설정 아래에 있는 동안 계정 및 개인 정보 탭으로 이동합니다.

페이지 상단에 두 개의 필드가 표시됩니다.

• 게스트 체크아웃: 게스트 체크아웃 및 기존 계정 로그인 포함/제거
• 계정 생성: 고객이 결제 중에 계정을 생성하거나 구독을 시작할 수 있도록 허용

계정 및 개인 정보 페이지를 계속 아래로 내려가 개인 정보 보호 정책 영역을 찾으십시오.

고객이 체크아웃할 때 정책을 볼 수 있도록 체크아웃 개인정보 보호정책 텍스트 상자를 채우십시오. 해당 영역에 개인 정보 보호 정책을 표시하지 않으려면 필드를 비워 둡니다.

5단계: 실제 결제 페이지 및 기타 고급 설정 선택

고급 탭으로 이동하여 페이지 설정 섹션을 표시합니다. 이것은 판매자가 체크아웃할 때 고객을 어디로 보낼지 WooCommerce에 알려줍니다.

기본적으로 WooCommerce는 Cart , Checkout , My Account 및 WordPress의 페이지 > 모든 페이지 로 이동하여 찾을 수 있는 이용 약관 페이지를 생성합니다.

그러나 완전히 새로운 페이지를 생성하고 여기에 링크할 수 있는 옵션이 있습니다. 이는 기본 체크아웃 페이지를 무시하고 고객을 맞춤형 페이지로 보냅니다.

고급 탭의 또 다른 옵션은 SSL 인증서가 필요한 강제 보안 체크아웃 입니다.

6단계: 워드프레스 커스터마이저에서 테마 체크아웃 디자인 변경하기

WooCommerce 기능이 있는 WordPress 테마는 종종 WordPress Customizer 도구를 설치하여 결제 스타일을 쉽게 조정할 수 있습니다.

모든 WooCommerce 테마는 고유한 WordPress 커스터마이저 설정을 제공하지만(일부는 설정이 전혀 없음) 전반적으로 체크아웃을 빠르게 제어하려면 WordPress 커스터마이저를 확인하는 것이 좋습니다.

시작하려면 WordPress에서 모양 > 사용자 지정 으로 이동합니다.

사용 가능한 경우 테마에 WordPress 사용자 지정 프로그램의 어딘가에 WooCommerce 버튼이 표시되어야 합니다. 그것을 클릭하십시오.

이것은 스토어프론트 테마의 예일 뿐이며(따라서 같은 내용이 표시되지 않을 수 있음) 테마에 사용자 지정 프로그램에 체크아웃 탭이 있는 것이 일반적입니다. 체크아웃에 대한 제어를 나타낼 수 있는 것 또는 유사한 것을 선택하십시오.

테마에서 제공하는 모든 결제 설정을 살펴보세요. Storefront 테마에서 다음 필드를 선택, 필수 또는 숨김으로 설정할 수 있습니다.

• 회사 이름 필드
• 주소 입력란 2 필드
• 전화 필드

별표로 필수 필드를 강조 표시할 수도 있습니다.

마지막으로 Storefront 테마는 체크아웃 마지막에 개인정보 보호정책 및 이용약관 페이지를 표시하는 옵션을 제공합니다.

방법 2: 페이지 빌더를 사용하여 WooCommerce 체크아웃 필드 및 전체 스타일 편집

Elementor, Beaver Builder 및 Themify와 같은 페이지 빌더는 모두 WooCommerce 체크아웃 페이지에 있는 현재 항목을 재정의하는 WooCommerce 콘텐츠 위젯을 제공합니다.

페이지 빌더는 프리미엄 플랜을 위해 WooCommerce 체크아웃 모듈을 거의 독점적으로 예약하므로 이 기능에 대해 비용을 지불해야 할 가능성이 큽니다. 예를 들어, Pro 플랜과 함께 Elementor Checkout 위젯을 받습니다.

그렇긴 하지만 페이지 빌더를 사용하면 결제 페이지를 거의 완벽하게 제어할 수 있으므로 코딩 지식 없이 WooCommerce 결제를 편집할 수 있는 쉬운 방법이며 연간 약 $50에서 $100에 불과합니다.

이 자습서에서는 Elementor를 사용하여 일반적으로 페이지 빌더에서 체크아웃 사용자 지정이 작동하는 방식을 보여줍니다.

1단계: Elementor에서 지정된 체크아웃 페이지 열기

Elementor에서 WooCommerce 체크아웃을 편집하려면 WooCommerce에서 자동으로 생성한 체크아웃 페이지로 이동해야 합니다. 페이지 > 모든 페이지 에서 찾습니다.

"체크아웃 페이지"라고 표시된 페이지를 연 다음 Elementor로 편집 을 클릭합니다.

2단계: WooCommerce 결제 단축 코드 제거

WooCommerce는 자동으로 “WooCommerce checkout” 단축 코드를 편집기에 입력하면 기본 WooCommerce 체크아웃 모듈이 렌더링됩니다.

목표는 페이지 빌더의 체크아웃 모듈로 교체하는 것입니다. 따라서 WooCommerce 결제 단축 코드를 삭제하십시오.

3단계: Elementor Checkout 위젯에 드롭

이제 페이지 빌더의 체크아웃 위젯을 찾을 차례입니다. Elementor는 검색 창을 사용하거나 WooCommerce 제목 아래를 탐색하여 찾을 수 있는 Checkout 이라는 기능을 제공합니다. Checkout 위젯을 클릭하여 "여기에 위젯 드래그"라고 표시된 빈 페이지로 드래그합니다.

참고: Elementor의 프리미엄 버전으로 업그레이드하지 않은 경우 체크아웃 위젯이 표시되지 않을 수 있습니다. 이것은 대부분의 페이지 빌더의 경우입니다.

4단계: 콘텐츠, 스타일 및 고급 기능 사용자 지정

체크아웃 위젯 위로 드래그하면 Elementor가 체크아웃 미리보기를 렌더링합니다. 그런 다음 왼쪽에 있는 다음 탭을 클릭하여 결제의 모든 측면을 사용자 지정할 수 있습니다.

예를 들어 일반 레이아웃 을 한 열로 전환하고 이름 필드의 자리 표시자 텍스트를 조정할 수 있습니다.

기타 사용자 지정 탭에는 다음이 포함됩니다.

• 결제 세부 정보
• 추가 정보
• 주문
• 쿠폰
• 지불

스타일 탭에서 WooCommerce 결제를 편집하는 방법도 끝이 없습니다.

다음 탭을 사용합니다.

• 섹션
• 타이포그래피
• 양식
• 주문 요약
• 구매 버튼

예를 들어 파란색 구매 버튼을 녹색으로 전환했습니다.

마지막으로 고급 탭은 편집할 수 있는 훨씬 더 강력한 도구를 제공합니다.

• 레이아웃
• 모션 효과
• 변형
• 배경
• 테두리
• 마스크
• 민감도
• 속성
• 맞춤 CSS

이전에 WooCommerce에 대해 "체크아웃 페이지" 로 설정한 페이지를 유지하고 페이지 빌더 체크아웃 위젯에 대해 WooCommerce 체크아웃 단축 코드를 교체하기만 하면 변경 사항을 저장하고 프로세스를 완료할 수 있습니다!

방법 3: 필드 편집을 위한 사용자 지정 플러그인 설치

다음과 같은 많은 WooCommerce 체크아웃 사용자 정의 플러그인이 있습니다.

대부분의 WooCommerce 체크아웃 플러그인은 필드를 수정하고 추가하기 위한 추가 사용자 정의 도구를 제공하지만 Multi-step Checkout 플러그인과 같이 디자인을 완전히 개조하는 몇 가지가 있습니다.

위의 모든 권장 플러그인을 살펴보는 것이 좋지만 플러그인으로 WooCommerce 체크아웃을 편집하는 방법을 이해하는 데 도움이 되도록 Checkout Field Editor 플러그인이 포함된 빠른 자습서를 살펴보겠습니다.

1단계: Checkout Field Editor 플러그인 설치 및 활성화

Checkout Field Editor 플러그인을 설치한 다음 플러그인 활성화 프로세스를 진행합니다.

플러그인이 활성화되면 WordPress에 WooCommerce > Checkout Form 으로 이동하여 액세스할 수 있는 새 탭이 추가됩니다.

2단계: 현재 필드 편집

플러그인은 이제 기본 WooCommerce 체크아웃에 연결되는 플러그인을 제외하고 WooCommerce 체크아웃 내의 모든 현재 필드를 표시하므로 필드를 완전히 제어할 수 있습니다.

다음을 편집할 수 있습니다.

• 청구 필드
• 배송 분야
• 추가 필드

WooCommerce 결제 필드를 편집하려면 변경하려는 필드 옆에 있는 편집 을 클릭합니다. 이 예에서는 회사 이름 필드를 수정합니다.

필드 편집 창에서 다음과 같이 필드 옵션을 수정할 수 있습니다.

• 상표
• 자리 표시자
• 기본값
• 수업
• 확인

고객이 필드를 채울 의무가 없도록 필수 상자를 선택 취소할 수도 있습니다. 체크아웃에 필드가 전혀 표시되지 않도록 필드를 비활성화할 수도 있습니다. 저장 후 닫기 를 클릭해야 합니다.

플러그인은 일반적으로 그 이후에 모든 것을 저장하지만 변경 사항 저장 버튼을 다시 클릭하여 작동하는지 확인할 수 있습니다.

보시다시피 결제 영역에서 회사 이름 필드를 제거했습니다.

그리고 그것은 프론트 엔드 체크 아웃에서 사라졌습니다.

자리 표시자 텍스트와 같은 것을 편집할 수도 있습니다. 이 경우 해당 필드를 열고 설정을 변경하는 것과 동일한 프로세스입니다.

이제 체크아웃의 이름 필드에 새로운 자리 표시자 텍스트가 표시됩니다.

3단계: WooCommerce 결제에 새 필드 추가

완전히 새로운 필드를 추가하려면 필드 추가 버튼을 클릭하십시오.

다음과 같은 옵션 중에서 선택하여 필드 유형 을 선택합니다.

• 텍스트
• 숫자
• 숨겨진
• 비밀번호
• 핸드폰
• 체크박스
• 월
• URL
• 그리고 더 많은

예를 들어 숫자 필드를 만들고 고객에게 로열티 리워드 번호를 입력하도록 요청합니다. 또한 자리 표시자, 기본값 및 필수 필드인지 여부와 같은 요소를 지정할 수 있습니다.

사용 상자를 선택했는지 확인한 다음 저장 후 닫기 를 클릭합니다.

4단계: 결과 보기

백엔드에서 목록 맨 아래에 새 체크아웃 필드가 표시됩니다. 기본적으로 끝에 배치되지만 클릭하고 드래그하여 재정렬할 수 있습니다.

그리고 새 필드는 프런트엔드 체크아웃 모듈에도 나타납니다.

오늘 완벽한 결제 페이지를 만드세요

기본 WooCommerce 결제 설정으로 시작하여 원하는 결과를 얻는 데 도움이 되는지 확인하는 것이 좋습니다. 고급 편집을 위해 사용자 정의 필드 사용을 고려하십시오. 그리고 고급이지만 비교적 구현하기 쉬운 사용자 정의의 경우 제안된 페이지 빌더 중 하나를 사용하십시오.

WooCommerce 결제를 편집하는 방법에 대한 주요 질문은 무엇입니까? 의견에 당신의 생각을 공유하십시오!