Divi 5의 WooCommerce 제품 모듈에 대해 알아야 할 모든 것

WooCommerce와의 호환성은 이제 Divi 5로 확장되어 WooCommerce의 내장 템플릿에 의존하지 않고 제품 페이지를 완전히 제어 할 수 있습니다. 새로 통합 된 Woocommerce 제품 모듈을 사용하면 브랜드와 일치하고 판매를 늘리는 데 도움이되는 매력적이고 사용자 친화적 인 레이아웃을 설계하면서 Flexbox를 포함한 Divi 5의 모든 기능을 활용하여 최신 레이아웃 제어 기능 페이지를 구축 할 수 있습니다.

이 게시물에서는 모듈의 주요 기능을 다루고 다음 Divi 5 전자 상거래 웹 사이트에 사용하는 방법을 보여줍니다. 다이빙합시다.

WooCommerce 제품 모듈은 무엇입니까?

Woo 제품 모듈은 Divi 5 내의 전문화 된 컨텐츠 요소로, Woo 기반 매장의 제품 및 카테고리 페이지를 사용자 정의하도록 설계되었습니다. 이 모듈은 플러그인과 함께 표준으로 제공되는 WooCommerce 템플릿을 대체하여 사용자 정의 가능한 레이아웃을 만들 수 있습니다. 이러한 전통적인 템플릿과 달리 Divi 5의 모듈은 창의적 자유를 허용하면서 WooCommerce의 핵심 기능과의 호환성을 유지합니다.

Divi 5에서 17 개의 WooCommerce 모듈의 출시는 중요한 이정표입니다. 모든 제품 및 카테고리 페이지 디자인 측면을 다루는이 모듈은 더 이상 레거시 모드에 있지 않으므로 Divi 5의 현대 아키텍처에 모두 최적화되어 있습니다. 보다 효율적인 기초로의 전환으로 Divi 5는 더 잘 성능을 발휘하고 확장 가능하며 WordPress의 미래와 호환됩니다.

카트 및 체크 아웃 페이지에 중점을 둔 나머지 8 개의 Woo 모듈은 곧 출시 될 것으로 예상됩니다.

Divi 5의 WooCommerce 제품 모듈의 주요 기능

WooCommerce 제품 모듈이 Divi 5에 통합되었음을 기대할 수있는 주요 기능을 살펴 보겠습니다.

포괄적 인 모듈 세트

Divi 5의 WooCommerce 제품 모듈의 첫 번째 배치에는 제품 및 카테고리 페이지 디자인의 특정 측면을 처리하도록 설계된 도구가 포함되어 있습니다. 이 모듈은 다음과 같습니다.

• Woo Breadcrumbs : 사용자가 상점을 쉽게 탐색 할 수 있도록 항해 빵 부스러크 트레일을 표시합니다.
• WOO 통지 : CART 업데이트, 오류 또는 확인과 같은 시스템 메시지가 표시됩니다.
• 우 제품 카트에 추가 : 옵션 수량 컨트롤이 포함 된 카트에 추가 버튼을 렌더링합니다.
• 우 제품 설명 : 기본 장거리 제품 설명을 출력합니다.
• 우 제품 갤러리 : 추가 제품 이미지를 그리드 또는 슬라이더 형식으로 표시합니다.
• 우 제품 이미지 : 주요 제품 이미지 또는 이미지 갤러리를 보여줍니다.
• Woo 제품 정보 : 무게, 치수 또는 속성과 같은 제품 세부 사항을 표시합니다.
• 우 제품 메타 : 제품 SKU, 카테고리 및 태그를 보여줍니다.
• 우 제품 가격 : 판매 가격을 포함하여 제품의 가격을 표시합니다.
• 우 제품 등급 : 평균 별 등급 및 검토 수를 보여줍니다.
• Woo 제품 리뷰 : 고객은 제품 리뷰를보고 제출할 수 있습니다.
• 우 제품 주식 : 제품 가용성 및 주식 수준을 나타냅니다.
• Woo 제품 탭 : 설명, 추가 정보 및 리뷰를위한 기본 제품 탭을 표시합니다.
• 우 제품 제목 : 제품 이름을 사용자 정의 가능한 제목으로 출력합니다.
• 우 제품 업셀 : 고급 구매를 장려하기 위해 상향 판매 제품을 홍보합니다.
• 우 제품 : 카테고리 페이지에 맞춤형 제품 그리드를 생성합니다.
• WOO 관련 제품 : 카테고리 또는 태그를 기반으로 관련 제품을 표시합니다.

