아름다운 WooCommerce Shop 페이지를 만드는 방법(5단계)

WooCommerce 쇼핑 페이지를 사용자 정의하는 가장 쉬운 방법을 찾고 계십니까?

WordPress는 전문적인 웹사이트를 만드는 데 도움이 되는 다양한 블록을 제공합니다. WooCommerce를 사용하는 경우 온라인 상점에 사용할 수 있는 전용 WooCommerce 블록에 액세스할 수도 있습니다.

따라서 이러한 요소를 사용하여 전환을 유도하는 WooCommerce 쇼핑 페이지를 구축하는 방법이 궁금할 수 있습니다.

다행히 프로세스는 매우 간단합니다. 이 블록을 사용하여 WooCommerce를 사용하면 다양한 방식으로 제품을 표시할 수 있습니다. 또한 필터 및 검색 기능을 추가하여 사용자가 상점을 더 쉽게 탐색할 수 있습니다.

이 기사에서는 블록을 사용하여 아름다운 WooCommerce 쇼핑 페이지를 만드는 방법을 보여줍니다. 지침을 따르고 필요에 따라 사용하려는 블록을 선택할 수 있습니다. 시작하자!

목차:

1. 모든 제품 블록 배치
2. 추천 제품 및/또는 엄선된 제품 블록 추가
3. 상점 페이지에서 제품 검색 활성화
4. 추천 카테고리 블록 사용
5. 가격별로 제품을 필터링하는 옵션 추가

블록으로 WooCommerce 상점 페이지를 사용자 정의하는 방법

시작하려면 상점의 Shop 페이지에 대한 편집기를 열고 싶을 것입니다. 그런 다음 다음 지침에 따라 콘텐츠를 사용자 지정합니다.

1. 모든 제품 블록 배치

쇼핑 페이지는 모든 모양과 크기로 제공됩니다. 온라인 상점에서 이 페이지는 일반적으로 판매 중인 모든 제품을 표시합니다. 사용자는 개별 항목을 클릭하여 해당 제품 페이지를 열거나 장바구니에 직접 추가할 수 있습니다(상점에서 허용하는 경우).

WordPress와 WooCommerce를 사용하면 상점 페이지에 포함할 요소를 완전히 제어할 수 있습니다. 이 페이지의 모양과 느낌은 사용 중인 테마와 구성 방법에 따라 다릅니다.

WooCommerce는 플러그인 사용을 시작할 때 자동으로 상점 페이지를 설정하므로 계속해서 귀하의 모습을 확인할 수 있습니다. 편집할 준비가 되면 페이지 로 이동하여 쇼핑 옵션을 찾으십시오.

블록 편집기에서 이 페이지를 열면 다음과 같은 내용이 표시됩니다.

기본적으로 Shop 페이지에는 모든 제품 블록과 헤더가 포함됩니다. 이 블록이 표시되지 않으면 더하기(+) 기호를 클릭하고 옵션 목록에서 선택하여 페이지에 추가할 수 있습니다.

모든 제품 블록은 새 제품에서 이전 제품으로 주문된 상점의 모든 제품을 포함하는 그리드를 표시합니다. 제품의 표시 순서를 변경하려면 블록을 클릭하고 오른쪽의 설정 패널로 이동하십시오. 그런 다음 콘텐츠 설정 섹션으로 이동하여 제품 주문 기준 메뉴에서 기본 설정을 선택합니다.

한편, 레이아웃 설정 에서 제품 그리드에 표시할 열과 행 수를 선택할 수 있습니다. 이 블록에서 사용할 수 있는 다른 옵션을 자유롭게 탐색하십시오.

2. 추천 제품 및/또는 엄선된 제품 블록 추가

많은 상점 페이지는 특정 제품을 강조 표시합니다. 이는 일반적으로 신규 또는 할인된 재고 또는 최근에 추가된 제품과 같이 상점 소유자가 주의를 끌기 원하는 품목입니다. WooCommerce에는 상점의 모든 항목을 선보일 수 있는 추천 제품 블록이 함께 제공됩니다.

페이지에 이 블록을 배치하고 나면 추천할 제품을 선택하고 완료 를 클릭해야 합니다.

그런 다음 WooCommerce는 제품의 이미지, 이름, 가격, 설명 및 클릭 유도문안(CTA)을 표시합니다. 블록은 다음과 같아야 합니다.

그런 다음 이 블록을 원하는 대로 사용자 지정할 수 있습니다. 예를 들어 이미지를 변경하고 CTA 버튼을 수정할 수 있습니다.

WooCommerce 쇼핑 페이지에 추천 제품 블록을 추가하는 것의 단점은 사용자가 나머지 제품에서 주의를 끌 수 있다는 것입니다. 이에 대응하려면 열을 사용하여 여러 추천 제품을 나란히 표시하는 것이 좋습니다.

추천 제품 블록의 대안은 직접 선택한 제품 옵션입니다. 이 블록을 사용하면 여러 제품을 선택하고 나란히 표시할 수 있습니다. All Products 블록과 동일한 스타일을 사용합니다.

