메인 콘텐츠로 건너뛰기
13분 읽기 시간 (2554단어)

WooCommerce 블록 완전 가이드

WooCommerce 블록 완전 가이드

WooCommerce는 WordPress에서 전자상거래 사이트를 구축하는 데 널리 사용되는 플러그인 중 하나입니다. WooCommerce Blocks는 WooCommerce 플러그인 중 하나로, 사용자가 WordPress에서 온라인 스토어를 더 쉽게 만들 수 있도록 설계되었습니다. WooCommerce Blocks는 단 한 줄의 코드도 작성하지 않고도 개인화된 스토어 페이지 제작, 상품 표시, 상품 필터링 및 검색과 같은 고급 전자상거래 기능 추가를 지원합니다. 

기사의 핵심 요점:
  • WooCommerce Blocks를 사용하면 상점 소유자가 WordPress 블록 편집기 내에서 간단한 드래그 앤 드롭 인터페이스를 사용하여 온라인 상점을 쉽게 구축하고 사용자 정의할 수 있습니다. 코딩이 필요하지 않습니다.
  • WooCommerce Blocks를 사용하면 제품 그리드, 필터, 쇼핑 카트, 맞춤형 결제 환경 등 다양한 기능을 추가하여 고객 탐색을 개선하고 매출을 늘릴 수 있습니다.
  • WooCommerce Blocks는 사용자 경험을 향상시키고 유연한 디자인 옵션으로 전자상거래 사이트의 미래를 준비하는 현대적이고 모바일에 최적화된 고성능 구성 요소를 제공합니다.

새로운 블록을 사용하려면 WordPress WooCommerce Blocks 플러그인을 설치해야 합니다. 이 플러그인은 WooCommerce 핵심 기능에 추가할 수 있는 실험적 기능을 테스트하는 공간입니다.

이 실용적인 가이드에서는 WooCommerce 블록의 기능과 이를 사용자 정의하는 방법에 대해 설명합니다. 

WooCommerce Block이란 무엇인가요?

WordPress 블록 편집기(구텐베르크) 와 통합된 블록 모음으로, 다양한 WooCommerce 기능을 페이지와 게시물에 쉽게 추가할 수 있도록 해줍니다. 코드를 직접 작성하지 않고도 이 블록을 사용하여 제품, 제품 카테고리, 검색 필터, 장바구니, 결제 등을 보여줄 수 있습니다.

간단히 말해, WooCommerce 블록은 블록 편집기를 사용하여 WordPress 사이트에 삽입할 수 있는 미리 제작된 구성 요소로, WooCommerce 기반 전자상거래 기능을 쉽게 통합할 수 있는 방법을 제공합니다. 이는 WooCommerce 핵심 플러그인이므로 WordPress 사이트에 WooCommerce를 설치하고 활성화하면 자동으로 제공됩니다.

또한 WordPress 블록 편집기와 완벽하게 통합되어 익숙한 드래그 앤 드롭 인터페이스를 사용하여 사용자 정의 제품 페이지, 카테고리 레이아웃 및 쇼핑 환경을 구축할 수 있습니다.여기를 클릭하세요...

WooCommerce 블록의 목록 기능

