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

Rifat Dec 27, 2021

WooCommerce 체크아웃 페이지를 만들려면 일반적으로 백엔드의 PHP 템플릿 파일에 대한 상당한 사용자 지정과 상당한 양의 사용자 지정 CSS가 필요합니다. 그러나 이 절차는 Divi 의 Woo 모듈 덕분에 재미있고 간단해졌습니다! Divi를 사용하여 WC 체크아웃 페이지를 업데이트하면 WC 단축 코드가 정교한 내장 디자인 옵션을 활용하여 시각적으로 스타일을 지정할 수 있는 동적 Woo 체크아웃 모듈의 구조화된 레이아웃으로 변환됩니다. 이를 통해 결제 페이지의 디자인을 완벽하게 제어할 수 있습니다.

이 가이드는 Divi 를 사용하여 완전히 독특한 WooCommerce 체크아웃 페이지를 만드는 방법을 알려줍니다. 먼저 체크아웃 페이지에 액세스할 수 있는 동적 Woo 모듈을 활용하여 WooCommerce 체크아웃 페이지를 생성합니다. 그런 다음 완료되면 Theme Builder에서 결제 페이지 템플릿에 결제 페이지 디자인을 적용하는 방법을 보여 드리겠습니다. 따라서 체크아웃 페이지 자체를 수정하거나 체크아웃 페이지 템플릿을 개발하려는 경우 Divi에서 처리할 수 있습니다. 시각적으로 매력적인 체크아웃 페이지를 금방 만들 수 있을 것입니다.

디자인 미리보기

이것이 우리의 디자인이 될 것입니다.

WooCommerce Chcheck Out 페이지 및 Divi

Divi 사이트에 WooCommerce를 설치하면 장바구니 페이지, 장바구니 페이지, 결제 프로세스 및 계정 페이지와 같은 기본 WC 페이지가 구축됩니다. 그런 다음 백엔드 WordPress 블록 편집기에서 단축 코드를 사용하여 페이지 콘텐츠가 배포됩니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

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

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

Divi에는 페이지 템플릿에 대화형 콘텐츠를 추가하기 위한 몇 가지 필수 모듈이 있습니다. 이들 중 일부에는 체크아웃 페이지에 맞게 조정된 Woo 모듈이 포함되어 있습니다.

다음 모듈은 Checkout 페이지 또는 템플릿을 만드는 데 필수적입니다.

게시물 제목: Â 체크아웃 페이지 템플릿을 생성할 때 체크아웃 페이지의 제목이 동적으로 표시됩니다.

Woo 알림: Â 이 모듈은 많은 페이지 종류(장바구니, 제품 및 결제)에 할당될 수 있습니다. 필요에 따라 사용자에게 중요한 알림을 동적으로 표시합니다.

Woo Checkout Billing: Â 이 모듈은 체크아웃 과정에서 사용되는 청구 세부사항 양식을 표시합니다.

Woo Checkout 배송: Â 이 모듈은 결제 프로세스 중에 나타나는 배송 세부 정보 양식을 표시합니다.

Woo Checkout Information: 이 모듈은 체크아웃 프로세스 전반에 걸쳐 사용되는 추가 정보 양식을 보여줍니다.

Woo Checkout Details: Â 이 모듈은 구매 중인 제품과 가격을 포함하여 체크아웃하는 동안 주문 세부 정보를 표시합니다.

Woo Checkout 결제: Â 이 모듈은 결제 중 결제 유형 선택 및 결제 양식 세부 정보를 표시합니다.

다른 woo 모듈 옵션:

Woo Breadcrumbs: Â WooCommerce Breadcrumb 탐색 모음이 표시됩니다.

결제 페이지 또는 템플릿 만들기

