Beaver Builder WooCommerce 통합 2024 – Beaver Builder를 사용하여 WooCommerce 제품 및 쇼핑 페이지를 구축하는 방법은 무엇입니까?

온라인 상점을 만드는 것은 흥미로울 수 있습니다. 훌륭한 점포를 갖는 것은 귀하의 비즈니스 성공에 기여합니다. 그러나 잘 작동하는 상점을 디자인하고 싶다면 어려움을 겪을 수 있습니다.

WooCommerce 페이지 빌더를 사용하여 귀하와 귀하의 고객 모두에게 만족스러운 전자 상거래 사이트를 만들 수 있습니다. 살펴보자 WooCommerce 플러그인. 다음 단계는 Beaver Builder를 사용하여 온라인 상점을 만드는 것이 얼마나 쉬운지 시연하는 것입니다. 자, 시작하겠습니다!

비버 빌더

WooCommerce에 대한 간략한 소개

WooCommerce를 사용하면 다음을 수행할 수 있습니다. 전자 상거래 기능 추가 온라인으로 제품을 판매할 수 있도록 WordPress 사이트에:

또한 WooCommerce는 28년까지 약 2020%의 시장 점유율을 차지할 것으로 예상되기 때문에 좋은 회사에 있다는 것을 알게 될 것입니다.

WooCommerce는 WordPress와 마찬가지로 사용자 정의가 가능한 오픈 소스 솔루션입니다. 이를 통해 지불 게이트웨이 및 다양한 배송 옵션을 설정하고 즉시 전자 상거래 제국을 시작할 수 있습니다.

WooCommerce를 사용하여 제품을 생성, 편집 및 관리할 수도 있습니다.

WooCommerce 애드온 플러그인을 사용하면 다른 많은 기능에 액세스할 수 있습니다.  

Beaver Builder로 WooCommerce Shop 및 제품 페이지 구축(간단한 4단계)

그러나 WooCommerce의 기능을 이해하기 전에 먼저 시작할 웹사이트가 필요합니다. WooCommerce, Beaver Builder 및 Beaver Themer WordPress 플러그인을 설치하고 활성화하여 시작하십시오. 이제 제품 및 쇼핑 페이지를 만들 준비가 되었습니다.

1단계: 제품을 추가하여 상점 만들기

상점을 설정하는 첫 번째 단계로 제품 목록을 만드십시오. WooCommerce를 사용하면 실제 상품, 디지털 상품 및 다양한 항목(예: 크기 및 색상)을 판매할 수 있습니다.

WooCommerce를 처음 사용하는 경우 WooCommerce에서 제공하는 샘플 제품 세트를 설치하여 시스템이 다양한 유형의 항목과 어떻게 작동하는지 알 수 있습니다. 여기에서는 변형 및 판매 옵션을 포함한 여러 WooCommerce 제품 기능에 대해 설명합니다.

처음부터 시작하려는 경우 기본 제품을 만드는 방법을 배우게 됩니다. 무엇을 판매할 계획이든 이 게시물의 다른 섹션이 도움이 될 것입니다.

WordPress 대시보드에서 새 제품을 만듭니다. 왼쪽 메뉴에서 제품 > 새로 추가를 선택합니다. 상점에 추가하려는 항목에 대해 다음 필드를 채우십시오.

가격, 세금 및 배송을 포함하여 제품 데이터 패널까지 아래로 스크롤하여 항목에 대한 대부분의 중요한 매개변수를 설정할 수 있습니다. WooCommerce에는 개별적으로 재정의할 수 있는 제품에 대한 세금 및 배송 옵션을 포함할 수 있는 옵션이 있습니다.

일반 설정에서 제품이 다운로드 가능한지 가상인지 결정하십시오. 제품이 실제 제품인 경우 상자를 선택하지 않은 상태로 유지합니다.

재고 관리뿐만 아니라 시작할 수 있습니다. 제품을 연결하면 교차 판매 및 상향 판매 옵션이 제공됩니다.

제품 데이터 패널 아래의 제품 간략한 설명 필드 아래에 두 번째로 더 간단한 항목 설명을 추가할 수도 있습니다. 상점 정보는 일반적으로 이 정보를 포함합니다.