WooCommerce 블록이 무엇인지 이해한 후, 다음으로 제공되는 각 기능에 대해 하나씩 살펴보겠습니다.

  • 모든 제품: 모든 매장 제품을 그리드 형식으로 표시합니다.
  • 활성 제품 필터: 활성 제품 필터를 목록 형식이나 칩(버튼과 유사)으로 표시합니다.
  • 모든 리뷰: 모든 제품 리뷰를 표시합니다.
  • 베스트셀러 상품: 베스트셀러 상품을 그리드 형식으로 표시합니다.
  • 체크아웃: 고객이 주문을 완료할 수 있는 양식을 표시합니다.
  • 장바구니: 쇼핑 카트를 표시합니다.
  • 추천 카테고리: 특정 제품 카테고리와 행동 유도 버튼을 강조합니다.
  • 추천 상품: 선택된 추천 상품을 표시합니다.
  • 가격별 필터링: 고객이 제품을 필터링할 수 있는 가격 범위를 표시합니다. 여기에 있는 버튼이나 텍스트를 클릭하여 가격 범위를 편집할 수도 있습니다.
  • 재고별 필터링: 재고 현황을 기준으로 제품을 필터링할 수 있습니다. 이 기능을 사용하면 재고 있음, 재고 없음 또는 재주문 중인 제품을 표시할 수 있습니다.
  • 평점별 필터링: 고객이 평점을 기준으로 제품을 필터링할 수 있습니다.
  • 속성별 필터링: 크기나 색상을 기준으로 제품을 필터링합니다.
  • 엄선된 제품: 엄선된 제품을 그리드 형식으로 표시하여 구체적으로 표시할 제품을 선택할 수 있습니다.
  • 미니 카트: 쇼핑 카트의 간략한 모습을 보여줍니다.
  • 최신 상품: 최신 상품을 그리드 형식으로 정렬하여 보여줍니다. 제목, 가격, 평점, 구매 버튼 등의 요소를 추가하거나 제거하여 맞춤 설정할 수 있습니다.
  • 판매 중인 상품: 현재 판매 중인 상품을 그리드 형식으로 표시하며, 제목, 가격, 평점, 구매 버튼 등의 요소를 추가하거나 제거하여 사용자 정의할 수 있습니다.
  • 제품 검색: 고객이 제품을 쉽게 검색할 수 있도록 검색 창을 추가합니다.
  • 태그별 제품: 특정 태그/라벨이 붙은 제품을 그리드 형식으로 표시합니다.
  • 속성별 제품: 특정 속성(색상, 크기 등)이 있는 제품을 그리드 형식으로 표시합니다.
  • 카테고리별 제품: 그리드 형식으로 카테고리를 기반으로 제품을 표시합니다.
  • 리뷰 부산물: 리뷰를 제품별로 그룹화하여 표시합니다.
  • 카테고리별 리뷰: 특정 카테고리의 제품 리뷰를 표시합니다.
  • 단일 제품: 단일 제품에 대한 자세한 보기를 표시합니다.
  • 최고 평점 상품: 가장 높은 평점을 받은 상품을 그리드 형식으로 표시합니다.

WooCommerce에서 제품 그리드 블록을 사용하는 방법

WooCommerce 블록에서 사용 가능한 기능에 대해 알아보는 것 외에도 WooCommerce에서 제품 그리드를 사용하거나 추가하는 방법을 알아보겠습니다. 웹사이트에 WooCommerce 블록 플러그인이 설치되어 있는지 확인하세요. 추가하는 방법은 다음과 같습니다.

1. 제품 그리드를 표시할 페이지나 게시물을 열고 "제품"이라는 제목을 입력합니다.

2. 왼쪽 탐색 메뉴에서 (+) 버튼을 클릭하고 WooCommerce 섹션까지 아래로 스크롤한 후 "제품 그리드"를 선택합니다.

출처 이미지: Kinsta.com

3. 다음으로, 블록을 구성 오른쪽 패널로 이동하세요.

출처 이미지: Kinsta.com

이 패널에서는 다음을 포함한 여러 가지 항목을 조정할 수 있습니다.

  • 레이아웃 설정: 제품 그리드에 표시되는 행과 열의 개수를 사용자 지정할 수 있습니다. 예를 들어, 균형 잡힌 보기를 위해 행과 열의 개수를 모두 2로 설정할 수 있습니다.
  • 콘텐츠 설정: 상품 정렬을 위한 드롭다운 메뉴를 표시할 수 있습니다. 이 기능을 통해 고객은 자신의 선호도에 따라 상품을 정렬할 수 있습니다. 필요하지 않으면 비활성화할 수 있습니다.
  • 고급 스타일링: CSS 클래스를 추가하여 모양을 사용자 지정할 수 있습니다.
4. 그러면 최종적으로 게시하기 전에 페이지를 미리 볼 수 있습니다.
출처 이미지: Kinsta.com

페이지에 추천 제품을 추가하는 방법

추천 상품 블록을 사용하면 페이지나 게시물에 특정 상품을 소개할 수 있습니다. 이 블록을 사용하면 상품을 선택하고, 디자인을 맞춤 설정하고, 콘텐츠에 배치하여 홍보하려는 상품으로 방문자를 유도할 수 있습니다.

추천 제품 블록을 추가하려면 다음 단계를 따르세요.

1. 추가할 페이지나 게시물을 엽니다. 예를 들어, 제품 그리드 위에 배치하는 경우, 해당 영역에 공간을 만들고 나타나는 "+" 버튼을 클릭합니다.

출처 이미지: Kinsta.com

2. 차단 도구 모음에서 "+" 버튼을 선택하여 차단 목록을 열고 "추천 제품"을 검색하여 선택하세요.

출처 이미지: Kinsta.com