앞서 말했듯이 Divi Woo 모듈을 사용하여 맞춤형 WooCommerce Checkout 페이지를 쉽게 만들 수 있습니다. 그러나 동일한 디자인 프로세스를 사용하여 사용자 정의 Checkout 템플릿을 생성할 수 있습니다. 이 튜토리얼은 체크아웃 페이지에 대한 커스텀 체크아웃 페이지 레이아웃을 생성할 것입니다. 그런 다음 Divi 테마 빌더를 사용하여 사용자 지정 결제 페이지 레이아웃을 활용하여 결제 페이지 템플릿을 만드는 방법을 보여 드리겠습니다.

Divi를 사용하여 WooCommerce Checkout 페이지 레이아웃 만들기

이 WooCommerce Checkout Page 튜토리얼의 목적은 WooCommerce에서 WooCommerce Checkout Page라는 이름의 WooCommerce Checkout 페이지에 대한 사용자 정의 페이지 레이아웃을 개발하는 것입니다. 수업이 끝나면 이 결제 페이지 레이아웃을 손쉽게 저장하고 테마 빌더로 가져와서 새로운 결제 페이지 템플릿을 구축하는 방법을 보여드리겠습니다.

WooCommerce 체크아웃 페이지 편집

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

페이지 편집기 상단에서 Use Divi Builder 옵션을 클릭합니다.

Divi 빌더로 편집을 선택하십시오.

처음부터 시작

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

페이지 하단의 옵션 메뉴로 들어가 레이아웃 지우기 버튼(휴지통 아이콘)에 대해 예를 선택하여 레이아웃을 지웁니다.

섹션 배경

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

  • 배경색: #264653

행과 열

다음 단계는 이 섹션에 1열 행을 추가하는 것입니다.

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

체크아웃 페이지의 페이지 제목을 동적으로 만들려면 열에 게시물 제목 모듈을 추가하십시오.

게시물 제목 내용

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

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

게시물 제목 텍스트

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

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

다이나믹 우 알림 모듈

체크아웃 페이지에 참여할 때 알림을 보려면 페이지 상단에 Woo 알림 모듈을 배치하는 것이 좋습니다. 필요할 때만 표시되는 알림을 만들고 있음을 명심하십시오.

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

Woo 알림 페이지 유형 및 배경

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

  • 페이지 유형: 결제 페이지
  • 배경색: #2a9d8f

제목 텍스트

디자인 탭에서 다음 설정을 업데이트합니다.

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

Woo 알림 필드

로그인 양식 및 쿠폰 코드와 같은 항목에 대한 필드 및 필드 이름은 체크아웃 페이지 알림에 포함되어 있습니다. 이러한 필드의 필드 레이블 스타일을 변경하려면 다음과 같이 변경하십시오.

  • 필수 필드 표시기 색상: #e9c46a
  • 필드 레이블 글꼴: Roboto
  • 필드 레이블 글꼴 두께: 굵게
  • 자리 표시자 색상: #e9c46a
  • 필드 배경색: 투명
  • 필드 텍스트 색상: #e9c46a
  • 필드 포커스 텍스트 색상: #e9c46a
  • 필드 패딩: 상단 12px, 하단 12px
  • 필드 테두리 너비: 1px
  • 필드 테두리 색상: rgba(255,255,255,0.32)

우 알림 버튼

버튼을 사용자 정의할 때입니다.

  1. 버튼에 사용자 정의 스타일 사용: 예
  2. 버튼 텍스트 크기: 14px
  3. 버튼 텍스트 색상: #e9c46a
  4. 버튼 배경색: #2a9d8f
  5. 버튼 테두리 너비: 1px
  6. 버튼 테두리 색상: #e9c46a
  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의 열 배열로 새 행을 만듭니다.

열 1에 Woo Checkout 청구 모듈을 추가합니다.

Woo Checkout 청구 제목 텍스트

Woo Checkout Billing 모듈에서 설정을 열고 디자인 탭에서 다음을 조정합니다.

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

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