이 모듈은 함께 항해 빵 부스러기에서 동적 제품 디스플레이에 이르기까지 제품 및 카테고리 페이지를 구축하는 데 필요한 모든 것을 제공합니다.

창조적 인 자유

Divi 5의 WooCommerce 제품 모듈 표준 WooCommerce 템플릿의 제약 조건에서 무료 사용자. 이러한 모듈을 사용하면 제품 페이지의 레이아웃, 구조 및 디자인을 완전히 제어하여 독특한 경험을 만들 수 있습니다.

이 모듈은 동적 컨텐츠를 지원하므로 WooCommerce에서 제품 데이터를 직접 가져와 가격, 주식 수준 및 설명에 대한 실시간 업데이트를 보장합니다. 이를 통해 타사 플러그인이나 사용자 정의 코드없이 참여 및 변환을 구동하는 페이지를 작성할 수 있습니다.

사용자 정의 옵션

각 모듈에는 광범위한 설계 설정이 있으며 모두 시각적 빌더 내에서 관리 할 수 ​​있습니다. 타이포그래피, 색상, 간격 및 애니메이션 옵션을 사용하여 제품 갤러리, 판매 배지, 버튼 등과 같은 요소를 사용자 정의 할 수 있습니다.

예를 들어, WOO 제품 갤러리 모듈의 레이아웃을 조정하여 슬라이더 또는 그리드에 이미지를 표시하거나, Woo 제품을 맞춤형 색상 및 호버 효과로 카트 버튼에 추가하거나 Woo 제품 등급 모듈을 조정하여 스타 등급을 디자인과 완벽하게 정렬 할 수 있습니다.

이 설정을 통해 응집력있는 브랜드 상점 페이지를 쉽게 만들 수 있습니다.

테마 빌더가있는 동적 템플릿

Divi 5의 테마 빌더를 사용하면 제품 및 카테고리 페이지 용 글로벌 템플릿을 만들 수있어 Woocommerce 제품 모듈의 잠재력을 최대한 활용할 수 있습니다. 테마 빌더를 사용하면 매장의 모든 제품 및 카테고리에 적용되는 단일 템플릿을 설계하여 일관되고 응집력있는 모양을 보장 할 수 있습니다.

동적 WooCommerce 컨텐츠를위한 루프 빌더

Divi 5 루프 빌더는 동적 우 콘텐츠를 구축하는 대체 방법을 제공합니다. 루프 빌더를 사용하면 WooCommerce 제품을 쿼리하고 모든 Divi 요소를 사용하여 Flexible Product Loops를 설계 할 수 있으며 전용 제품 모듈의 고정 된 구조를 넘어서는 레이아웃, 목록 및 회전식을 생성 할 수 있습니다. 단일 제품 레이아웃의 경우 Woo 제품 모듈을 사용하십시오. 제품 수집 및 아카이브의 경우 루프 빌더를 사용하십시오.

Divi 5의 WooCommerce 제품 모듈 사용 방법

이 섹션에서는 새로운 Woocommerce 제품 모듈을 사용하여 Divi 5의 테마 빌더에서 제품 페이지를 작성합니다.

새 테마 빌더 템플릿을 만듭니다

WordPress 대시 보드에서 Divi> 테마 빌더 로 이동하십시오. + + 새 템플릿 추가를 클릭하십시오.

대화 상자가 나타날 때 새 템플릿 빌드를 클릭하십시오.

다음으로 템플릿을 제품에 할당해야합니다. 제품 에서 템플릿을 할당하려면 모든 제품을 선택하십시오.

템플릿 생성을 클릭하여 할당하십시오.

사용자 정의 바디 추가를 클릭하십시오. 이를 통해 제품 페이지 템플릿의 본문을 구축 할 수 있습니다.

대화 상자가 나타나면 맞춤형 바디 빌드를 선택하십시오.

제품 템플릿을 작성하십시오

테마 빌더가 시작되면 처음부터 템플릿을 작성하거나 미리 메이드 레이아웃을 선택하거나 AI로 빌드 할 수 있습니다. 이 튜토리얼을 위해 처음부터 빌드를 선택하겠습니다.

녹색 + 아이콘을 클릭하여 새 행을 추가하십시오.

