WooCommerce: WooCommerce 블록을 시작하는 방법 – 1부

WordPress 5.0 이후로 기본 페이지/게시물 편집기가 완전히 재개발되었습니다. 확실히, 당신은 구텐베르크에 대해 들어본 적이 있을 것입니다.

나쁜 소식은 WooCommerce가 새로운 편집 환경에 훨씬 더 느리게 합류했으며 Gutenberg 친화적으로 만들기 위해 아직 개발해야 할 주요 사항이 있다는 것입니다.

호환성 진행 상황은 WooCommerce Blocks 공식 플러그인을 통해 추적할 수 있습니다. " 실험적 블록을 포함하여 WooCommerce에 사용 가능한 모든 블록에 액세스하려면 이 플러그인을 사용할 수 있습니다. 현재 "안정된" 블록은 WooCommerce에 번들로 제공되며 블록 삽입기 "의 "WooCommerce" 섹션에서 추가할 수 있습니다. "베타" 블록을 찾을 수 있기 때문입니다. 승인되면 WooCommerce로 출시됩니다.

이 기사에서는 WooCommerce Blocks가 무엇인지, 왜 중요한지, 사용할 수 있는 블록 수와 사용 방법 등 WooCommerce Blocks에 대해 자세히 알아보겠습니다.

이것은 방대한 주제이기 때문에(우리는 다룰 WooCommerce 블록이 20개 있습니다) 두 부분으로 나눕니다. 이 기사에서는 상점에서 사용할 수 있는 처음 10개의 블록을 평가합니다. 하지만 먼저 WooCommerce 블록이 무엇인지 확인하고 왜 그렇게 중요한지 조사해 보겠습니다.

WooCommerce 블록은 무엇이며 왜 그렇게 중요한가요?

WooCommerce는 카테고리 페이지 및 쇼핑 페이지와 같은 페이지를 자동으로 생성하여 제품을 표시합니다. 그러나 다른 WooCommerce 웹 사이트가 귀하의 전자 상거래 상점과 유사하게 나타날 수 있습니다. 동일한 페이지와 제품 레이아웃을 선택하는 경우입니다.

그러나 WooCommerce Blocks를 사용하면 상점을 독특하게 만들고 원하는 방식과 레이아웃으로 제품을 선보일 수 있습니다.

WooCommerce Blocks를 사용하면 상점 디자인을 더 잘 제어할 수 있습니다. 블록 편집기와의 통합을 통해 CSS를 한 줄도 작성하거나 코드를 추가하거나 그래픽 디자인 전문 지식이 필요하지 않고 상점을 사용자 정의할 수 있습니다.

간단한 드래그 앤 드롭 방식으로 블록을 쉽게 추가할 수 있습니다. WooCommerce Block의 사용하기 쉬운 인터페이스를 사용하여 다음을 수행할 수 있습니다.

• 맞춤형 스토어 페이지 생성
• 제품 컬렉션을 표시하는 방문 페이지 만들기
• 특정 페이지 또는 블로그 게시물에 제품 블록 추가
• 원하는 곳에 제품 추천, 제품 리뷰 및 프로모션 배너 추가

다양한 WooCommerce 블록을 살펴보겠습니다. WooCommerce를 설치하면 20개의 내장 WooCommerce 블록을 얻을 수 있습니다 . 다음은 처음 10개의 블록과 어떻게 사용할 수 있는지 살펴보겠습니다.

필수 WooCommerce 블록 목록 [파트 1]

1. 활성 제품 필터

제품 필터는 고객에 대한 제품 검색을 용이하게 합니다. 그들이 없으면 고객을 잃을 위험이 있습니다. 고객이 선택한 제품을 수동으로 검색해야 하기 때문입니다. 불행히도, 이 프로세스는 시간이 많이 걸리고 웹사이트가 타겟 청중에게 덜 유용하고 인터랙티브하게 만듭니다.

