Divi로 WooCommerce 결제 페이지 템플릿을 만드는 방법

WooCommerce 체크아웃 페이지를 디자인하려면 일반적으로 백엔드의 PHP 템플릿 파일에 대한 고급 사용자 정의와 약간의 사용자 정의 CSS가 필요합니다. 하지만 Divi의 Woo Module을 사용하면 이 과정이 쉽고 즐거워집니다! Divi를 사용하여 WC 체크아웃 페이지를 편집하면 해당 WC 단축 코드가 강력한 내장 디자인 옵션을 사용하여 시각적으로 디자인할 준비가 된 동적 Woo 체크아웃 모듈의 구조화된 레이아웃으로 변환됩니다. 이렇게 하면 결제 페이지 디자인을 완전히 제어할 수 있습니다.

이 튜토리얼에서는 Divi를 사용하여 완전히 맞춤형 WooCommerce Checkout 페이지를 처음부터 만드는 방법을 보여줍니다. 먼저 체크아웃 페이지에 사용할 수 있는 동적 Woo 모듈을 사용하여 WooCommerce 체크아웃 페이지를 디자인합니다. 완료되면 Theme Builder에서 결제 페이지 템플릿에 결제 페이지 디자인을 추가하는 방법을 보여드리겠습니다. 따라서 실제 체크아웃 페이지를 사용자 정의하거나 체크아웃 페이지 템플릿을 생성하려는 경우 Divi에서 처리할 수 있습니다. 곧 멋진 체크아웃 페이지를 디자인하게 될 것입니다.

시작하자!

엿보기

전후

다음은 이 튜토리얼에서 디자인할 새로운 체크아웃 페이지와 비교한 Divi의 기본 체크아웃 페이지입니다.

다음은 데스크톱 및 모바일의 Checkout 페이지 디자인에 대해 자세히 살펴보겠습니다.

이 체크아웃 페이지 디자인의 라이브 데모도 확인할 수 있습니다.

무료로 체크아웃 페이지 레이아웃 다운로드

이 튜토리얼의 체크아웃 페이지 템플릿 디자인을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 겁니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

Divi용 장바구니 및 결제 페이지 템플릿 세트 다운로드

이 체크아웃 페이지 디자인은 Divi용 무료 장바구니 및 체크아웃 페이지 템플릿 세트의 일부로 다운로드할 수도 있습니다.

튜토리얼로 들어가 볼까요?

WooCommerce 결제 페이지 및 Divi 정보

Divi 사이트에 WooCommerce를 설치할 때마다 WooCommerce(WC)는 쇼핑 페이지, 장바구니 페이지, 결제 페이지 및 계정 페이지를 포함한 주요 WC 페이지를 생성합니다. 페이지의 콘텐츠는 백엔드 WordPress 블록 편집기에서 단축 코드를 사용하여 배포됩니다.

이 체크아웃 페이지에서 Divi Builder를 활성화하면 WooCommerce 체크아웃 페이지의 각 콘텐츠 요소가 페이지 스타일을 지정하는 데 사용할 수 있는 Divi Woo 모듈로 로드됩니다.

Divi에서 체크아웃 페이지를 디자인하기 위한 Woo 모듈

Divi는 페이지 템플릿에 동적 콘텐츠를 추가하는 데 핵심적인 다양한 모듈과 함께 제공됩니다. 이들 중 일부는 체크아웃 페이지와 관련된 Woo 모듈을 포함합니다.

Checkout 페이지 또는 템플릿을 구축하는 데 핵심적인 모듈은 다음과 같습니다.

• 게시물 제목 – 체크아웃 페이지 템플릿을 구축할 때 체크아웃 페이지의 제목을 동적으로 표시합니다.
• Woo Notice - 이 모듈은 다양한 페이지 유형(장바구니 페이지, 상품 페이지, 결제 페이지)으로 설정할 수 있습니다. 필요에 따라 사용자에게 중요한 알림을 동적으로 표시합니다.
• Woo Checkout Billing – 이 모듈은 체크아웃 중에 사용된 청구 세부 정보 양식을 표시합니다.
• Woo Checkout Shipping – 이 모듈은 체크아웃 중에 사용된 배송 세부 정보 양식을 표시합니다.
• Woo Checkout Information – 이 모듈은 체크아웃 중에 사용되는 추가 정보 양식을 표시합니다.
• Woo Checkout Details – 이 모듈은 결제하는 동안 구매 중인 제품과 가격을 포함한 주문 세부 정보를 표시합니다.
• Woo Checkout 결제 – 이 모듈은 결제 중 결제 유형 선택 및 결제 양식 세부 정보를 표시합니다.