옵션이 나타나면 2 열 행을 선택하십시오. Divi 5 페이지 또는 템플릿에 추가 된 새 행은 기본적으로 Flebox를 사용합니다. Divi 5의 Flexbox 레이아웃 시스템을 사용하면 WooCommerce 제품 모듈이 다양한 화면 크기에 걸쳐 쌓이는 것을 포함하여 제품 페이지가 그 어느 때보 다 보이는 방식을 더욱 제어 할 수 있습니다.

Woo 제품 모듈 옵션을 공개하려면 아래로 스크롤하십시오. 클릭하면 17 개의 Divi 5 Woo 모듈과 8 개의 레거시 (Divi 4) 모듈이 있습니다.

Woo 제품 이미지 모듈을 추가하십시오

Woo 제품 이미지 모듈을 찾고 선택하고 첫 번째 열에 추가하십시오.

이 게시물은 컨텐츠 탭의 제품 필드에서 기본적으로 선택됩니다. 기존 제품을 사용하여 템플릿을 작성하려면 드롭 다운 메뉴에서 선택하십시오. 이것은 템플릿이 생성하는 동안 어떻게 보이는지 미리보기하는 좋은 방법입니다. 최종 저장 전에이 게시물 로 다시 바꾸는 것을 잊지 마십시오.

요소 드롭 다운 메뉴를 확장하여 설정을 표시하십시오. 여기에서는 주요 이미지, 갤러리 이미지 및 판매 배지를 포함하여 모듈에 표시되는 이미지를 제어 할 수 있습니다.

디자인 탭에서 이미지 드롭 다운 메뉴를 클릭하여 설정을 표시하십시오. 여기서는 이미지가 사용 가능한 모든 공간 (포스 풀폭)을 차지하거나 테두리를 추가하거나 상자 그림자를 추가하거나 간격 조정 또는 필터를 추가 할 수 있습니다.

또한 배경색, 텍스트, 경계 등을 할당하여 판매 배지를 스타일링 할 수도 있습니다.

우 제품 제목 모듈을 추가하십시오

두 번째 열에서 Woo 제품 모듈을 클릭하고 스크롤하여 Woo 제품 제목 모듈을 선택하십시오.

컨텐츠 탭의 제품 필드에서 드롭 다운 메뉴를 사용하여 제품을 선택하고 템플릿에서 어떻게 보이는지 미리보십시오.

다음으로 모듈의 디자인 탭으로 이동하여 제목 텍스트 드롭 다운 메뉴를 확장하십시오. 여기에서는 글꼴을 할당하고 원하는대로 제목을 스타일링 할 수 있습니다.

우 제품 가격 모듈을 추가하십시오

제품 제목 아래에서 새 모듈을 추가하려면 클릭하십시오. 우 제품 모듈을 선택하고 스크롤하여 우 제품 가격 모듈을 선택하십시오.

디자인 탭에서 텍스트, 판매 텍스트, 새로운 가격 텍스트 등을 포함하여 제품 가격의 모든 측면을 스타일링 할 수 있습니다.

Woo 제품 등급 모듈을 추가하십시오

다음으로 Woo Price 모듈에 Woo 제품 등급 모듈을 추가하겠습니다.

요소 아래의 컨텐츠 탭에서 별 등급 및 고객 리뷰 수를 보여 주거나 숨길 수 있습니다.

디자인 탭에서 레이아웃 드롭 다운 메뉴를 사용하면 별 등급을 표시하는 방법을 선택할 수 있습니다. 요소는 인라인으로 표시되거나 쌓일 수 있습니다.

다른 스타일 옵션에는 별에 대한 색상, 텍스트 크기 및 문자 간격 및 등급 텍스트의 스타일 옵션을 할당하는 것이 포함됩니다.

Woo 제품 설명 모듈을 추가하십시오

Woo Star 등급 모듈에서 클릭하여 새우 모듈을 추가하십시오. 이번에는 Woo 제품 설명 모듈을 선택합니다. 내용 탭에서 표시 할 설명을 선택하십시오 (설명 또는 간단한 설명).

디자인 탭에서는 글꼴, 무게, 스타일, 정렬, 색상, 크기 등을위한 옵션으로 설명을 스타일링 할 수 있습니다.

Woo 제품을 장바구니 모듈에 추가하십시오

다음으로 Woo 제품 추가를 CART 모듈에 추가합니다 . 고객이 제품을 카트에 추가하고 제품에 할당 된 변형을 선택할 수 있습니다.