활성 제품 필터 블록은 현재 보기에서 현재 활성 상태인 제품 필터를 표시합니다(따라서 이전 단계에서 선택한 필터). 또한 이 블록은 제품의 속성을 자동으로 가져오므로 고객이 모든 속성으로 활성 제품을 필터링할 수 있습니다.

블록 머리글의 스타일을 지정하고 필터를 칩(버튼과 유사) 또는 목록으로 표시하도록 선택할 수 있습니다. 따라서 이 블록을 사용하면 제품의 크기, 모양 또는 색상과 같은 필터를 쉽게 추가할 수 있어 고객에게 매우 편리합니다.

2. 모든 리뷰

고객 리뷰를 표시하는 것은 제품의 신뢰성과 진정성을 보여줄 수 있는 훌륭한 방법입니다. 그것은 구매자가 제품 주장보다 더 많이 신뢰하는 제품 평가의 역할을 하여 사용자가 제품을 구매할 가능성을 높입니다.

Trustpilot에 따르면 89%의 고객이 제품을 구매하기 전에 온라인 리뷰를 읽습니다. 이것은 고객 리뷰가 전자 상거래 판매에서 수행하는 필수적인 역할을 보여줍니다.

따라서 WooCommerce 웹사이트에 모든 리뷰 블록을 포함하면 제품 판매의 판도를 바꿀 수 있습니다.

이 블록을 사용하면 블로그 게시물이나 랜딩 페이지와 같이 스토어 어디에서나 받은 모든 제품 리뷰의 전체 목록을 표시할 수 있습니다.

제품 이름, 리뷰어 이름, 리뷰 날짜, 제품 등급, 리뷰 콘텐츠 및 제품 이미지를 숨기거나 표시하도록 선택할 수 있는 다양한 사용자 지정 옵션이 제공됩니다.

사용자가 가장 낮은 평점 또는 높은 평점으로 주문하도록 허용하여 설정을 사용자 정의하거나 표시할 리뷰 수를 설정하고 고객을 위해 '더 많은 리뷰 로드' 옵션을 추가할 수도 있습니다.

3. 모든 제품

모든 제품 블록은 WooCommerce 스토어의 모든 제품을 표시하며 정렬 및 페이지 매김 옵션과 함께 제공됩니다. 이 블록을 활성 제품 필터 블록과 정렬하여 정렬 드롭다운을 표시할 수 있습니다.

내장된 페이지 매김 옵션을 사용하면 단일 페이지에 모든 제품을 표시하지 않으려는 경우 고객이 제품을 앞뒤로 쉽게 탐색하여 전체 제품 페이지를 볼 수 있습니다.

최신 제품 또는 제품의 인기도를 기준으로 기본 제품 정렬 순서를 선택할 수 있습니다. 필요한 경우 정렬 드롭다운을 숨길 수도 있습니다. 또한 이 블록을 사용하면 이미지, 텍스트 및 비디오와 같은 추가 콘텐츠를 추가할 수도 있습니다.

4. 추천 카테고리

추천 카테고리 블록을 사용하면 설정하고 추천 카테고리로 표시하거나 클릭 유도문안 배너에 표시하려는 특정 제품 카테고리에서 제품을 선택할 수 있습니다.

방문 페이지나 블로그 게시물에서 특정 제품 카테고리를 강조하는 완벽한 솔루션입니다. 트래픽을 유도하고 해당 특정 제품 카테고리의 매출을 극대화할 수 있습니다.

가장 필수적인 기능 중 하나는 제품 이미지의 초점을 끌어 배경 컨테이너에 완벽하게 배치할 수 있는 초점 선택기입니다. 이 블록은 또한 제품 설명 숨기기 또는 표시, 오버레이 색상 추가 및 불투명도 변경과 같은 옵션을 제공합니다.

따라서 최근에 새 제품 컬렉션을 출시한 경우 추천 카테고리 블록을 사용하면 매장의 여러 위치에 컬렉션을 표시하고 판매를 유도할 수 있습니다.

5. 주요 제품