또 다른 선택적 woo 모듈:

• Woo Breadcrumb – WooCommerce Breadcrumb 탐색 모음을 표시합니다.

결제 페이지 또는 템플릿 디자인

언급했듯이 Divi Woo 모듈을 사용하여 맞춤형 WooCommerce Checkout 페이지 를 쉽게 디자인할 수 있습니다. 그러나 동일한 디자인 프로세스를 사용하여 사용자 정의 Checkout 템플릿 을 빌드하도록 선택할 수도 있습니다. 이 자습서에서는 체크아웃 페이지에 대한 사용자 지정 체크아웃 페이지 레이아웃을 빌드합니다. 그런 다음 사용자 지정 결제 페이지 레이아웃을 사용하여 Divi 테마 빌더를 사용하여 결제 페이지 템플릿을 만드는 방법을 보여드리겠습니다.

Divi로 WooCommerce Checkout 페이지 레이아웃 디자인하기

이 WooCommerce 체크아웃 페이지 튜토리얼의 목표는 WooCommerce에서 WooCommerce 체크아웃 페이지로 지정된 WooCommerce 체크아웃 페이지에 대한 사용자 정의 페이지 레이아웃을 만드는 것입니다. 튜토리얼이 끝나면 이 체크아웃 페이지 레이아웃을 쉽게 저장하고 가져와 테마 빌더를 사용하여 새 체크아웃 페이지 템플릿을 만드는 방법을 보여줍니다.

시작하기: WooCommerce 체크아웃 페이지 편집하기

WordPress 대시보드에서 클릭하여 WooCommerce 체크아웃 페이지를 편집합니다. 기본적으로 페이지에는 결제 페이지 콘텐츠를 생성하는 데 사용되는 단축 코드만 포함됩니다.

페이지 편집기 상단에 있는 Use The Divi Builder 버튼을 클릭합니다.

그런 다음 Divi Builder로 편집 버튼을 클릭하여 Divi Builder를 시작합니다.

처음부터 레이아웃 지우기

이전에 언급했듯이 페이지는 체크아웃 페이지의 콘텐츠를 구성하는 모든 사용자 정의 가능한 Divi 모듈(키 Woo 모듈 포함)과 함께 로드됩니다. 기존 레이아웃을 사용하고 원하는 경우 이미 있는 모듈 사용자 정의를 시작할 수 있습니다. 그러나 이 튜토리얼에서는 처음부터 시작할 것입니다.

레이아웃을 지우려면 페이지 하단의 설정 메뉴를 열고 레이아웃 지우기 버튼(쓰레기통 아이콘)을 클릭하고 예를 선택합니다.

섹션, 행 및 열 생성

섹션 배경

시작하려면 다음과 같이 새 일반 섹션에 배경색을 추가하십시오.

• 배경색: #f7f3f0

행과 열

다음으로 섹션에 1열 행을 추가합니다.

동적 결제 페이지 제목 만들기

결제 페이지에 필요한 동적 페이지 제목을 만들려면 열에 게시물 제목 모듈을 추가합니다.

게시물 제목 내용

게시물 제목 설정에서 다음과 같이 제목만 표시하도록 요소를 업데이트합니다.

• 제목 표시: 예
• 메타 표시: 아니요
• 추천 이미지 표시: 아니요

게시물 제목 텍스트

게시물 제목 텍스트의 스타일을 지정하려면 디자인 탭에서 다음을 업데이트하세요.

• 제목 글꼴: DM Serif 디스플레이
• 제목 텍스트 색상: #fff
• 제목 텍스트 크기: 80px(데스크톱), 60px(태블릿), 42px(휴대폰)
• 제목 줄 높이: 1.2em

체크아웃 페이지용 Dynamic Woo 알림 모듈 디자인