컨텐츠 탭의 요소 는 수량 필드 및 사용 가능한 재고를 표시하거나 숨길 수 있습니다. 빠른 참고 사항 : 재고 수량이 표시하려면 Woo 제품 자체의 재고 관리를 점검해야합니다.

필드 레이블, 텍스트, 드롭 다운 메뉴 (변형) 및 디자인 탭에서 브랜딩과 일치하는 버튼을 스타일링 할 수 있습니다.

Woo 제품 메타 모듈과 같은 모듈을 계속 추가하여 SKU 번호 및 카테고리를 표시하십시오.

또한 Woo 제품 탭 모듈을 추가하여 제품에 대한 설명, 리뷰 및 추가 정보를 표시 할 수도 있습니다.

최대한의 범위를 얻으려면 제품 템플릿에 일련의 관련 제품을 표시하여 사이트 방문자가 매장에서 추가 제품을 탐색하여 전환 가능성을 높일 수 있습니다.

템플릿 저장

모듈 추가가 완료되면 필요한 추가 변경을 수행 한 다음 테마 빌더의 오른쪽 상단에있는 저장 버튼을 클릭하여 템플릿을 저장하십시오.

그런 다음 종료 버튼을 클릭하여 테마 빌더 대시 보드로 돌아갑니다.

테마 빌더 대시 보드로 돌아가서 변경 사항 저장을 클릭하여 템플릿을 저장하고 우 제품에 적용하십시오.

보시다시피, Divi 5의 Woo 제품 모듈로 제품 템플릿을 만드는 것은 간단한 프로세스입니다. 우리는이 자습서의 모든 모듈을 다루지 않지만 모든 모듈을 사용하면 방문자를 참여시키는 인상적인 제품 또는 카테고리 페이지를 만들 수 있습니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

Divi 뉴스 레터에 가입하면 Ultimate Divi Landing Page Layout Pack의 사본과 다른 놀라운 무료 Divi Resources, Tips 및 Tricks를 이메일로 보내 드리겠습니다. 따라 오면 당신은 곧 Divi Master가 될 것입니다. 이미 구독 한 경우 아래의 이메일 주소를 아래에 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

당신은 성공적으로 구독했습니다. 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하려면 이메일 주소를 확인하십시오!

Divi 5의 Woocommerce 통합의 다음 단계는 무엇입니까?

카트 및 체크 아웃 페이지에 중점을 둔 WooCommerce 모듈의 두 번째 배치는 향후 몇 주 안에 릴리스되어 WooCommerce와의 통합을 마무리합니다. 이러한 추가로 사용자는 제품 브라우징에서 체크 아웃에 이르기까지 전체 전자 상거래 깔때기를 완전히 사용자 정의 할 수 있습니다. Divi 5 Public Beta는 이러한 기능을 추가로 개선하여 사용자 피드백 및 추가 버그 수정을 통합하여 안정성을 보장합니다.

WooCommerce 호환성 및 통합 외에도 Divi 5는 동적 제품 슬라이더를 만들기위한 그룹 캐 러셀 모듈, 경량 ​​애니메이션을 추가하기위한 Lottie 모듈 및 레이아웃 제어를 향상시키기위한 새로운 Flexbox 레이아웃 시스템과 같은 최근의 기능으로 계속 발전하고 있습니다. 이러한 추가 사항은 WOO 모듈을 보완하여 전자 상거래 사이트에 훨씬 더 창의적인 가능성을 제공합니다.

오늘 Divi 5의 Woo 제품 모듈을 사용해보십시오

Divi 5의 Woo 제품 모듈을 사용하면 비교할 수없는 유연성과 창의성으로 매혹적인 제품 및 카테고리 페이지를 만들 수 있습니다. 이 모듈은 직관적 인 인터페이스 내에서 창의적인 자유, 동적 컨텐츠 통합 및 성능을 혼합합니다. Divi 5는 테마 빌더를 통한 사용자 정의 가능한 제품 갤러리에서 맞춤형 레이아웃에 이르기까지 높은 컨퍼런스 스토어 페이지를 쉽게 만들 수 있습니다.

Divi 5로 뛰어들 준비가 되셨습니까? 최신 Divi 5 Public Alpha를 다운로드하여 이러한 모듈을 탐색하고 WooCommerce 사이트를 어떻게 변환 할 수 있는지 확인하십시오. 우리는 당신의 생각을 듣고 싶습니다. 의견에 귀하의 의견을 공유하거나 소셜 미디어 채널에서 당사와 연결하십시오.