3. 강조 표시할 제품을 선택한 후 "완료"를 클릭하세요.
4. 블록 모양을 맞춤 설정하려면 "설정"을 클릭하세요. 설정 패널에서 다음을 포함한 여러 항목을 조정할 수 있습니다.

  • 제품 설명과 가격을 표시하거나 숨깁니다.
  • 미디어 디스플레이(이미지 및 비디오)를 구성합니다.
  • 제품 이미지에 대한 대체 텍스트를 추가합니다.
  • 블록 오버레이 색상을 선택하세요.
  • 블록 불투명도를 조정합니다.
출처 이미지: Kinsta.com

5. 조정 후 페이지를 게시하거나 업데이트하여 추천 제품 블록이 표시되는지 확인할 수 있습니다.

출처 이미지: Kinsta.com

WooCommerce에 필터 블록을 추가하는 방법

WooCommerce 필터 블록을 사용하면 고객이 검색 기준에 맞는 상품을 쉽게 찾을 수 있습니다. 필터링 옵션을 통해 고객은 검색 결과의 범위를 자신에게 맞는 상품으로 빠르게 좁힐 수 있습니다.

필터 블록을 추가하려면 다음 단계를 따르세요.

  1. 필터 블록을 배치할 페이지나 게시물을 엽니다.
  2. 필터 블록을 놓을 위치를 결정합니다.
  3. 블록 편집기 도구 모음에서 "+" 버튼을 클릭하고 가격 필터, 재고 필터, 속성 필터, 평가 필터와 같은 WooCommerce 필터 옵션을 검색합니다.

이제 사용 가능한 각 필터 유형에 대해 살펴보겠습니다. 

가격별 필터 추가

가격 필터 제품 블록을 사용하면 사용자가 원하는 가격 범위를 선택할 수 있는 필터링 기능을 추가할 수 있습니다. 가격 범위는 편집 가능한 버튼이나 일반 텍스트로 표시될 수 있습니다. 원하는 경우 버튼을 추가하고 제목 수준을 조정할 수 있습니다.

출처 이미지: Kinsta.com

속성별 필터 추가

제품 속성 필터 블록을 사용하면 색상, 크기 등의 속성을 기준으로 제품을 필터링할 수 있습니다. 사용 가능한 목록에서 사용할 속성을 선택할 수 있습니다. 목록 또는 드롭다운 메뉴 형태로 표시할 수 있습니다. 쿼리 유형을 AND 또는 OR로 설정할 수도 있습니다. 그 외에도 제품 개수 표시, 제목 수준 선택, 버튼 추가, 필터 선택 등의 기능을 제공합니다.

출처 이미지: Kinsta.com

재고별 필터 추가

재고 상태 제품 필터 블록을 사용하면 재고 상태에 따라 제품을 표시할 수 있습니다. 재고 있음, 품절, 또는 백오더 상태의 제품을 표시할 수 있습니다. 또한 제품 개수 표시, 제목 수준 선택, 버튼 추가 등을 설정할 수 있습니다. 이 블록은 모든 제품과 같은 다른 WooCommerce 블록과 함께 사용할 수 있습니다. 단, 이 블록은 페이지에 추가 시 미리보기 기능을 제공하지 않습니다.

출처 이미지: Elegantthemes.com

장바구니 및 결제 블록

쇼핑 카트 블록은 페이지에 쇼핑 카트 디스플레이를 추가합니다. 배송비 계산기를 추가하고, 결제 버튼 링크를 선택하고, 다크 모드 디스플레이를 설정할 수 있습니다. 또한, 이 블록은 WooCommerce 설정에서 해당 페이지를 기본 쇼핑 카트 페이지로 설정할 수 있다는 알림을 제공합니다. 피드백을 제공할 수 있는 링크도 포함되어 있습니다.

출처 이미지: Elegantthemes.com

결제 블록은 장바구니 결제 양식을 제공합니다. WooCommerce 설정에서 이 페이지를 기본 결제 페이지로 설정할 수 있습니다. 다크 모드 표시 옵션도 있습니다. 이 블록은 개별적으로 사용자 지정할 수 있는 여러 요소로 구성되어 있습니다. 아쉽게도 이 블록은 페이지에 추가된 후에는 미리보기 기능을 제공하지 않습니다.

출처 이미지: Elegantthemes.com

WooCommerce에서 쇼핑 페이지를 사용자 정의하는 방법

다양한 WooCommerce 블록 사용법을 익힌 후에는 여러 블록을 결합하여 사용자 친화적인 맞춤형 상점 페이지를 만들 수 있습니다. 이러한 상점 페이지 레이아웃을 제작하려면 다음 단계를 따르세요.

1. 새 페이지를 만들고 "Shop"이라고 이름을 지정합니다.