체크아웃 페이지와 상호 작용할 때 사용자가 알림을 가장 잘 볼 수 있도록 페이지 상단에 Woo 알림 모듈을 추가하는 것은 항상 좋은 생각입니다. 우리는 필요할 때만 표시되는 알림을 디자인하고 있음을 명심하십시오.

Woo 알림 모듈을 추가하려면 게시물 제목 모듈 아래에 새로운 Woo 알림 모듈을 클릭하여 추가하십시오.

Woo 알림 페이지 유형 및 배경

다음으로 Woo Notice의 페이지 유형 및 배경색을 다음과 같이 업데이트합니다.

• 페이지 유형: 결제 페이지
• 배경색: rgba(153,158,117,0.1)

중요: woo 알림이 제대로 작동하도록 체크아웃 페이지를 페이지 유형으로 선택해야 합니다.

Woo 알림 제목 텍스트

디자인 탭에서 다음과 같이 제목 텍스트 스타일을 업데이트합니다.

• 제목 글꼴: Roboto
• 제목 글꼴 두께: 중간
• 제목 텍스트 색상: #fff
• 제목 텍스트 크기: 14px
• 제목 줄 높이: 1.8em

그런 다음 링크 탭을 선택하고 제목 링크 텍스트 색상을 업데이트합니다.

• 링크 텍스트 색상: #999e75

Woo 통지 본문 텍스트

제목 텍스트 다음에 본문 텍스트를 다음과 같이 업데이트합니다.

• 본문 글꼴: Roboto
• 본문 색상: #fff
• 바디 라인 높이: 1.8em

그런 다음 링크 탭을 선택하고 링크 텍스트를 업데이트합니다.

• 링크 글꼴 두께: 굵게
• 링크 텍스트 색상: #999e75

Woo 알림 필드 레이블

체크아웃 페이지 알림에는 로그인 양식 및 쿠폰 코드와 같은 항목에 대한 필드 및 필드 레이블이 포함됩니다. 이러한 필드의 필드 레이블 스타일을 편집하려면 다음을 업데이트하십시오.

1. 필수 필드 표시기 색상: #fff
2. 필드 레이블 글꼴: Roboto
3. 필드 레이블 글꼴 두께: 굵게

Woo 알림 필드

다음으로 다음과 같이 필드 스타일 옵션을 업데이트합니다.

1. 자리 표시자 색상: #fff
2. 필드 배경색: 투명
3. 필드 텍스트 색상: #fff
4. 필드 포커스 텍스트 색상: #fff
5. 필드 패딩: 상단 12px, 하단 12px
6. 필드 테두리 너비: 1px
7. 필드 테두리 색상: rgba(255,255,255,0.32)

우 알림 버튼

1. 버튼에 사용자 정의 스타일 사용: 예
2. 버튼 텍스트 크기: 14px
3. 버튼 텍스트 색상: #fff
4. 버튼 배경색: #999e75
5. 버튼 테두리 너비: 1px
6. 버튼 테두리 색상: #999e75
7. 버튼 테두리 반경: 0px
8. 버튼 문자 간격: 1px
9. 버튼 글꼴: Roboto
10. 버튼 글꼴 두께: 굵게
11. 버튼 글꼴 스타일: TT
12. 버튼 패딩: 상단 12픽셀, 하단 12픽셀, 왼쪽 24픽셀, 오른쪽 24픽셀

우 알림 양식

각 통지 양식은 양식 옵션 그룹에서 스타일을 지정할 수 있습니다. 양식에 밝은 테두리를 지정하려면 다음을 업데이트하십시오.

1. 둥근 모서리 형태: 0px
2. 양식 테두리 너비: 1px
3. 양식 테두리 색상: rgba(255,255,255,0.32)

Woo 통지 상자 섀도우

woo 알림 표시줄에 상단 테두리와 같은 디자인을 제공하려면 다음과 같이 box-shadow 옵션을 업데이트하십시오.

1. 박스 섀도우: 스크린샷 참조
2. 상자 그림자 수평 위치: 0px
3. 상자 그림자 수직 위치: 3px
4. 그림자 색상: #999e75

Woo Checkout 청구 모듈 설계

이제 페이지 제목과 알림이 준비되었으므로 체크아웃 페이지의 또 다른 핵심 요소인 Woo Checkout Billing 콘텐츠를 추가할 준비가 되었습니다.

