Divi로 WooCommerce 장바구니 페이지 템플릿을 만드는 방법

WooCommerce 장바구니 페이지는 WooCommerce(WC) 온라인 상점을 사용하는 모든 Divi 사이트에 필수적입니다. 그러나 페이지 디자인은 일반적으로 외부에서 장바구니 페이지 템플릿을 사용자 정의한 다음 순전히 외부 CSS로 페이지 템플릿의 스타일을 지정하는 작업을 포함하기 때문에 장바구니 페이지는 디자인과 관련하여 어려움을 겪는 경향이 있습니다. 그러나 Divi의 새로운 Woo Module을 사용하면 이 과정이 쉽고 즐거워집니다!

이 튜토리얼에서는 Divi 테마 빌더를 사용하여 사이트에 대한 WC 카트 페이지 템플릿을 처음부터 완전히 만드는 방법을 보여줍니다. 장바구니 페이지에 대한 새 템플릿을 빠르게 설정하고 Divi Builder에서 사용할 수 있는 적절한 동적 woo 모듈을 사용하여 템플릿을 디자인하는 방법을 보여드리겠습니다.

시작하자!

엿보기

전후

다음은 이 튜토리얼에서 디자인할 새 장바구니 페이지와 비교한 Divi의 기본 장바구니 페이지입니다.

장바구니 페이지 템플릿을 자세히 살펴보겠습니다.

장바구니 페이지 템플릿을 무료로 다운로드하세요

이 장바구니 페이지 템플릿은 무료 장바구니 및 장바구니 페이지 템플릿 세트 중 하나로 다운로드할 수 있습니다. 따라서 해당 카트 및 체크아웃 템플릿 세트가 포함된 게시물에서 자유롭게 다운로드하십시오.

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

파일 다운로드

무료로 다운로드

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

다운로드

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

템플릿 레이아웃을 웹사이트로 가져오려면 Divi 테마 빌더로 이동하여 이식성 옵션을 사용하여 .json 파일을 테마 빌더로 가져와야 합니다.

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

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

WooCommerce 장바구니 페이지 및 Divi 정보

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

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

Divi에서 장바구니 페이지를 디자인하기 위한 Woo 모듈

Divi는 페이지 템플릿에 동적 콘텐츠를 추가하는 데 핵심적인 다양한 모듈과 함께 제공됩니다. 이들 중 일부는 장바구니 페이지에 특정한 Woo 모듈을 포함합니다.

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

• 게시물 제목 - 장바구니 페이지 템플릿을 작성할 때 장바구니 페이지의 제목을 동적으로 표시합니다.
• Woo Notice - 이 모듈은 다양한 페이지 유형(장바구니 페이지, 상품 페이지, 결제 페이지)으로 설정할 수 있습니다. 필요에 따라 사용자에게 중요한 알림을 동적으로 표시합니다.
• Woo Cart Products – 이 모듈은 사용자가 현재 장바구니에 있는 제품 목록을 표시합니다.
• Woo Cart Totals – 이 모듈은 사용자 장바구니에 있는 제품의 현재 소계, 배송 및 총 가격을 표시합니다.

기타 옵션 모듈에는 다음이 포함됩니다.

• Woo Breadcrumb – WooCommerce Breadcrumb 탐색 모음을 표시합니다.
• Woo Cross Sells – 카트의 항목에 연결된 교차 판매 제품을 동적으로 표시합니다.

장바구니 페이지 또는 템플릿 디자인

언급했듯이 장바구니 페이지에 대한 사용자 정의 템플릿 을 구축할 필요가 없는 경우 Divi Woo 모듈을 사용하여 사용자 정의 WooCommerce 장바구니 페이지 를 쉽게 디자인할 수 있습니다. 이 튜토리얼에서는 Divi 테마 빌더를 사용하여 장바구니 페이지 템플릿을 만들 것입니다.

Divi로 WooCommerce 장바구니 페이지 템플릿 디자인하기

이 WooCommerce 장바구니 페이지 템플릿의 목표는 Divi의 WooCommerce 장바구니 페이지에 할당된 템플릿에 대한 사용자 정의 본문 영역을 만드는 것입니다. 이 템플릿에 대한 사용자 지정 머리글 또는 바닥글 영역을 만들지는 않겠지만 자신의 머리글과 바닥글이 있는 웹사이트에서 이 템플릿을 쉽게 사용할 수 있습니다.

