Divi의 Fashion Layout Pack을 사용하여 WooCommerce로 온라인 상점 만들기

Divi의 새로운 Fashion Layout Pack은 모든 온라인 상점에 적합합니다. 상점 모듈의 통합과 페이지 레이아웃의 구성은 중요한 출발점을 제공합니다. 그러나 이 레이아웃을 작동하는 온라인 상점으로 실행하려면 WooCommerce 플러그인이 필요합니다. 그리고 Divi와 WooCommerce가 얼마나 잘 작동하는지 놀랄 것입니다.

이 튜토리얼에서는 Woocommerce를 사용하여 Divi의 Fashion 레이아웃 팩을 사용하여 온라인 상점을 만드는 방법을 보여 드리겠습니다. 레이아웃을 사용자 정의할 수 있도록 적절하게 설정하는 방법, Woocommerce 통합으로 상점 페이지에 생기를 불어넣는 방법, 레이아웃 요소와 테마 사용자 정의 도구를 사용하여 WooCommerce 페이지 스타일을 지정하는 방법에 대한 몇 가지 팁을 안내해 드리겠습니다.

설정

시간을 위해 이미 완료된 특정 단계로 이 자습서를 시작하겠습니다.

1. Divi 테마 설치 및 활성화
2. WooCommerce 설치 및 활성화
3. Fashion Layout Pack을 다운로드하고 Fashion_All.json 파일을 Divi 테마 라이브러리로 가져옵니다.
4. 각 레이아웃에 대해 새 페이지를 만듭니다.
5. 기본 메뉴를 만듭니다.

위에 나열된 설정이 혼란스럽다면 새 프로젝트에 레이아웃 팩을 사용하는 10단계를 확인하여 레이아웃을 올바르게 설정하는 방법에 대한 자세한 지침을 찾을 수 있습니다.

위의 5단계를 완료하면 시작할 준비가 된 것입니다.

몰래 엿보기

다음은 생성할 WooCommerce 페이지의 일부입니다.

Divi의 Fashion Layout Pack을 사용하여 WooCommerce로 온라인 상점 만들기

YouTube 채널 구독

글로벌 액센트 색상 변경

일을 시작하기 위해 Divi 테마의 글로벌 액센트 색상을 변경할 것입니다. 레이아웃과 일치하도록 전역 강조 색상을 변경하는 것은 항상 좋은 생각이지만 사용자 정의 CSS를 사용하지 않고도 WooCommerce 페이지를 색상 구성표와 일치시키는 가장 쉬운 방법이기도 합니다. 이 강조 색상이 단일 제품 페이지, 장바구니 페이지 등과 같은 WooCommerce 페이지의 모든 요소에 스타일을 지정하는 데 사용되는 것을 알 수 있습니다.

전체 강조 색상을 변경하려면 테마 사용자 정의 도구로 이동하여 일반 설정 > 레이아웃 설정으로 이동한 다음 하단에서 테마 강조 색상 옵션을 찾으십시오.

레이아웃에서 이 분홍색을 사용하고 있습니다. #fc7086

그런 다음 변경한 후 설정을 저장 및 게시하고 페이지를 새로 고쳐 강조 색상이 사용자 지정 도구 내에서 다른 설정을 업데이트할 수 있도록 합니다.

테마 커스터마이저에서 타이포그래피 설정 업데이트

WooCommerce는 기본 테마 커스터마이저 설정을 사용하여 각 페이지의 텍스트 스타일을 지정하므로 레이아웃에 사용된 타이포그래피를 테마 커스터마이저의 타이포그래피 설정과 일치시켜야 합니다.

타이포그래피를 업데이트하려면 Divi > 테마 사용자 정의 > 일반 설정 > 타이포그래피로 이동 하여 다음을 업데이트하십시오.

본문 텍스트 크기: 16px
바디 라인 높이: 1.9
헤더 텍스트 크기: 42
헤더 글꼴 스타일: B
헤더 글꼴: Playfair 디스플레이
본문 글꼴: Poppins
본문 링크 색상: [전체 강조 색상을 업데이트한 경우 이 색상이 여기에 표시되어야 합니다.]

WooCommerce 상점 페이지 설정

WooCommerce를 사용하면 기본 쇼핑 페이지가 될 페이지를 설정할 수 있습니다. 이 페이지에는 모든 제품 카테고리가 포함되어야 사용자가 상점에서 제공하는 모든 것을 알 수 있습니다. 레이아웃에 상점 페이지가 있으므로 기본 상점 페이지로 설정해 보겠습니다.

WordPress 대시보드에서 WooCommerce > 설정으로 이동하고 페이지 상단의 제품 탭을 클릭합니다. 탭 바로 아래에 있는 메뉴에서 표시 를 선택합니다. 그런 다음 패션 레이아웃 팩에서 새 쇼핑 페이지 레이아웃으로 만든 "쇼핑" 페이지로 쇼핑 페이지를 선택합니다.