청구 콘텐츠를 추가하기 전에 5분의 3의 2/5 열 구조로 새 행을 만듭니다.

1열에서 Woo Checkout Billing 모듈을 추가합니다.

Woo Checkout 청구 제목 텍스트

제목 텍스트 옵션을 사용자 지정하여 제목 텍스트를 대상으로 지정할 수 있습니다.

Woo Checkout Billing 설정 모달을 열고 디자인 탭에서 다음을 업데이트합니다.

1. 제목 글꼴: DM Serif 디스플레이
2. 제목 텍스트 색상: #fff
3. 제목 텍스트 크기: 30px(데스크톱), 24px(태블릿), 18px(휴대폰)
4. 제목 줄 높이: 1.4em

Woo Checkout 청구 필드 및 필드 레이블

통지 모듈과 마찬가지로 이 모듈에는 필드 및 필드 레이블의 스타일을 지정하는 옵션도 있습니다. 모든 필드 및 필드 레이블이 페이지 전체에서 일치하기를 원하기 때문에 이미 생성된 알림 모듈에서 필드 및 필드 레이블 스타일을 복사하고 해당 스타일을 Woo Checkout Billing 모듈에 붙여넣을 수 있습니다.

방법은 다음과 같습니다.

• 페이지 상단에서 알림 모듈의 설정을 엽니다.
• 디자인 탭에서 필드 레이블 옵션 그룹을 마우스 오른쪽 버튼으로 클릭합니다.
• 오른쪽 클릭 메뉴에서 "필드 레이블 스타일 복사"를 선택합니다.

이제 스타일이 복사되면 Woo Checkout Billing 모듈의 상단 메뉴 모음에서 추가 설정 메뉴를 엽니다. 그런 다음 메뉴에서 "필드 레이블 스타일 붙여넣기"를 선택합니다.

동일한 프로세스를 반복하여 필드 스타일을 복사할 수도 있습니다.

방법은 다음과 같습니다.

• 페이지 상단에서 알림 모듈의 설정을 엽니다.
• 디자인 탭 아래의 필드 옵션 그룹을 마우스 오른쪽 버튼으로 클릭합니다.
• 오른쪽 클릭 메뉴에서 "필드 스타일 복사"를 선택합니다.

이제 스타일이 복사되면 Woo Checkout Billing 모듈의 상단 메뉴 모음에서 추가 설정 메뉴를 엽니다. 그런 다음 메뉴에서 "필드 스타일 붙여넣기"를 선택합니다.

Woo Checkout 결제 양식 공지

양식 알림은 양식을 작성할 때 발생할 수 있는 알림이나 오류를 동적으로 표시하는 것입니다. 양식 알림의 스타일을 지정하려면 Woo Checkout 결제 설정을 열고 다음을 업데이트하세요.

• 양식 통지 배경색: #e0816b
• 양식 공지 패딩: 상단 8px, 하단 8px
• 양식 공지 글꼴: Roboto
• 양식 공지 텍스트 크기: 14px

Woo Checkout 청구 간격 및 테두리

디자인을 마무리하기 위해 다음과 같이 모듈에 약간의 패딩과 밝은 테두리를 지정해 보겠습니다.

• 패딩: 상단 16px, 하단 16px, 왼쪽 16px, 오른쪽 16px
• 테두리 너비: 1px
• 테두리 색상: rgba(255,255,255,0.1)

Woo Checkout 배송 및 Woo Checkout 정보 디자인

결제 페이지 템플릿을 만드는 데 필요한 다음 핵심 요소는 Woo Checkout Shipping 모듈과 Woo Checkout Information 모듈입니다. Woo Checkout 배송 모듈은 결제를 완료하기 전에 배송 정보를 입력하는 데 필요한 양식을 표시합니다. 그리고 Woo Checkout Information 모듈은 사용자가 체크아웃 전에 추가 정보를 입력할 수 있는 입력 양식을 표시합니다.

Woo Checkout 배송 모듈 추가

이 레이아웃의 경우 Woo Checkout Billing 모듈 바로 아래에 새로운 Woo Checkout Shipping 모듈을 추가합니다.

Woo Checkout 배송 모듈 추가

Woo Checkout Shipping 모듈 아래에 Woo Checkout Information 모듈을 추가하십시오.