추천 제품 블록을 사용하면 CTA(클릭 유도문안)를 사용하여 보기 쉽고 효과적이며 멋지게 디자인된 배너에 매장 제품을 표시할 수 있습니다.

제품 가격 및 설명을 표시하거나 숨기고, 텍스트 정렬을 제어하고, 오버레이 색상을 추가하고, 배경 위치 및 불투명도를 조정하고, 제품 사진을 무시하고, 버튼 CTA를 변경하는 다양한 설정 및 옵션이 제공됩니다.

이 블록은 블로그 게시물이나 랜딩 페이지에 특정 제품을 선보이고 고객의 관심을 끌어 구매를 유도하는 완벽한 방법입니다.

6. 카테고리별 제품

카테고리별 제품 블록을 사용하면 선택한 카테고리의 제품을 그리드에 표시할 수 있습니다.

제품 제목, 가격, 등급 및 장바구니에 추가 버튼을 숨기거나 표시하는 옵션으로 그리드의 행과 열 수를 수정할 수 있습니다. 이 블록은 홈페이지에서 다양한 제품 카테고리를 특징으로 하는 다양한 섹션을 생성할 수 있습니다.

7. 베스트 셀러 제품

베스트 셀러 제품 블록을 사용하면 매장의 베스트 셀러 제품을 그리드에 표시할 수 있습니다.

이 블록의 디자인은 사용자 지정 옵션이 동일한 Products By Category 블록의 디자인과 매우 유사합니다. 예를 들어 색상, 크기 및 가격별로 필터링하는 것과 같이 제품에 적절한 필터 옵션을 설정할 수 있습니다.

이 블록을 사용하여 고객이 베스트 셀러 제품을 검색하고 스스로 제품을 구매하도록 유도할 수 있습니다.

8. 가격별로 제품 필터링

이 블록은 고객이 가격별로 제품을 필터링할 수 있는 사용하기 쉬운 슬라이더를 표시합니다. 예를 들어 왼쪽 핸들을 오른쪽으로 끌면 가격이 올라가고 오른쪽 핸들을 왼쪽으로 끌면 가격이 낮아집니다.

최소 및 최대 가격 범위를 편집하고 제목 수준을 설정하는 버튼을 추가할 수 있습니다. 모든 제품 블록과 함께 완벽하게 작동합니다.

9. 속성별로 제품 필터링

이 블록은 고객이 속성별로 제품을 필터링할 수 있는 필터를 추가합니다. 속성은 색상, 크기 또는 음식 맛일 수 있습니다.

필터를 목록 또는 드롭다운으로 표시하도록 선택할 수 있습니다. 또한 제목 수준을 선택하거나 단어 수를 포함하거나 버튼을 추가할 수 있습니다.

10. 최신 제품

이 블록을 사용하여 모든 최신 출시 및 최신 제품을 그리드에 표시할 수 있습니다. 고객은 관련 카테고리에 따라 제품을 필터링할 수 있습니다.

이 블록은 홈페이지에서 매장의 새로운 주식을 선보이고 마케팅하고 더 많은 눈을 끌기에 적합합니다. 사용자 정의 옵션은 베스트 셀링 제품 블록과 유사합니다.

결론

기술에 정통한 사람이든 비기술적인 전문가이든 상관없이 WooCommerce Blocks를 사용하는 것은 매력적인 방식으로 제품을 표시하고 매장을 한 단계 끌어올리는 가장 쉽고 비용 효율적인 방법입니다.

웹사이트의 모든 페이지와 블로그 게시물에서 제품을 홍보할 수 있습니다. 블록을 페이지의 특정 위치로 드래그하기만 하면 실시간으로 페이지 업데이트가 이루어집니다.

따라서 WooCommerce 상점을 재창조하고 더 많은 관심을 끌고 싶다면 위에서 언급한 WooCommerce 블록을 사용하십시오.

또한 이 기사의 2부에는 WooCommerce 블록이 10개 더 있고 이를 쉽게 추가하고 편집할 수 있는 방법이 있습니다. 다음주에 생중계되니 확인하세요!