# 모든 스토어 화면을 위한 블록을 갖춘 WooCommerce 테마 URL: https://canvaswp.com/ko/woocommerce/ Updated: 2026-11-03 WooCommerce 편집기에서 WordPress가 제공하는 블록으로 제품 페이지, 쇼핑몰 그리드, 장바구니, 결제 페이지를 디자인한 다음, 바로 작동하는 스토어로 가져와지는 데모에서 시작하세요. 주문 관리는 WooCommerce가, 디자인은 Canvas가 담당합니다. 최종 업데이트 2026년 11월 3일 24 WooCommerce 블록 18 스토어 템플릿 21 가져올 수 있는 데모 스토어 블록 ## 판매하는 네 가지 화면을 위한 블록 24개 WooCommerce 스토어에서 쇼핑객이 보는 모든 요소는 설정 패널이 있는 블록이므로, 템플릿 파일을 건드리지 않고도 이동, 스타일 변경, 제거할 수 있습니다. ### 제품 페이지 블록 11개 단일 제품 레이아웃을 블록 단위로 구성하거나, 제공되는 템플릿 중 하나에서 시작해 요소를 옮길 수 있습니다. #### Product Images Included with any plan WooCommerce 상품의 대표 이미지와 선택적 갤러리 썸네일을 표시합니다. #### Product Gallery Linker Included with any plan 클릭한 이미지로 제품 갤러리 캐러셀을 이동시키는 썸네일 스트립입니다. #### Product Price Included with any plan 할인가와 통화 서식을 포함해 WooCommerce 상품 가격을 표시합니다. #### 제품 평점 모든 플랜에 포함 현재 WooCommerce 제품의 별점과 선택 사항인 리뷰 개수를 표시합니다. #### Product Meta 모든 플랜에 포함 SKU, 카테고리, 태그가 포함된 제품 메타 카드를 표시합니다. #### Product Short Description Included with any plan 단락 구조를 그대로 유지한 채 상품 짧은 설명을 표시합니다. #### Variation Swatches Included with any plan 가변 상품의 옵션을 고르는 색상 점 또는 알약 모양 버튼입니다. #### Add to Cart 모든 플랜에 포함 현재 제품의 WooCommerce 장바구니 담기 양식을 표시하며, 선택 사항으로 수량 입력란을 제공합니다. #### 제품 탭 모든 플랜에 포함 WooCommerce 제품 데이터 탭을 표시합니다: 설명, 추가 정보, 리뷰. #### Product Share Included with any plan 현재 WooCommerce 상품의 소셜 공유 링크가 담긴 “Share:” 카드를 표시합니다. #### 관련 상품 모든 플랜에 포함 현재 상품과 관련된 WooCommerce 상품 그리드를 표시합니다. 단일 상품 템플릿에서만 렌더링됩니다. ### 쇼핑몰과 카탈로그 5개 블록 그리드, 캐러셀, 카테고리 카드, 가격 필터를 제공하며, 각각 카테고리, 태그, 검색 결과 또는 직접 선택한 목록에서 항목을 불러올 수 있습니다. #### 제품 모든 플랜에 포함 WooCommerce 상품을 그리드 또는 목록 레이아웃으로 표시합니다. 출처, 카테고리, 태그, 정렬 순서로 필터링하세요. #### Product Categories Included with any plan WooCommerce 제품 카테고리를 썸네일, 이름, 제품 수가 포함된 반응형 카드 그리드로 표시합니다. #### Product Carousel Included with any plan owl-carousel로 WooCommerce 제품을 스크롤 가능하게 표시합니다. 자동 재생, 탐색 화살표, 점, 반응형 브레이크포인트를 지원합니다. #### Store Price Filter Included with any plan 페이지 이동 없이 상품 그리드를 필터링하는 두 개의 핸들을 가진 가격 범위 컨트롤입니다. #### Conference Tickets Included with any plan 티켓 제품 카테고리를 위한 가격 박스로, 각 박스에는 수량 선택 드롭다운과 실시간 장바구니 담기 링크가 있습니다. ### 장바구니 블록 3개 직접 디자인하는 장바구니 페이지로, 쇼핑객이 실제로 보는 업셀을 함께 제공합니다. #### Cart Table 모든 플랜에 포함 품목, 수량, 합계가 포함된 WooCommerce 장바구니 테이블을 표시합니다. #### Cart Totals 모든 플랜에 포함 소계, 배송비, 결제 버튼을 포함한 WooCommerce 장바구니 합계 패널을 표시합니다. #### Cross-Sells 모든 플랜에 포함 현재 WooCommerce 장바구니의 교차 판매 상품을 표시합니다. 장바구니가 활성 상태이고 교차 판매 상품이 포함된 경우에만 렌더링됩니다. ### 체크아웃 블록 3개 결제 양식, 주문 검토, 그리고 쇼핑객에게 방금 무슨 일이 일어났는지 알려주는 알림입니다. #### Checkout Billing Included with any plan WooCommerce 결제 청구 주소 양식을 표시합니다. #### Checkout Order Review Included with any plan 품목별 내역과 합계가 포함된 WooCommerce 체크아웃 주문 검토 요약을 표시합니다. #### WooCommerce Notices 모든 플랜에 포함 오류, 성공 메시지, 안내 메시지 등 WooCommerce 알림을 표시합니다. ### 스토어의 다른 곳에서도 2개 블록 위의 네 가지 화면에 포함되지 않는 스토어 블록입니다. #### 위시리스트 모든 플랜에 포함 쇼핑객이 저장한 상품을 가격, 재고, 장바구니 담기 버튼과 함께 보여줍니다. 테마 옵션의 위시리스트에서 선택한 페이지에 배치하세요. #### 위시리스트 버튼 모든 플랜에 포함 현재 제품을 고객의 위시리스트에 저장합니다. 제품 템플릿과 제품 카드에서 사용하세요. ### 의류 매장 컬렉션 페이지, 가변 상품, 담긴 상품 수를 표시하는 헤더 장바구니를 갖춘 패션 카탈로그입니다. [이커머스 테마](https://canvaswp.com/ko/wordpress-themes/ecommerce/) ### 가구 매매와 임대 매물을 하나의 카탈로그에서 제공하며, 제품 그리드와 개별 제품 페이지 모두 블록으로 구성됩니다. [인테리어 디자인 테마](https://canvaswp.com/ko/wordpress-themes/interior-design/) ### 와인 와이너리 스토어로, 디자인이 제품 사진을 전면에 내세우고 쇼핑 페이지는 그 뒤에 자리합니다. [레스토랑 테마](https://canvaswp.com/ko/wordpress-themes/restaurant/) 21개 데모 쇼핑몰 중 세 곳입니다. 이 페이지에서 쇼핑객이 보는 모든 요소는 뒤에 설정 패널이 있는 블록입니다. [전체 Canvas 블록 314개](https://canvaswp.com/ko/blocks/) 동작 ## 쇼핑객이 페이지 새로고침 없이 하는 일 보통 플러그인 하나씩이 필요한 쇼핑몰 기능 세 가지가 이 통합 기능에 포함되어 있습니다. ### 속성 색상 스와치 관리자에서 제품 속성 용어에 색상을 지정하면, 가변 상품이 드롭다운 대신 색상 점이나 버튼 형태로 옵션을 보여 줘 구매자가 한눈에 옵션을 고를 수 있습니다. ### AJAX 장바구니 담기 그리드, 캐러셀 또는 카드 오버레이에서 상품을 추가하면 장바구니가 그 자리에서 업데이트됩니다. 쇼핑객은 보고 있던 페이지에 그대로 머물며, 헤더 미니 장바구니의 상품 수도 계속 갱신됩니다. ### 상품 카드 스타일 카탈로그의 모든 이미지를 하나의 모양으로 고정해 카드가 정렬되도록 하고, 추가 갤러리 이미지를 호버 시 표시할지 슬라이드쇼로 재생할지 선택하며, 호버 오버레이에 표시할 항목을 고르세요: 구매, 빠른 보기 또는 둘 다. 템플릿 ## 사이트 편집기에서 사용하는 WooCommerce 스토어 템플릿 18개 스토어의 모든 화면은 사이트 편집기에서 열고, 편집하고, 초기화할 수 있는 블록 템플릿입니다. 다른 블록 템플릿을 편집하는 방식과 같습니다. ### 단일 상품 레이아웃 제품 페이지를 기본 레이아웃, 갤러리를 따라가는 고정 요약, 목록형, 컬러 중심 디자인, 스토어 디자인, 두 가지 사용자 지정 링크 갤러리 레이아웃 중 하나, 또는 왼쪽, 오른쪽, 양쪽 사이드바 변형으로 구성할 수 있습니다. ### 쇼핑몰 페이지 레이아웃 쇼핑몰 페이지 자체를 전체 너비, 왼쪽 사이드바, 오른쪽 사이드바 또는 양쪽 사이드바 구성으로 배치하여, 필터와 카테고리를 카탈로그에 맞는 위치에 둘 수 있습니다. ### 아카이브, 장바구니 및 결제 쇼핑몰 아카이브, 제품 카테고리 아카이브, 장바구니, 결제 페이지는 각각 템플릿으로 제공되며, 테마가 제공하는 WooCommerce 템플릿 재정의도 함께 포함됩니다. 스토어 템플릿은 사이트 편집기의 템플릿 패널에서 Canvas 템플릿과 함께 woocommerce 아래에 표시되며, 같은 화면에서 초기화할 수 있습니다. 편집기에서 상품별로 레이아웃을 지정하거나, 테마 옵션에서 전체 스토어의 기본값을 설정하세요. 사이트 편집기에서 사용자 지정한 템플릿은 업데이트 후에도 그대로 유지되며, Canvas는 업데이트 후 변경된 템플릿이 무엇인지 알려 줍니다. 테마 옵션 ## 쇼핑몰 옵션 39개, 탭 5개 카탈로그, 상품 페이지, 장바구니와 결제, 헤더 미니 카트에 적용되는 스토어 전체 기본값과, 문의를 받는 스토어를 위한 카탈로그 모드를 제공합니다. 페이지당 상품 수, 페이지네이션, 상품 이미지 모양, 추가 갤러리 이미지, 카드 오버레이가 모두 여기에서 설정되며, 특정 항목만 개별적으로 설정하는 블록은 해당 블록이 배치된 페이지에서 여전히 우선합니다. - 카탈로그: 화면 크기별 행당 제품 수, 이미지 모양, 호버 동작, 세일 배지 - 제품 페이지: 단일 제품 화면에 표시되는 내용과 고정형 장바구니 담기 바 - 장바구니와 결제: 무료 배송 진행률 표시줄과 방해 요소가 없는 결제 화면 - 미니 카트: 쇼핑객이 상품을 추가할 때 헤더 카트의 동작 - 카탈로그 모드: 가격과 구매 버튼을 숨기고 문의 버튼 표시 [판매에 도움이 되는 스토어 옵션](https://docs.canvaswp.com/store-options-that-help-you-sell) [카탈로그 모드](https://docs.canvaswp.com/catalog-mode) [위시리스트](https://docs.canvaswp.com/the-wishlist) 테마 옵션, 상점 섹션, 카탈로그 탭. 성능 ## WooCommerce 스위치 5개 WooCommerce는 판매 상품이 없는 페이지를 포함해 웹사이트의 모든 페이지에 스크립트와 스타일시트를 불러옵니다. 이 다섯 가지 스위치로 이를 해제할 수 있으며, 각 설정은 되돌릴 수 있습니다. - 스토어 출력이 없는 페이지에서 WooCommerce JavaScript 제거 - 보고서를 확인하지 않는다면 주문 귀속 추적을 끄세요 - 모든 페이지 로드 시 장바구니 프래그먼트 스크립트의 폴링을 중지합니다. - 계정 및 결제 페이지 외에서 비밀번호 강도 라이브러리를 로드하지 않음 - 결제 및 계정 페이지 외에서는 번들된 Select2 라이브러리를 불러오지 않도록 하세요 [성능 최적화 35개 전부](https://canvaswp.com/ko/performance/) 테마 옵션, 성능, WooCommerce 탭. 데모 스토어 ## 21개의 데모는 실제로 작동하는 WooCommerce 스토어입니다 상품, 카테고리, 속성, 장바구니, 결제 페이지가 모두 가져와져 있어 바로 테스트 주문을 해볼 수 있습니다. 결정하기 전에 이 중 어느 것이든 실시간으로 미리 보실 수 있습니다. ### [Bag Store 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/ecommerce/) 쇼핑몰 & 이커머스 · 9개 페이지 · [설치 내용: Bag Store 데모의 블록과 콘텐츠 유형](https://docs.canvaswp.com/design-ecommerce) ### [Barber Shop 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/barber/) 뷰티 & 스파 · 7페이지 · [설치 항목: Barber Shop 데모의 블록과 콘텐츠 유형](https://docs.canvaswp.com/design-barber) ### [CanvasRoam 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/youtube-creator/) 포트폴리오 & 개인 · 10개 페이지 · [설치 항목: CanvasRoam 데모의 블록 및 콘텐츠 유형](https://docs.canvaswp.com/design-youtube-creator) ### [Christmas Store 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/xmas/) 쇼핑몰 & 이커머스 · 6개 페이지 ### [Clothing Store 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/store/) 쇼핑몰 & 이커머스 · 19개 페이지 · [설치 내용: Clothing Store 데모의 블록과 콘텐츠 유형](https://docs.canvaswp.com/design-store) ### [Conference 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/conference/) 이벤트 & 웨딩 · 페이지 25개 · [설치 항목: Conference 데모의 블록 및 콘텐츠 유형](https://docs.canvaswp.com/design-conference) ### [Drone 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/drone/) 쇼핑몰 & 이커머스 · 12개 페이지 ### [eBook 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/ebook/) 쇼핑몰 & 이커머스 · 9개 페이지 ### [Fashion Shop 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/shop/) 쇼핑몰 & 이커머스 · 25개 페이지 ### [Fashion Store 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/fashion-store/) 쇼핑몰 & 이커머스 · 16개 페이지 ### [FORM 2026 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/event-conference/) 이벤트 & 웨딩 · 페이지 14개 · [설치 항목: FORM 2026 데모의 블록 및 콘텐츠 유형](https://docs.canvaswp.com/design-event-conference) ### [Furniture 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/furniture/) 쇼핑몰 & 이커머스 · 12개 페이지 ### [Game of Canvas 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/gaming/) 엔터테인먼트 & 커뮤니티 · 페이지 12개 · [설치 항목: Game of Canvas 데모의 블록과 콘텐츠 유형](https://docs.canvaswp.com/design-gaming) ### [Illustrator 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/illustrator/) 포트폴리오 & 개인 · 7개 페이지 · [설치 항목: Illustrator 데모의 블록 및 콘텐츠 유형](https://docs.canvaswp.com/design-illustrator) ### [Jewelry Boutique 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/jewellery-boutique/) 쇼핑몰 & 이커머스 · 17개 페이지 ### [Podcasts 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/podcasts/) 블로그 & 매거진 · 페이지 13개 · [설치 내용: Podcasts 데모의 블록과 콘텐츠 유형](https://docs.canvaswp.com/design-podcasts) ### [Pottery Shop 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/shop-2/) 쇼핑몰 & 이커머스 · 12개 페이지 ### [Speaker Store 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/speaker/) 쇼핑몰 & 이커머스 · 11개 페이지 ### [Supplement Store 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/supplements/) 쇼핑몰 & 이커머스 · 13개 페이지 ### [Wildroot Gear 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/gear/) 쇼핑몰 & 이커머스 · 14개 페이지 · [설치 내용: Wildroot Gear 데모의 블록과 콘텐츠 유형](https://docs.canvaswp.com/design-gear) ### [Wine Estate 데모, 실시간 미리보기 (새 탭에서 열림)](https://demos.canvaswp.com/wine/) 푸드 & 음료 · 페이지 10개 · [설치 항목: Wine Estate 데모의 블록과 콘텐츠 유형](https://docs.canvaswp.com/design-wine) [데모 88개 전체 보기](https://canvaswp.com/ko/demos/) 운영 중인 스토어로 가져오기 ## 쇼핑몰 페이지는 복제하지 않고 그대로 이어받습니다 쇼핑몰 디자인을 가져올 때 흔히 걱정하는 것은 결제 페이지가 두 개가 되는 것입니다. Canvas는 데모의 WooCommerce 페이지를 사이트에 이미 있는 페이지와 연결합니다. 모든 쇼핑몰 데모가 가져와지는 가져오기 화면과, 이를 되돌리는 롤백 기능입니다. ### 하나의 쇼핑몰, 하나의 장바구니, 하나의 결제 가져오기 도구가 기존 WooCommerce 페이지를 찾아, 데모의 메뉴와 링크를 그 페이지로 곧바로 연결합니다. ### 되돌릴 수 있음 가져오기로 생성된 모든 항목은 추적되므로, 한 화면에서 데모 콘텐츠를 삭제하고 이전에 있던 옵션과 메뉴를 복원할 수 있습니다. ### 포함된 제품 데모 제품, 카테고리, 속성, 스와치 색상이 디자인과 함께 제공되므로, 자신의 항목으로 교체하는 동안에도 카탈로그가 올바르게 표시됩니다. ### 또는 페이지만 페이지 범위 가져오기를 선택하면 데모의 페이지만 가져오고, 테마 옵션, 메뉴, 전면 페이지는 가져오지 않습니다. 질문 ## Canvas로 판매하기 스토어 운영자가 가장 먼저 묻는 내용입니다. [문서](https://docs.canvaswp.com/setting-up-your-shop)에서 각 블록과 옵션을 자세히 다룹니다. **여전히 WooCommerce 플러그인이 필요한가요?** 네, Canvas는 WooCommerce 위에 블록, 템플릿, 옵션을 추가할 뿐 WooCommerce의 어떤 기능도 대체하지 않습니다. 주문, 상품, 세금, 배송, 결제는 다른 확장 기능이 기대하는 대로 WooCommerce에 그대로 남습니다. 스토어 데모로 시작하면 가져오기가 실행되기 전에 설정 마법사가 WooCommerce를 설치하고 활성화합니다. **쇼핑몰 데모를 가져오면 기존 쇼핑 페이지와 결제 페이지가 교체되나요?** 아니요, Canvas 가져오기 도구는 사이트에 이미 있는 WooCommerce 페이지를 그대로 연결하므로 두 번째 쇼핑몰, 장바구니, 결제 또는 계정 페이지가 생성되지 않습니다. 기존 제품과 주문은 그대로 유지됩니다. **이 블록들을 WooCommerce 자체 블록과 함께 쓸 수 있나요?** 네, Canvas 스토어 블록은 일반 등록 블록이므로 같은 템플릿과 같은 페이지에서 WooCommerce 블록 및 코어 블록과 함께 배치됩니다. 전체 레이아웃을 한꺼번에 바꾸지 않고 블록을 하나씩 교체할 수 있습니다. **컬러 스와치는 어떻게 작동하나요?** WordPress 관리자에서 제품 속성 용어에 색상을 지정하면, Canvas Variation Swatches 블록이 드롭다운 대신 해당 속성을 색상 점 또는 버튼 형태로 표시합니다. 제품 페이지와 이를 사용하는 템플릿에 적용됩니다. **내 플랜에 스토어 블록이 포함되나요?** 네, 모든 24개 Canvas 스토어 블록은 프리미엄 블록이며, 모든 플랜에 모든 프리미엄 블록이 포함됩니다. 스토어 애드온이나 이커머스 전용 등급은 없습니다. 다른 테마는 이 기능을 별도로 나눠 판매하는 경우가 많습니다. 예를 들어 빠른 보기는 [Astra Pro 기능](https://canvaswp.com/ko/compare/astra/)이며, OceanWP는 [eCommerce Pro 플러그인](https://canvaswp.com/ko/compare/oceanwp/)을 별도 제품으로 판매합니다.