Woo Checkout Shipping 및 Woo Checkout 정보 모듈 스타일링

이 두 woo 모듈(Checkout Shipping 및 Checkout Information)은 모두 Woo Checkout Billing 모듈의 디자인과 일치해야 하므로 필요한 스타일을 각각에 복사할 수 있습니다.

제목 텍스트 스타일 복사 및 붙여넣기

제목 텍스트 스타일부터 시작하겠습니다. Woo Checkout Billing 모듈에 대한 설정을 열고 오른쪽 클릭 메뉴를 사용하여 제목 텍스트 스타일을 복사합니다.

그런 다음 다중 선택 기능을 사용하여 Woo Checkout Shipping 및 Woo Checkout 정보 모듈을 모두 선택하십시오. 그런 다음 제목 텍스트 스타일을 선택한 모듈 중 하나에 붙여넣습니다.

필드 레이블 스타일 복사 및 붙여넣기

동일한 프로세스를 반복하여 필드 레이블 스타일도 복사하여 붙여넣습니다.

Woo Checkout Billing 모듈에 대한 설정을 열고 오른쪽 클릭 메뉴를 사용하여 필드 레이블 스타일을 복사합니다.

그런 다음 다중 선택 기능을 사용하여 Woo Checkout Shipping 및 Woo Checkout 정보 모듈을 모두 선택하십시오. 그런 다음 필드 레이블 스타일을 선택한 모듈 중 하나에 붙여넣습니다.

필드 스타일 복사 및 붙여넣기

동일한 과정을 반복하여 필드의 스타일도 복사하여 붙여넣습니다.

Woo Checkout Billing 모듈에 대한 설정을 열고 오른쪽 클릭 메뉴를 사용하여 필드의 스타일을 복사합니다.

그런 다음 다중 선택 기능을 사용하여 Woo Checkout Shipping 및 Woo Checkout 정보 모듈을 모두 선택하십시오. 그런 다음 필드 스타일을 선택한 모듈 중 하나에 붙여넣습니다.

패딩 복사 및 붙여넣기

같은 과정을 반복하여 패딩도 복사하여 붙여넣습니다.

Woo Checkout Billing 모듈에 대한 설정을 열고 오른쪽 클릭 메뉴를 사용하여 패딩을 복사합니다.

그런 다음 다중 선택 기능을 사용하여 Woo Checkout Shipping 및 Woo Checkout 정보 모듈을 모두 선택하고 패딩을 선택한 모듈 중 하나에 붙여넣습니다.

테두리 복사 및 붙여넣기

테두리도 복사하여 붙여넣는 동일한 과정을 반복합니다.

Woo Checkout Billing 모듈에 대한 설정을 열고 마우스 오른쪽 버튼 클릭 메뉴를 사용하여 테두리를 복사합니다.

그런 다음 다중 선택 기능을 사용하여 Woo Checkout Shipping 및 Woo Checkout 정보 모듈을 모두 선택하고 테두리 스타일을 선택한 모듈 중 하나에 붙여넣습니다.

Woo Checkout 세부 정보 모듈 디자인

배송 및 추가 정보 콘텐츠가 설계되었으므로 Woo Checkout Details 콘텐츠를 추가할 준비가 되었습니다. 이것은 구매 주문의 세부 정보를 표시하는 결제 페이지의 또 다른 핵심 요소입니다. 여기에는 제품 목록, 소계 및 구매 총액이 포함됩니다. 또한 링크로 제거할 수 있는 적용된 쿠폰 할인도 표시됩니다.

체크아웃 세부정보에서 같은 행의 2열에 새로운 Woo Checkout Details 모듈을 추가합니다.

Woo Checkout 세부 정보 제목 텍스트

Woo Checkout Details 설정 모달에서 디자인 탭으로 이동하여 다음과 같이 제목 텍스트를 업데이트합니다.

• 제목 글꼴: DM Serif 디스플레이
• 제목 글꼴 두께: 굵게
• 제목 텍스트 색상: #fff
• 제목 텍스트 크기: 24px(데스크톱), 22px(태블릿), 18px(휴대폰)
• 제목 줄 높이: 1.4em

Woo Checkout 세부 정보 열 레이블

열 레이블의 스타일을 지정하려면 다음을 업데이트하세요.