장바구니 페이지에 대한 사용자 정의 템플릿 만들기

시작하려면 다음을 수행합니다.

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

새 장바구니 템플릿이 생성되면 템플릿의 "사용자 정의 본문 추가" 영역을 클릭합니다. 팝업 목록 내에서 Build Custom Body 를 선택합니다.

단면 행 및 열 구조 생성

템플릿 레이아웃 편집기에서 2개의 사이드바가 있는 1/4 1/2 0ne-4 열 구조가 있는 새 특수 섹션을 삽입합니다.

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

섹션 배경

섹션 설정을 열고 다음과 같이 배경색을 추가합니다.

• 배경색: #f7f3f0

섹션 크기 조정

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

• 거터 폭: 2
• 내부 폭: 100%
• 내부 최대 너비: 없음
• 최소 높이: 100vh

섹션 간격

다음으로 다음과 같이 섹션과 열에 약간의 간격을 추가합니다.

• 패딩: 상단 0픽셀, 왼쪽 40픽셀, 오른쪽 40픽셀
• 열 1 패딩: 90px 상단
• 3열 패딩: 84px

사용자 정의 탐색 링크 만들기

이 레이아웃의 경우 상점을 구성하는 주요 페이지인 Shop, Cart 및 Checkout에 대한 몇 가지 사용자 정의 탐색 링크를 만들 것입니다. 이렇게 하면 사용자가 구매 프로세스를 더 쉽게 탐색할 수 있습니다.

왼쪽 열에 새 광고 문구 모듈을 추가합니다. 이것은 귀하의 웹사이트에서 쇼핑 페이지로 연결되는 링크로 사용됩니다.

Blurb 설정 모달에서 다음과 같이 콘텐츠를 업데이트합니다.

• 제목: 상점
• 본문: 공백으로 둡니다 .
• 아이콘 사용: 예
• 아이콘: 스크린샷 참조

정적 링크 URL을 추가하는 대신 Shop 페이지에 동적 링크를 추가할 수 있습니다. 방법은 다음과 같습니다.

1. 모듈 링크 URL 입력 상자 위로 마우스를 가져간 후 "동적 콘텐츠 사용" 아이콘을 클릭합니다.
2. 드롭다운 목록에서 페이지 링크를 선택합니다.
3. 페이지 링크 모달의 드롭다운 목록에서 쇼핑 페이지를 선택합니다.
4. 그런 다음 변경 사항을 저장합니다.

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

• 아이콘 색상: rgba(55,61,75,0.3)
• 이미지/아이콘 배치: 왼쪽
• 이미지/아이콘 너비: 16px

다음으로 제목 텍스트를 업데이트합니다.

• 제목 글꼴: Roboto
• 제목 글꼴 두께: 중간
• 제목 텍스트 색상: rgba(55,61,75,0.3)

최종 터치를 위해 다음과 같이 크기와 간격을 업데이트합니다.

• 콘텐츠 너비: 100%
• 여백: 10px 하단
• 이미지/아이콘 애니메이션: 애니메이션 없음

이렇게 하면 광고 문구(또는 탐색 링크)가 태블릿과 휴대전화의 브라우저 전체 너비에 걸쳐 있는지 확인하고 추가할 다음 광고 문구 사이에 공간이 생깁니다.

다음 두 개의 링크를 생성하려면 방금 두 번 디자인한 기존의 블러브 모듈을 복제하여 총 세 개의 링크가 있도록 합니다.

두 번째 링크는 현재 만들고 있는 페이지인 장바구니 링크입니다. 눈에 띄게 만들려면 두 번째 광고 문구에 대한 설정을 열고 아이콘과 텍스트 색상을 업데이트하세요.

• 아이콘 색상: #373d4b
• 제목 텍스트 색상: #373d4b

이제 제목 텍스트와 모듈 링크 URL을 업데이트하여 각각의 동적 페이지 링크 URL을 갖도록 하는 일만 남았습니다.

행 설정 사용자 정의

페이지 중간 부분에 woo 공지 모듈과 woo 카트 제품을 추가할 예정입니다. 그러나 이들을 추가하기 전에 행 설정을 최적화해야 합니다.

행 패딩

행 설정을 열고 다음을 업데이트합니다.

• 패딩(데스크톱): 상단 72픽셀, 왼쪽 6%, 오른쪽 6%
• 패딩: (태블릿 및 휴대폰): 0px 상단, 0px 왼쪽, 0px 오른쪽