화면 오른쪽에 제품 카테고리와 태그가 표시됩니다. 다음은 유용한 주최자입니다.

제품 목록에는 한두 장의 사진이 포함되어야 합니다. 다음 옵션을 사용할 수 있습니다. 단일 이미지 또는 이미지 그룹:

장치에서 사진을 업로드하거나 미디어 라이브러리에서 이미지를 추가할 수 있습니다. 같은 방법으로 제품 갤러리에 이미지를 추가할 수 있습니다. 이미지를 드래그 앤 드롭하여 순서를 변경할 수 있습니다.

2단계: 새 제품 페이지 디자인

제품을 표시하기 위해 제품 페이지를 만들 수 있습니다. Beaver Themer 비디오 튜토리얼은 WooCommerce 단일 제품 페이지를 사용자 정의하는 방법에 대한 단계별 지침을 제공합니다. 

Beaver Themer는 Beaver Builder를 WooCommerce 페이지 빌더로 확장하기 위한 강력한 도구입니다. 이 추가 기능을 사용하여 전체 사이트에 템플릿을 적용할 수 있습니다.  

 테마 레이아웃 > Beaver Builder에서 새로 추가를 클릭합니다.

WooCommerce 페이지 빌더 역할을 하는 데 도움이 되도록 제품 설정과 함께 테마 레이아웃을 추가합니다.

레이아웃에는 제목이 있어야 합니다. Themer 레이아웃 추가 버튼을 클릭하기 전에 레이아웃과 유형을 선택해야 합니다.

다음 페이지로 넘어갈 때 새 디자인이 모든 제품 페이지에 적용되었는지 계속 확인하십시오. 두 번째 상자에서 위치 아래의 모든 제품을 선택한 다음 제품을 선택합니다.

Beaver Themer를 WooCommerce 페이지 빌더로 사용하기 위한 올바른 Themer 레이아웃 설정.

작업을 저장한 후 Beaver Builder로 레이아웃을 편집할 수 있습니다. 오른쪽 상단에서 시작하여 파란색 더하기 기호를 클릭합니다. 템플릿을 클릭했으면 새로 만들기를 클릭합니다.

Beaver Thermer에서 WooCommerce 제품 템플릿의 위치입니다.

제품 > 기존 레이아웃 바꾸기를 선택하여 기존 레이아웃을 바꿉니다. 템플릿을 제품 페이지로 바꾸는 몇 가지 유용한 기본값이 이미 있습니다.

Beaver Builder의 기본 제품 템플릿

기본 레이아웃에서 WooCommerce 모듈을 추가하거나 제거할 수 있습니다. WooCommerce 모듈은 Modules > Theme Modules > WooCommerce를 통해 액세스할 수 있습니다. 제품 평가, 설명, 상향 판매 및 기타 여러 옵션 외에도 다음과 같은 많은 옵션이 있습니다.

WooCommerce 모듈 사용

레이아웃을 편집하는 동안 Beaver Builder의 미리 보기: 기능을 사용하여 다른 제품을 표시하도록 전환할 수 있습니다.

Beaver Builder에서 다양한 제품 미리보기

이 기능을 사용하면 각 제품을 볼 때 어떻게 보이는지 확인할 수 있습니다. 포함된 디자인과 모듈에 만족하면 제품 페이지를 게시하십시오. 이제 단일 제품 페이지가 새로운 형식으로 스타일이 지정됩니다.

3단계: WooCommerce Shop 페이지 만들기

이제 상점 페이지를 WooCommerce 제품과 동일하게 취급할 때입니다. 기본 WooCommerce 상점 레이아웃은 매우 간단하고 흥미롭지 않습니다.

WooCommerce의 기본 상점 레이아웃

Shop 페이지를 디자인할 때 Beaver Theer가 더 나은 선택입니다. 먼저 WooCommerce > 설정으로 이동하여 제품 탭을 클릭하고 Shop 페이지가 Shop 또는 귀하가 만든 다른 사용자 정의 페이지를 가리키는지 확인하십시오. 아카이브 페이지를 지정하면 제품이 아카이브 페이지로 표시됩니다.

Beaver Builder > Theme Builder에서 테마 레이아웃 > 새로 추가를 선택한 다음 새로 추가를 클릭합니다. 다음 화면의 유형에서 테마 레이아웃 옵션을 선택합니다.