• 열 레이블 글꼴: Roboto
• 열 레이블 글꼴 두께: 굵게
• 열 레이블 텍스트 색상: rgba(255,255,255,0.32)

Woo Checkout 세부 정보 본문 텍스트

목록의 각 열 아래에 있는 항목을 대상으로 하는 본문 텍스트의 스타일을 지정하려면 다음을 업데이트하십시오.

• 본문 글꼴: Roboto
• 본문 색상: #fff

링크 탭에서 링크 텍스트 색상을 업데이트합니다.

• 링크 텍스트 색상: #e0816b

Woo Checkout 세부 정보 테이블 테두리

이 디자인에서는 테이블 테두리를 모두 제거합니다. 이렇게 하려면 다음을 업데이트하십시오.

• 표 테두리 너비: 0px

Woo Checkout 세부 정보 테이블 셀

표 내에서 표 셀의 스타일을 지정하려면 다음을 업데이트하십시오.

• 표 셀 패딩: 0px 왼쪽
• 표 셀 테두리 스타일: 없음

이렇게 하면 표 셀 내의 내용이 왼쪽으로 정렬되고 표 셀 테두리가 완전히 제거됩니다.

Woo Checkout 세부 정보 패딩 및 테두리

모듈의 디자인을 다른 모듈과 일관되게 유지하려면 다음과 같이 패딩과 테두리를 업데이트하세요.

• 패딩: 상단 16px, 하단 16px, 왼쪽 16px, 오른쪽 16px
• 테두리 너비: 1px
• 테두리 색상: rgba(255,255,255,0.1)

Woo Checkout 결제 모듈 설계

이제 결제 세부 정보 콘텐츠가 완료되었으므로 Woo Checkout Payment 콘텐츠를 추가할 준비가 되었습니다. 결제 페이지의 마지막 핵심 요소입니다. 여기에는 기본 체크아웃 버튼뿐만 아니라 다양한 지불 옵션에 대한 클릭 가능한 라디오 버튼 토글이 포함됩니다. 또한 기본 제공 양식 알림이 포함되어 있습니다.

결제 결제 콘텐츠를 추가하려면 2열의 결제 세부정보 아래에 새로운 Woo Checkout 결제 모듈을 추가하세요.

Woo Checkout 결제 배경

Woo Checkout 결제 설정을 열고 모듈에 투명한 배경을 지정합니다.

• 배경색: 투명

Woo Checkout 결제 본문 텍스트

다음으로 본문 스타일을 다음과 같이 업데이트합니다.

• 본문 글꼴: Roboto

링크 탭에서 링크 텍스트 색상을 업데이트합니다.

• 링크 텍스트 색상: #999e75

Woo Checkout 결제 라디오 버튼

다음으로 라디오 버튼의 스타일을 다음과 같이 업데이트합니다.

• 라디오 버튼 텍스트 색상: #fff
• 라디오 버튼 글꼴: Roboto
• 라디오 버튼 글꼴 두께: 굵게

Woo Checkout 결제 툴팁

툴팁은 라디오 버튼 토글이 열릴 때 표시되는 텍스트 상자입니다.

다음과 같이 툴팁 스타일을 업데이트해 보겠습니다.

• 툴팁 배경색: 투명
• 툴팁 여백: -10px 상단, 17px 왼쪽
• 툴팁 글꼴: Roboto

Woo Checkout 결제 폼 공지

Woo Checkout 결제 모듈은 동일한 양식 통지 옵션을 공유하기 때문에 Woo Checkout 청구 모듈에서 기존 양식 통지 스타일을 복사하여 Woo Checkout 지불 모듈에 붙여넣을 수 있습니다.

Woo Checkout 결제 버튼

Woo Checkout Payment 모듈의 체크아웃 버튼 스타일을 지정하려면 Woo Notice 모듈에서 버튼 스타일을 복사합니다.

그런 다음 버튼 스타일을 Woo Checkout 결제 모듈에 붙여넣습니다.

Woo Checkout 결제 패딩 및 테두리

디자인을 완성하려면 다음과 같이 패딩과 테두리를 추가합니다.

• 패딩: 상단 16px, 하단 16px, 왼쪽 16px, 오른쪽 16px
• 둥근 모서리: 0px
• 테두리 너비: 1px
• 테두리 색상: rgba(255,255,255,0.1)