행 테두리

• 테두리 너비: 1px
• 테두리 색상: rgba(55,61,75,0.14)
• 상단 테두리 너비: 0px
• 하단 테두리 너비: 0px

장바구니 페이지용 Dynamic Woo 알림 모듈 디자인

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

Woo 알림 모듈을 추가하려면 1열 행 안에 새 Woo 알림 모듈을 클릭하여 추가합니다.

Woo 알림 페이지 유형 및 배경

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

• 페이지 유형: 장바구니 페이지
• 배경색: rgba(153,158,117,0.1)

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

Woo 알림 제목 텍스트

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

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

우 알림 버튼

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 14px
• 버튼 텍스트 색상: #fff
• 버튼 배경색: #999e75
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px
• 버튼 문자 간격: 1px
• 버튼 글꼴: Roboto
• 버튼 글꼴 두께: 굵게
• 버튼 글꼴 스타일: TT
• 버튼 패딩: 상단 0.8em, 하단 0.8em, 왼쪽 1em, 오른쪽 1em

Woo 통지 상자 섀도우

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

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 수직 위치: 0px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 0px
• 그림자 색상: #999e75

woo 알림 아래의 기본 여백을 제거하려면 고급 탭으로 이동하여 다음 사용자 지정 CSS를 기본 요소에 추가합니다.

margin-bottom: 0 !important;

동적 장바구니 페이지 제목 만들기

장바구니 페이지에 필요한 동적 페이지 제목을 생성하려면 woo 공지 모듈 아래에 게시물 제목 모듈을 추가하십시오.

게시물 제목 내용

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

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

게시물 제목 텍스트

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

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

Dynamic Woo Cart 제품 디자인하기

이제 페이지 제목이 지정되었으므로 장바구니 페이지 템플릿의 또 다른 핵심 요소인 Woo Cart Products를 추가할 준비가 되었습니다.

게시물 제목 모듈 아래에 Woo Cart Products 모듈을 추가합니다.

장바구니에 이미 제품이 있는 경우가 아니면 모듈에 더미 콘텐츠가 표시되어야 합니다. 이것은 디자인 프로세스를 시각화하는 데 도움이 됩니다.

Woo Cart 제품 본문 및 링크

Woo Cart 제품 설정에서 본문 텍스트 옵션을 사용자 지정하여 제품 제목 링크, 가격 텍스트 및 소계 텍스트를 대상으로 지정할 수 있습니다.

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

• 본문 글꼴: Roboto
• 링크 텍스트 색상: #373d4b

참고: 링크 텍스트는 제품 열 아래의 제품 제목 링크를 대상으로 합니다.

Woo Cart 제품 테이블, 테이블 셀 및 제거 아이콘

알 수 있듯이 카트 제품은 테이블 구조로 구성되어 있습니다. 모듈의 내장 옵션을 사용하여 테이블 및 테이블 셀의 스타일을 대상으로 지정할 수 있습니다.

이 예의 경우 다음을 업데이트합니다.

• 테이블 거터 및 테두리 축소: 예
• 표 셀 패딩: 0px

그런 다음 각 제품의 왼쪽에 있는 제거 아이콘("x")의 색상을 다음과 같이 업데이트합니다.

• 아이콘 텍스트 색상 제거: #373d4b

Woo Cart 제품 분야

모듈의 기본 제공 필드 옵션을 사용하여 장바구니 제품 필드를 타겟팅할 수도 있습니다. 수량 필드 상자 및 쿠폰 코드 필드 상자와 같은 항목을 대상으로 합니다.

필드 옵션에서 다음을 업데이트합니다.

• 필드 배경색: 투명
• 필드 패딩: 상단 10px, 하단 10px
• 필드 둥근 모서리: 0px
• 필드 테두리 너비: 1px
• 필드 테두리 색상: rgba(0,0,0,0.16)

Woo 장바구니 제품 버튼

Woo Cart Products 모듈에는 모듈의 내장 버튼 옵션으로 사용자 지정할 수 있는 두 개의 버튼("쿠폰 적용" 버튼 및 "카트 업데이트" 버튼)이 있습니다.

Woo Notice 모듈에서 버튼의 스타일을 이미 지정했으므로 Woo Notice 모듈 설정을 열고 버튼 옵션 토글을 찾으십시오. 그런 다음 버튼 토글을 마우스 오른쪽 버튼으로 클릭하거나 "점 3개" 아이콘을 클릭하여 추가 설정 메뉴를 엽니다. 거기에서 복사 버튼 스타일을 선택합니다.