상점 페이지 레이아웃 만들기

다음 화면에서 Product Archive의 위치를 ​​선택할 수 있습니다. 상점의 제품은 상점 페이지 및 제품 카테고리 페이지에 표시됩니다. 필요한 경우 수정할 수 있습니다.

제품 아카이브 페이지 사용자 정의

Launch Beaver Builder를 클릭하면 레이아웃을 사용자 지정할 수 있습니다. 화면 상단의 더하기 기호를 클릭한 다음 템플릿을 클릭하면 다음 페이지가 나타납니다.

Beaver Builder 템플릿 사용

제품 템플릿을 사용하여 새 쇼핑 페이지를 쉽게 만들 수 있습니다. 지금까지 다룬 모든 도구를 사용하여 템플릿이 생성되면 템플릿을 변경할 수 있습니다. 

상점 레이아웃이 포스트 모듈 스타일 설정에 맞을 때까지 조정하여 해당 설정에 맞는지 확인하십시오. 

변경 사항이 모듈에 저장되면 화면 상단에서 완료 > 게시를 클릭합니다. 

마지막으로 해야 할 일은 쇼핑 페이지로 지정한 페이지가 사이트의 탐색 메뉴에 나타나는지 확인하는 것입니다. 그렇지 않으면 WordPress 대시보드의 모양 > 메뉴 섹션에서 추가할 수 있습니다.

4단계: WooCommerce 레이아웃으로 상점 페이지를 추가로 사용자 정의

WooCommerce 모듈은 또한 Beaver Builder를 탁월한 WooCommerce 페이지 빌더로 만드는 뛰어난 기능입니다. WooCommerce 기능의 일부를 사이트의 모든 Beaver Builder 구조에 추가할 수 있습니다. 이 모듈에서는 다음 옵션을 사용할 수 있습니다.

  • 단일 및 다중 제품: 
  • 제품 ID 또는 카테고리를 기반으로 선택한 제품을 표시하거나 판매 중인 제품, 최근 제품, 최고 등급 제품 또는 기타 원하는 것을 표시할 수 있습니다.
  • 장바구니: WooCommerce 장바구니의 내용을 표시합니다.
  • 결제: 일반적으로 표시되는 결제 페이지를 표시합니다.
  • 주문 추적: 이 양식에 주문에 대한 정보를 입력합니다.
  • 내 계정: 이 페이지에는 계정 정보, 과거 주문 및 주소 세부 정보와 같이 내 계정 페이지에서 일반적으로 볼 수 있는 정보가 포함되어 있습니다.
Beaver Builder의 WooCommerce 레이아웃.

한눈에 보기

결론

브랜드를 효과적으로 나타내는 온라인 상점을 만드는 것은 어려운 일입니다. 그러나 WooCommerce용 플러그인인 Beaver Builder를 사용하면 프로세스를 더 쉽게 만들 수 있습니다.

보시다시피 WooCommerce와 Beaver Builder를 모두 사용하여 상점을 구축하기 위한 네 가지 중요한 단계를 요약했습니다.

  1. 제품을 추가하여 상점을 만드십시오.
  2. 새 제품 페이지를 디자인합니다.
  3. 새로운 WooCommerce 상점 페이지를 만드십시오.
  4. WooCommerce 레이아웃을 사용하면 전자 상거래 사이트를 추가로 사용자 지정할 수 있습니다.

Beaver Builder를 사용하여 제품 및 쇼핑 페이지를 구축하는 방법에 대해 알고 싶은 것이 있습니까? 아래 댓글 섹션에서 여러분의 생각을 공유해주세요!

아이쉬와르 바버

Aishwar Babber는 열정적인 블로거이자 디지털 마케터입니다. 그는 최신 기술과 장치에 대해 이야기하고 블로그를 운영하는 것을 좋아합니다. 기즈모베이스. 그는 현재 다양한 프로젝트에서 정규직 마케터로 디지털 마케팅, SEO 및 SMO 전문 지식을 연습하고 있습니다. 그는 에 적극적인 투자자이다. 제휴베이 ImageStation의 디렉터이기도 합니다.

코멘트 남김