추천 제품과 엄선된 제품 블록 은 모두 비슷한 목적을 수행합니다. 이상적으로는 추천 항목이 너무 많아 방문자를 압도하지 않도록 두 가지 옵션 중 하나를 선택하는 것이 좋습니다. 또한 이러한 블록을 페이지 상단에 배치하여 사용자가 놓칠 수 없도록 하는 것이 좋습니다.

3. 상점 페이지에서 상품 검색 활성화

대형 제품 카탈로그가 있는 상점이 있는 경우 검색 기능을 제공해야 합니다. 이렇게 하면 사용자는 전체 상점을 탐색하지 않고도 염두에 둔 특정 항목을 찾을 수 있습니다.

쇼핑 페이지에 검색 블록을 추가할 때 기본 WordPress 검색 블록이 아닌 상품 검색 옵션을 찾고 싶을 것입니다. 상품 검색 은 결과를 WooCommerce 제품으로 제한하고 다른 검색 블록에는 사이트의 다른 모든 페이지가 포함됩니다.

WooCommerce 검색 기능은 다음과 같습니다.

상품 검색 블록은 편집기 내에서 작동하지 않으므로 프런트 엔드에서 테스트해야 합니다. 또한 블록은 자동 완성 기능을 제공하지 않으므로 사용자는 전체 쿼리를 입력하고 결과를 보려면 새 페이지를 로드해야 합니다.

4. 추천 카테고리 블록 사용

사용자가 직접 고른 제품을 가리키도록 하는 것 외에도 특정 제품 범주를 강조 표시할 수도 있습니다. 이것은 사용자가 특정 부서의 항목을 찾을 수 있도록 하므로 여러 유형의 제품을 판매하는 경우 특히 유용할 수 있습니다.

WooCommerce 쇼핑 페이지에 추천 카테고리 블록을 추가하여 시작하십시오. 그런 다음 강조 표시할 제품 범주를 선택하고 완료 를 클릭합니다.

추천 카테고리 블록은 다음과 같습니다.

블록을 사용하면 배경과 텍스트의 색상을 변경할 수 있지만 추가 사용자 지정 옵션이 많이 제공되지는 않습니다. 또한 블록이 많은 공간을 차지하므로 열을 사용하여 여러 추천 카테고리를 나란히 배치하는 것이 좋습니다.

추천 제품 카테고리 블록은 매우 기본적이므로 추가 사용자 정의를 위해 Otter 블록과 같은 플러그인을 살펴보는 것이 좋습니다.

Otter Blocks를 사용하면 애니메이션 및 기타 가시성 설정을 추가하여 WooCommerce 블록을 수정할 수 있습니다.

또한 Otter Blocks는 온라인 상점에서 사용할 수 있는 다양한 새 블록을 추가합니다. 여기에는 팝업(이메일 등록 수집에 적합) 및 제품 리뷰와 같은 옵션이 포함됩니다.

5. 가격별로 제품을 필터링하는 옵션 추가

지금까지 귀하의 상점에는 검색 창, 엄선된 제품, 추천 카테고리 및 전체 제품 카탈로그가 있습니다. 당신이 놓치고 있는 것은 사용자가 제품을 필터링할 수 있는 방법뿐입니다.

가격별 제품 필터링 블록을 사용하면 고객이 바로 이를 수행할 수 있습니다. 블록에는 고객이 보고 싶은 제품의 최소 및 최대 가격을 설정할 수 있는 슬라이더가 표시됩니다.

가격 값은 편집할 수 없으며 제품 가격에 따라 다릅니다. 방문자는 원하는 값을 입력하거나 슬라이더를 사용하여 수정할 수 있습니다.

가격 슬라이더를 변경하면 모든 제품 블록이 업데이트되어 기준을 충족하는 제품이 표시됩니다. 이것은 사용자가 페이지를 다시 로드할 필요 없이 발생합니다.

배치가 진행되는 한 제품 카탈로그 위에 가격별 제품 필터링 블록을 추가하는 것이 좋습니다. 그렇게 하면 사용자가 페이지를 아래로 스크롤할 때 볼 수 있습니다.

또한 사용자가 크기, 색상 및 기타 기능별로 제품을 필터링할 수 있습니다. 속성별 제품 필터링 블록을 사용하면 상점에서 사용 가능한 옵션을 기반으로 선택한 속성을 충족하는 제품을 찾아볼 수 있습니다.

그리고 그것은 거의 그것입니다! 완료되면 변경 사항을 저장하고 새 상점 페이지가 즉시 작동하기 시작합니다.

지금 WooCommerce 쇼핑 페이지를 설정하세요.

궁극적인 목표는 사용자에게 레이아웃과 합리적인 순서에서 원하는 모든 옵션을 제공하여 전환을 극대화하는 페이지를 만드는 것입니다.

WooCommerce 쇼핑 페이지를 설정하면 단일 제품 페이지에 관심을 돌릴 수 있습니다. 이를 위해 WooCommerce 제품 페이지를 최적화하는 방법에 대한 가이드를 확인하십시오.

블록을 사용하여 WooCommerce 쇼핑 페이지를 만드는 방법에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!