이제 버튼 스타일이 복사되면 Woo Cart Products 모듈 설정을 열고 버튼 옵션 그룹에서 추가 설정 메뉴를 열고 버튼 스타일 붙여넣기를 선택합니다. 이렇게 하면 woo 알림 모듈의 버튼 스타일이 이 모듈로 복사됩니다.

버튼 스타일이 지정되면 다음과 같이 버튼 배경색을 변경합니다.

• 버튼 배경색: #373d4b

비활성화 버튼

"장바구니 업데이트" 버튼은 필요하지 않을 때마다 비활성화된 상태입니다. 비활성화된 버튼의 스타일도 사용자 지정할 수 있습니다. 지금은 현재 버튼 스타일을 복사하여 오른쪽 클릭 메뉴 설정을 사용하여 비활성화된 버튼 스타일에 붙여넣습니다.

Woo 장바구니 제품 이미지

이 모듈에서 제품 이미지의 스타일을 변경할 수도 있습니다. 지금은 크기 조정 옵션에서 이미지 크기를 다음과 같이 변경해 보겠습니다.

• 이미지 너비: 80px

사용자 정의 테이블 레이아웃

테이블의 제품 정보를 위한 더 많은 수평 공간을 만들고 싶다면 WooCommerce 기본 고정 테이블 레이아웃을 초기 (또는 자동)로 재정의할 수 있습니다. 이렇게 하려면 고급 탭으로 이동하여 다음 사용자 정의 CSS를 표에 추가하십시오.

table-layout: initial !important;

Dynamic Woo Cart Totals 모듈 설계

장바구니 페이지 템플릿을 완성하는 데 필요한 마지막 핵심 요소는 Woo Cart Totals 모듈입니다. 이 모듈은 동적 카트 총계 콘텐츠와 "결제 진행" 버튼을 표시합니다. 이 레이아웃의 경우 섹션의 오른쪽 열에 장바구니 합계 모듈을 추가합니다.

장바구니 합계 버튼

먼저 Woo Notice 모듈에 사용된 버튼 스타일을 복사하고(이전처럼) 버튼 스타일을 장바구니 합계 모듈에 붙여넣습니다. 이렇게 하면 "결제 진행" 버튼에 일치하는 버튼 스타일이 제공됩니다. 물론 모듈의 기본 제공 옵션을 사용하여 원하는 대로 버튼 스타일을 쉽게 사용자 지정할 수 있습니다.

장바구니 합계 텍스트

장바구니 합계 모듈의 제목 텍스트 스타일을 지정하려면 장바구니 합계 모듈을 열고 디자인 탭에서 다음을 업데이트합니다.

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

표 테두리 및 표 셀 테두리

장바구니 합계에는 기본적으로 몇 가지 테이블 스타일이 있습니다. 모듈의 내장 테이블 및 테이블 셀 옵션으로 스타일을 지정할 수 있습니다. 이 레이아웃의 경우 두 가지 모두에 대해 테두리 스타일을 제거합니다. 이렇게 하려면 다음을 업데이트하십시오.

• 테이블 테두리 스타일: 없음
• 표 셀 테두리 스타일: 없음

장바구니 합계 필드

장바구니 합계 모듈에 Woo Cart Products에서 사용된 것과 동일한 필드 스타일을 제공하려면 Woo Cart Products 모듈에서 필드 스타일을 복사하여 Cart Totals 모듈에 붙여넣습니다.

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

이 시점에서 장바구니 페이지 템플릿의 모든 핵심 요소가 있습니다. 하지만 여기서 멈출 필요는 없습니다. 필요에 따라 페이지에 원하는 콘텐츠를 추가할 수 있습니다. 다음은 몇 가지 아이디어입니다.

• Woo Cross Sells 모듈을 추가하여 장바구니에 추가된 제품에 연결된 교차 판매 제품을 표시합니다.
• 첫 구매 시 할인을 위해 이메일 Optin을 추가하십시오.
• 구매 프로세스 완료를 장려하기 위해 쿠폰 코드를 표시하는 프로모션을 추가합니다.

이 레이아웃의 무료 데모를 위해 장바구니 제품 아래에 멋진 이메일 옵트인을 포함했습니다.

최종 결과

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

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

마지막 생각들

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

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

건배!