출처 이미지: Kinsta.com

2. 제품 검색 블록을 .

출처 이미지: Kinsta.com

제품 카테고리 목록 블록 추가

출처 이미지: Kinsta.com

그런 다음, 표시 스타일을 드롭다운으로 설정합니다.

출처 이미지: Kinsta.com

4. 가격 필터 블록을 추가합니다.
5. 추천 상품 블록을 추가하고 강조 표시할 상품을 선택합니다. 필요에 따라 구성합니다.

출처 이미지: Kinsta.com

6. 모든 제품 블록을 추가합니다.

출처 이미지: Kinsta.com

열과 행의 개수를 2로 설정하고, 정렬 드롭다운 옵션을 끕니다.

출처 이미지: Kinsta.com

7. 마지막으로, 페이지를 게시하여 귀하가 만든 상점 페이지의 최종 레이아웃을 확인하세요.

출처 이미지: Kinsta.com

클라이언트 웹사이트를 위한 강력한 파일 관리 솔루션을 찾고 계신가요?

WP File Download 정답입니다. 파일 분류, 접근 제한, 직관적인 UI 등 고급 기능을 제공합니다.
최고의 파일 관리 기능으로 고객에게 감동을 선사하세요!

플러그인 지금 받기

WooCommerce Block으로 온라인 스토어를 구축하고 제품을 판매하세요

WooCommerce Blocks를 사용하여 맞춤형 상점 페이지를 성공적으로 만들었으니 이제 실물 상품과 디지털 상품 판매를 시작할 수 있습니다. 특히 디지털 상품의 경우 WP File Download Addon과 같은 파일 다운로드 플러그인을 추가하는 것이 중요합니다.

이 플러그인을 사용하면 WooCommerce에서 디지털 다운로드 상품을 판매할 수 있습니다. WP File Download 애드온을 사용하면 WooCommerce 디지털 상품의 파일 및 파일 카테고리를 쉽게 관리할 수 있습니다. 하나 또는 여러 개의 파일을 사용하여 여러 개의 디지털 다운로드 상품을 빠르게 만들 수 있습니다.

또한 이 플러그인은 Dropbox, Google Drive, Microsoft OneDrive및 Social Locker 기능과 통합됩니다. 클라우드 API 커넥터를 통해 이러한 클라우드 서비스의 파일을 WooCommerce 디지털 다운로드 형식으로 제공할 수 있으며, 접근 권한은 매우 제한적입니다.

WP File Download 애드온을 사용하면 WooCommerce 온라인 스토어에서 디지털 제품을 더욱 쉽고 효율적으로 판매할 수 있습니다. WooCommerce Blocks로 스토어를 구축한 후, 이 플러그인을 사용하면 디지털 콘텐츠 판매에 더욱 완벽하게 활용할 수 있습니다.

웹마스터 여러분, 주목하세요!

WP File Download 로 고객 웹사이트를 더욱 멋지게 만들어 보세요 . 안전하고 사용자 정의 가능한 파일 저장소를 구축하여 고객이 파일에 쉽게 접근하고 관리할 수 있도록 하세요.
지금 바로 웹 디자인 서비스를 업그레이드하세요!

플러그인 지금 받기

결론

WooCommerce Blocks는 코드 작성 없이 WordPress에서 완벽한 온라인 스토어를 구축할 수 있는 플러그인입니다. 제품 그리드, 필터, 추천 제품 디스플레이 등 다양한 블록을 활용하여 매력적이고 사용자 친화적인 쇼핑 경험을 쉽게 만들 수 있습니다. 익숙한 드래그 앤 드롭 인터페이스 덕분에 온라인 스토어 구축이 더욱 빠르고 효율적입니다.

온라인 스토어를 구축한 후 다음 단계는 실물 상품과 디지털 상품을 판매하는 것입니다. WP File Download 애드온 플러그인을 전자책, 소프트웨어, 멀티미디어 콘텐츠 등 디지털 상품을 판매할

WP File Download 애드온은 연 49달러부터 시작하며 6만 명 이상의 회원이 사용하고 있습니다. 더 나은 디지털 제품 판매를 위해 지금 바로 가입하세요!

최신 정보를 받아보세요

블로그를 구독하시면 사이트에 새로운 업데이트가 있을 때 이메일로 알려드리므로 놓치지 않으셔도 됩니다.

관련 게시물

 

댓글

아직 댓글이 없습니다. 댓글을 가장 먼저 남겨주세요.
이미 등록하셨나요? 여기에서 로그인하세요
2025년 12월 7일 일요일

캡차 이미지