결과

이제 결제 페이지의 모습입니다!

필요에 따라 더 많은 콘텐츠 추가

이 시점에서 결제 페이지 템플릿의 모든 핵심 요소가 있습니다. 하지만 여기서 멈출 필요는 없습니다. 필요에 따라 페이지에 원하는 콘텐츠를 추가할 수 있습니다.

이 체크아웃 페이지 템플릿의 추천 데모(여기에서 다운로드 가능)를 위해 일부 사용자 정의 탐색 링크가 있는 고정 사이드바를 포함했습니다.

결제 페이지에 대한 사용자 정의 템플릿 만들기

체크아웃 페이지 템플릿을 만들고 싶다면 테마 빌더를 사용하여 체크아웃 페이지 템플릿에서 했던 것처럼 체크아웃 페이지 템플릿 레이아웃을 만들 수 있습니다. 그러나 이 튜토리얼에서 디자인한 페이지 레이아웃이 이미 있으므로 이 레이아웃을 체크아웃 페이지 템플릿에 추가하기만 하면 됩니다.

WooCommerce 페이지 레이아웃을 Divi 라이브러리에 저장

결제 페이지 레이아웃을 결제 페이지 템플릿에 추가하려면 먼저 페이지 레이아웃을 Divi 라이브러리에 저장해야 합니다.

이렇게 하려면 체크아웃 페이지 하단에서 Divi Builder 설정 메뉴를 엽니다. 라이브러리에 추가 아이콘을 클릭하고 레이아웃에 이름을 지정한 다음 라이브러리에 저장 을 클릭합니다.

새 결제 페이지 템플릿 만들기

체크아웃 페이지 레이아웃이 라이브러리에 저장되면 새 체크아웃 페이지 템플릿을 만들 준비가 된 것입니다.

방법은 다음과 같습니다.

1. WordPress 대시보드로 이동하여 Divi > 테마 빌더로 이동합니다.
2. 그런 다음 빈 회색 상자 영역 안에 있는 새 템플릿 추가 더하기 아이콘을 클릭하여 새 템플릿을 추가합니다.
3. 템플릿 설정 모달의 "사용 위치" 탭에서 WooCommerce 페이지 목록 아래의 체크아웃 을 선택합니다.
4. 마지막으로 템플릿 만들기를 클릭합니다.

결제 템플릿에 결제 페이지 레이아웃 추가

새 Checkout 템플릿이 생성되면 템플릿의 "사용자 정의 본문 추가" 영역을 클릭합니다. 팝업 목록 내 에서 라이브러리에서 추가 를 선택합니다.

라이브러리에서 로드 팝업의 저장된 레이아웃 탭에서 라이브러리에 저장한 체크아웃 페이지 레이아웃을 선택합니다.

완료되면 테마 빌더에서 Checkout 템플릿을 사용할 수 있습니다. 템플릿을 수정하려면 템플릿의 본문 영역에 있는 수정 아이콘을 클릭하세요.

최종 결과

결제 페이지 템플릿의 최종 결과를 확인해 보겠습니다.

다음은 태블릿 및 전화 장치에서 어떻게 보이는지입니다.

마지막 생각들

사용자 정의 WooCommerce Checkout Page 템플릿을 디자인하는 프로세스는 Divi의 강력한 시각적 페이지 빌더와 직관적인 Woo 모듈을 통해 크게 단순화되고 증폭됩니다. 이 튜토리얼에서는 체크아웃 페이지를 구성하는 핵심 요소를 통합하는 데 집중했습니다. 그러나 다른 모든 강력한 Divi 모듈과 기능을 사용하여 결제 페이지를 완전히 새로운 수준으로 끌어올릴 수 있습니다. 바라건대 이것은 Divi 디자인 기술을 향상시키고 더 중요한 것은 더 많은 전환으로 이어질 것입니다.

자세한 내용은 Divi에서 WooCommerce 장바구니 페이지 템플릿을 디자인하는 방법을 확인하거나 Divi를 위한 멋진 무료 장바구니 및 체크아웃 페이지 템플릿 세트를 다운로드하세요.

댓글로 여러분의 의견을 기다리겠습니다.

건배!