통지 모듈과 마찬가지로 이 모듈에는 필드 및 필드 레이블의 스타일을 지정하는 옵션이 포함되어 있습니다. 모든 필드와 필드 레이블이 페이지 전체에서 일관되기를 원하기 때문에 알림 모듈에서 필드 및 필드 레이블 스타일을 복사하여 Woo Checkout Billing 모듈에 붙여넣을 수 있습니다.

해결 방법은 다음과 같습니다.

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

새로 추가된 모듈에 복사한 스타일을 붙여넣습니다.

그리고 다음과 같이 보일 것입니다.

Woo Checkout 결제 양식 공지

양식 알림은 양식을 작성할 때 알림이나 오류를 동적으로 표시하는 역할을 합니다. 양식 알림의 스타일을 지정하려면 Woo Checkout 결제 설정으로 이동하여 다음과 같이 변경합니다.

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

Woo Checkout 청구 간격 및 테두리

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

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

Woo Checkout 배송 및 Woo Checkout 정보

Woo Checkout 배송 모듈과 Woo Checkout 정보 모듈은 결제 페이지 템플릿을 만드는 데 필수적인 구성 요소입니다. 결제를 완료하기 전에 Woo Checkout 배송 모듈은 배송 세부 정보 입력에 필요한 양식을 표시합니다. 또한 Woo Checkout Information 모듈은 사용자가 체크아웃 전에 추가 정보를 제공할 수 있는 입력 양식을 표시합니다.

모듈 추가

이제 Woo 체크아웃 배송 모듈을 추가하세요.

또한 Woo Checkout 정보 모듈을 추가합니다.

각 woo 모듈(Checkout Shipping 및 Checkout Information)은 Woo Checkout 청구 모듈과 같아야 합니다. 각각에 필요한 스타일을 각각에 복사할 수 있습니다. 여기에 디자인을 복사하여 붙여넣습니다.

Woo Checkout 세부 정보 모듈

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

같은 행의 2열에 있는 결제 세부정보에 새로운 Woo Checkout Details 모듈을 추가합니다.

Woo Checkout 세부 정보 제목 텍스트

다음과 같이 제목 텍스트 설정을 업데이트합니다.

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

Woo Checkout 세부 정보 열 레이블

열 레이블의 스타일을 지정해 보겠습니다.

  • 열 레이블 글꼴: Roboto
  • 열 레이블 글꼴 두께: 굵게
  • 열 레이블 텍스트 색상: #ddb17c

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 Details 콘텐츠를 추가할 준비가 되었습니다. 이것은 구매 주문 세부 정보를 표시하는 결제 페이지의 또 다른 중요한 부분입니다. 여기에는 제품 목록, 소계 및 최종 구매 가격이 포함됩니다. 또한 적용되었으며 링크를 클릭하여 철회할 수 있는 모든 할인 쿠폰이 표시됩니다.

같은 행의 2열에 있는 결제 세부정보에 새로운 Woo Checkout Details 모듈을 추가합니다.

다음 조정을 수행합니다.

  • 양식 공지 배경색: #E58991
  • 양식 공지 글꼴: Roboto
  • 양식 고지 글꼴 두께: 굵게
  • 양식 공지 글꼴 크기: 16px
  • 버튼 설정: 이전과 동일
  • 간격: 0px(위, 아래, 왼쪽, 오른쪽)

최종 결과

최종 결제 페이지는 다음과 같습니다.

마무리

Divi 의 강력한 페이지 빌더와 직관적인 Woo 모듈을 사용하면 맞춤형 WooCommerce Checkout Page 템플릿을 만드는 것이 크게 단순화되고 증폭됩니다. 이 자습서는 체크아웃 페이지를 구성하는 필수 부분을 통합하는 데 중점을 두었습니다. 그러나 다른 모든 고유한 Divi 모듈 및 기능을 사용하여 체크아웃 페이지를 다음 단계로 끌어올릴 수 있습니다. 이것은 Divi 디자인 기술을 향상시키는 데 도움이 되며 더 중요한 것은 더 많은 전환으로 이어집니다.