그런 다음 변경 사항을 저장합니다.

스토어에 제품 추가

두 개의 상점 모듈이 있음에도 불구하고 상점 페이지에 제품이 표시되지 않는 것을 보셨을 것입니다. 물론 먼저 제품을 추가해야 합니다. 스토어에 새 제품을 추가하려면 WordPress 대시보드로 이동하여 다음 단계를 따르세요.

1. 제품 > 새로 추가로 이동합니다.
2. 제품명 입력
3. 제품 설명 입력
4. 제품 가격 입력
5. 제품에 대한 간단한 설명 입력
6. 3개의 새로운 카테고리 추가(여름, 추천 및 판매 중)
7. 제품 카테고리를 선택합니다(이 경우 여름).
8. 제품 이미지 추가
9. 제품 게시/업데이트

제품에 카테고리 할당

더 많은 새 제품을 만들기 위해 위의 단계를 반복할 때 각 제품에 카테고리를 지정해야 합니다(위에 나열된 단계에서 #7). 이 튜토리얼에서는 "여름" 카테고리에 6개의 제품, "추천" 카테고리에 6개의 제품, "세일 중" 카테고리에 1개의 제품을 추가했습니다.

상점 페이지에서 상점 모듈 업데이트

이제 제품을 만들었으므로 이 제품을 쇼핑 페이지에 추가할 수 있습니다. 앞서 언급했듯이 상점 페이지 레이아웃에는 이미 레이아웃에 상점 모듈이 내장되어 있습니다. 여름 섹션 아래에 하나가 있고 추천 섹션 아래에 하나가 있습니다.

상점 페이지로 이동하여 비주얼 빌더를 배치하십시오. 그런 다음 Summer Fashion 헤드라인이 포함된 행 아래에 있는 상점 모듈(현재 제품이 표시되지 않음) 위로 마우스를 가져간 다음 모듈 설정을 클릭합니다.

"여름" 카테고리만 포함하도록 설정을 업데이트합니다.

이제 여름 카테고리로 추가된 모든 제품을 볼 수 있습니다.

다음으로, 추천 제품 헤드라인에서 상점 모듈을 찾아 추천 카테고리만 포함하도록 설정을 업데이트합니다.

상점 페이지에 "판매 중" 항목을 표시하는 상점 모듈 추가

쇼핑 페이지에는 두 개의 카테고리(추천 제품 및 여름 패션)가 있으므로 레이아웃에 이미 제공된 모듈을 사용하여 추가 카테고리 및 제품을 쉽게 생성할 수 있습니다.

"판매 중" 제품을 표시하는 또 다른 섹션을 만들어 보겠습니다.

이렇게 하려면 비주얼 빌더를 배포하고 오른쪽 클릭 옵션을 사용하여 여름 패션 제품을 표시하는 전체 섹션을 복사하고 추천 제품 섹션 바로 아래에 붙여넣습니다.

이제 몇 가지 업데이트만 하면 됩니다.

헤드라인을 표시하는 행에서 텍스트 모듈의 텍스트를 클릭하고 헤드라인을 "Summer Fashion" 대신 "On Sale"로 변경합니다.

그런 다음 왼쪽 열의 이미지를 판매 제품과 더 일치하는 이미지로 변경합니다.

마지막으로 "판매 중" 카테고리만 포함하도록 상점 모듈을 업데이트합니다.

패션 레이아웃으로 WooCommerce 페이지 스타일 지정

WooCommerce는 플러그인을 설치할 때 자체 WooCommerce 페이지 세트를 자동으로 생성합니다. 여기에는 다음이 포함됩니다.

Shop – 제품에 대한 포스트 유형 아카이브의 자리 표시자입니다.
장바구니 – 단축 코드 [woocommerce_cart]를 사용하여 장바구니 콘텐츠 생성
Checkout – 단축 코드 [woocommerce_checkout]를 사용하여 정보를 표시합니다.
내 계정 – 단축 코드 [woocommerce_my_account]를 사용하여 계정과 관련된 특정 고객 정보를 표시합니다.

이미 Shop 페이지를 선택했으므로 더 이상의 디자인은 필요하지 않습니다. 그러나 다른 3개의 WooCommerce 페이지의 경우 다른 페이지 레이아웃의 디자인에 맞게 스타일을 지정해야 합니다.

장바구니 및 결제 페이지에 섹션 헤더 추가

먼저 장바구니 페이지를 살펴보겠습니다. 다음은 작업을 수행하기 전의 모습입니다.

글로벌 강조 색상을 업데이트했기 때문에 링크와 버튼은 이미 색상 구성표와 일치합니다. 그리고 Theme Customizer에서 타이포그래피 설정을 업데이트했기 때문에 헤더와 본문 텍스트도 테마와 일치합니다.

하지만 몇 번의 클릭만으로 이보다 더 나은 작업을 수행할 수 있습니다. 먼저 쇼핑 페이지로 이동하여 비주얼 빌더를 배포하고 페이지 헤더가 포함된 상단 섹션을 라이브러리에 저장합니다. "페이지 헤더 섹션"이라는 이름을 지정할 수 있습니다.

그런 다음 페이지 하단으로 스크롤하여 이메일 옵션과 연락처 세부 정보가 포함된 마지막 섹션을 찾아 "페이지 바닥글 섹션"이라는 이름으로 라이브러리에 저장합니다.

이제 장바구니 페이지를 수정하십시오. 기본 페이지 편집기에서 Divi Builder를 사용하도록 선택한 다음 "Visual Builder 사용"을 선택합니다. 빌더는 일반 섹션의 한 열 행에 있는 텍스트 모듈에 단축 코드 [woocommerce_cart]를 자동으로 넣어야 합니다. 그렇지 않은 경우 직접 만들어야 합니다. 그런 다음 파란색 더하기 아이콘을 클릭하여 현재 섹션 아래에 새 섹션을 추가하고 "라이브러리에서 추가" 탭을 선택합니다. 그런 다음 방금 만든 "페이지 머리글 섹션"이라는 새 섹션을 선택합니다.

그런 다음 해당 섹션을 페이지 상단으로 드래그하고 제목 텍스트를 "내 장바구니"로 변경합니다. 그게 다야!

체크아웃 페이지에서도 이 과정을 반복할 수 있습니다.

Divi Builder를 사용하여 내 계정 페이지 디자인하기

이 WooCommerce 페이지에 헤더를 추가하는 방법을 알았으므로 이제 내 계정 페이지에 대해서도 동일한 작업을 수행하십시오. 이번에는 라이브러리에 저장한 바닥글 섹션을 이 페이지 하단에 추가할 수 있습니다.

이 페이지가 귀하의 계정을 관리하는 페이지임을 보다 명확하게 하기 위해 이 페이지에 독특한 디자인을 부여할 수 있습니다. 따라서 머리글 및 바닥글 섹션의 분홍색 그라디언트 배경 대신 각각의 섹션 설정으로 이동하여 배경 그라디언트 색상을 #9599e2 및 #8bc6ec로 변경합니다.

텍스트 모듈 설정을 사용하여 WooCommerce 단축 코드 콘텐츠 스타일 지정

WooCommerce 단축 코드는 이제 텍스트 모듈 안에 있으므로 이를 사용하여 모듈 설정 내에서 이러한 요소 중 일부의 스타일을 지정할 수 있습니다.

내 계정 페이지에서 이 작업을 수행해 보겠습니다. 시각적 빌더에서 다음과 같이 단축 코드 콘텐츠를 보유하는 텍스트 모듈의 설정을 업데이트합니다.

디자인 탭에서…

텍스트 텍스트 크기: 20px
텍스트 줄 높이: 1.6em

이제 텍스트 섹션 아래의 링크 탭을 클릭하여 다음과 같이 링크 스타일을 지정합니다.

링크 글꼴: Poppins
링크 글꼴 두께: 반 굵게
링크 텍스트 크기: 27px
링크 라인 높이: 1.5em

설정 저장

이제 내 계정 페이지를 확인하십시오.

맞춤 CSS를 사용하여 WooCommerce 아카이브 페이지의 스타일을 지정하시겠습니까?

WooCommerce에서 사용하는 일부 아카이브 페이지는 다른 페이지와 같이 단축 코드로 생성되지 않으므로 Divi Builder를 사용하여 조정할 수 없습니다. 따라서 이러한 페이지의 경우 사용자 정의 CSS를 분리해야 합니다.

추천 카테고리 페이지를 예로 들어 보겠습니다.

이제 테마 사용자 지정 프로그램을 열고 추가 CSS를 클릭하고 다음을 추가해 보겠습니다.

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

이렇게 하면 정렬 드롭다운 상자, 이동 경로 및 가격 글꼴의 스타일이 지정됩니다. 나머지 텍스트는 테마 커스터마이저의 타이포그래피 설정을 사용하여 변경할 수 있습니다.

마지막 생각들

이 놀라운 레이아웃 팩, WooCommerce 및 Divi Builder를 사용하면 웹 사이트를 위한 온라인 상점을 훨씬 쉽게 구축할 수 있습니다. 분명히, 이 기사의 범위를 벗어나 아직 수행해야 하는 몇 가지 필수품이 있습니다. 예를 들어 사용할 결제 게이트웨이, 배송 처리 방법 및 기타 회사별 작업 항목을 결정해야 합니다. 그러나 WooCommerce는 필요한 대부분을 처리할 수 있어야 합니다.

무엇이든 이 게시물이 스스로 놀라운 것을 만들 수 있도록 영감을 주었으면 합니다.

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

건배!