WooCommerce 제품을 필터링하는 방법(단계별 자습서)

WooCommerce 상점에서 속성별로 제품을 필터링하는 방법을 찾고 계십니까?

속성별로 WooCommerce 제품을 필터링하면 고객이 구매하려는 항목을 더 쉽게 찾을 수 있습니다. 고객의 시간을 절약하고 보다 원활한 쇼핑 경험을 제공합니다.

이 기사에서는 온라인 상점에서 속성 설정으로 WooCommerce 필터를 사용하는 방법을 보여줍니다.

속성별로 WooCommerce 제품을 필터링하는 이유는 무엇입니까?

필터를 사용하면 고객이 WooCommerce 스토어에서 제품을 매우 쉽게 탐색할 수 있습니다.

이를 통해 쇼핑객은 색상, 가격대, 원단, 크기 등 다양한 속성을 기반으로 검색 범위를 좁힐 수 있습니다. 전체 제품 컬렉션을 스크롤하는 대신 사용자는 관심 있는 제품을 간단히 찾아볼 수 있습니다.

필터를 추가하면 사용자 경험을 향상하고, 검색 기능을 개선하고, 온라인 상점에서 반송률을 줄이는 데 도움이 될 수 있습니다.

또한 고객이 관심 있는 제품에 대해 사용 가능한 모든 옵션을 볼 수 있도록 하여 더 많은 정보에 입각한 구매를 할 수 있도록 하여 판매를 늘릴 수 있습니다.

즉, WooCommerce 상점에서 제품을 쉽게 필터링하는 방법을 살펴보겠습니다. 속성 및 사용자 정의 속성별로 WooCommerce 제품을 필터링하는 방법을 보여줍니다.

속성별로 WooCommerce 제품을 필터링하는 방법

WooCommerce 제품을 필터링하는 빠르고 쉬운 방법을 찾고 있다면 이 방법이 적합합니다. 속성 설정으로 간단한 WooCommerce 필터를 설정하는 방법을 보여드리겠습니다.

먼저 YITH WooCommerce Ajax 제품 필터 플러그인을 설치하고 활성화해야 합니다. 자세한 지침은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오.

활성화되면 WordPress 관리자 사이드바에서 YITH » Ajax 제품 필터 페이지로 이동합니다.

여기에서 '+ 새 사전 설정 만들기' 버튼을 클릭하여 필터 사전 설정 만들기를 시작합니다.

거기에 있으면 '사전 설정 이름' 상자에 필터 이름을 입력하여 시작할 수 있습니다.

사전 설정 이름은 스토어에 표시되지 않으며 참조용으로만 존재합니다.

다음으로 사전 설정 레이아웃으로 '가로'를 선택한 다음 하단의 '+ 새 필터 추가 버튼'을 클릭합니다.

플러그인의 무료 버전을 사용하는 경우 이 옵션을 사용할 수 없습니다. 대신 '기본' 사전 설정 레이아웃을 갖게 됩니다.

이제 WooCommerce 제품에 대한 필터 생성을 시작할 수 있습니다.

WooCommerce 제품에 대한 필터 생성

먼저 '필터 이름' 옵션 옆에 필터 이름을 입력해야 합니다.

예를 들어 고객이 제품 범주를 정렬하는 데 도움이 되는 필터를 만드는 경우 이름을 '범주별 필터링'으로 지정할 수 있습니다.

다음으로 '필터 대상' 드롭다운 메뉴에서 필터에 대한 매개변수를 선택할 수 있습니다. 플러그인의 무료 버전은 제품 카테고리 및 태그에 대한 필터만 제공한다는 점에 유의하십시오.

이러한 옵션의 차이점에 대해 자세히 알아보려면 WooCommerce에 태그, 속성 및 범주를 추가하는 방법에 대한 가이드를 참조하십시오.

가격 범위별로 제품을 정렬하기 위해 필터를 만드는 경우 '가격 범위' 옵션을 선택해야 합니다. 마찬가지로 인기도나 평균 평점을 기준으로 제품을 정렬하려면 '주문 기준' 옵션을 선택해야 합니다.

제품 태그, 카테고리, 색상, 크기, 재료, 스타일 등을 필터링하려면 '분류' 옵션을 선택할 수도 있습니다. 이 자습서에서는 이 옵션을 사용합니다.

그런 다음 필터에 대한 분류 옵션에서 선택해야 합니다. 예를 들어 색상별로 제품을 필터링하려면 드롭다운 메뉴에서 해당 옵션을 선택해야 합니다.

제품 범주에 대한 필터를 만들 때 '제품 범주' 옵션을 선택합니다.

다음으로 '조건 선택' 섹션에 웹사이트의 모든 제품 카테고리를 입력해야 합니다.

그런 다음 '필터 유형' 드롭다운 메뉴에서 매장 프런트 엔드에 필터를 표시하는 방법을 선택할 수 있습니다.

필터를 체크박스, 드롭다운 메뉴, 텍스트, 색상 견본 등으로 표시할 수 있습니다. 이 자습서에서는 '선택' 옵션을 선택하여 드롭다운 메뉴를 추가합니다.

다음으로 드롭다운 메뉴 내에서 검색 상자를 활성화하려면 '검색 필드 표시' 스위치를 토글해야 합니다.

'토글로 표시' 스위치를 활성화하여 만들고 있는 필터를 토글로 표시할 수도 있습니다. 그런 다음 고객은 필터를 켜고 끌 수 있습니다.

그런 다음 '정렬 기준' 드롭다운 메뉴에서 필터링된 용어의 기본 순서를 선택하기만 하면 됩니다. 필터 범주는 선택한 순서대로 표시됩니다.

이름, 용어 수 또는 슬러그를 사용하여 필터 범주를 정렬할 수 있습니다. 오름차순(ASC) 또는 내림차순(DESC)으로 필터링된 용어에 대한 '주문 유형'을 선택할 수도 있습니다.

마지막으로 하단의 '필터 저장' 버튼을 클릭하여 필터를 저장합니다.

이제 프로세스를 반복하여 여러 필터를 만듭니다.

그런 다음 상단으로 돌아가서 '일반 설정' 탭으로 전환하여 일부 설정을 구성합니다.

일반 설정 구성

여기에서 '필터 모드' 옵션을 선택하여 시작해야 합니다. AJAX를 사용하여 실시간으로 필터를 적용할지 아니면 사이트에 '필터 적용' 버튼을 표시할지 선택할 수 있습니다.

다음으로 저장 버튼 표시 또는 필터 결과 즉시 표시 중에서 선택해야 합니다.

그런 다음 AJAX를 사용하여 동일한 페이지에 필터 결과를 표시할지 아니면 새 페이지에 결과를 다시 로드할지 선택합니다.

그런 다음 비어 있는 필터 용어를 표시하지 않으려면 '빈 용어 숨기기' 옵션까지 아래로 스크롤하고 스위치를 켜야 합니다.

예를 들어 WooCommerce 스토어에 '머그' 카테고리를 추가했지만 현재 해당 카테고리에 항목이 없으면 '카테고리별 필터링' 목록에 표시되지 않습니다.

그런 다음 결과에 품절된 제품을 표시하지 않으려면 '재고 없는 제품 숨기기' 스위치를 토글하십시오.

다른 설정은 기본값으로 두거나 원하는 대로 구성할 수 있습니다.

선택을 마친 후 '옵션 저장' 버튼을 클릭하여 변경 사항을 저장하고 상단의 '사용자 지정' 탭으로 전환합니다.

사용자 지정 설정 구성(프리미엄 플러그인만 해당)

참고: 플러그인의 무료 버전을 사용하는 경우 '사용자 지정' 탭을 사용할 수 없습니다.

여기에서 WooCommerce 필터의 레이블 스타일 색상, 텍스트 용어 색상, 색상 견본 크기, 필터 영역 색상 등을 선택할 수 있습니다.

색상을 추가하면 WooCommerce 필터가 미학적으로 더욱 보기 좋아 보이고 온라인 상점의 브랜딩과 일치하는 데 도움이 될 수 있습니다.

선택을 마치면 '옵션 저장' 버튼을 클릭하고 상단에서 'SEO' 탭으로 전환합니다.

SEO 설정 구성

거기에 있으면 'SEO 옵션 활성화' 스위치를 토글하여 설정을 활성화하십시오.

이제 드롭다운 메뉴에서 메타 태그를 추가하여 필터링된 페이지에서 사용할 수 있습니다. 이렇게 하면 사이트의 SEO가 향상됩니다.

자세한 내용은 WordPress 메타데이터 및 메타 태그에 대한 기사를 참조하십시오.

'필터 앵커에 "nofollow" 추가' 스위치를 켜서 필터링된 모든 앵커에 nofollow 속성을 자동으로 추가할 수도 있습니다. 이렇게 하면 페이지 순위를 매길 때 필터 앵커를 사용하지 않도록 검색 엔진에 알릴 수 있습니다.

만족스러우면 '옵션 저장' 버튼을 클릭하여 설정을 저장하십시오.

제품 페이지에 WooCommerce 필터 추가

방금 생성한 필터를 WooCommerce 제품 페이지에 추가하려면 상단에서 '필터 사전 설정' 탭으로 전환해야 합니다.

거기에 있으면 방금 만든 필터 사전 설정의 단축 코드를 복사하기만 하면 됩니다.

다음으로 WordPress 관리 사이드바의 블록 편집기에서 WooCommerce 제품 페이지를 열기만 하면 됩니다.

도착하면 왼쪽 상단 모서리에 있는 블록 추가 '(+)' 버튼을 클릭하여 쇼트코드 블록을 찾습니다.

이제 단축 코드 블록에 복사한 필터 사전 설정 단축 코드를 붙여넣기만 하면 됩니다.

마지막으로 '게시' 또는 '업데이트' 버튼을 클릭하여 변경 사항을 저장합니다.

이제 웹사이트를 방문하여 속성별 WooCommerce 필터 기능이 작동하는 것을 볼 수 있습니다.

사용자 정의 속성으로 WooCommerce 제품을 필터링하는 방법

사용자 정의 속성을 사용하여 WooCommerce 제품 필터를 생성하려는 경우 이 방법이 적합합니다.

사용자 정의 속성 생성

사용자 정의 속성을 생성하려면 WordPress 관리자 사이드바에서 제품 » 속성 페이지를 방문해야 합니다.

거기에 있으면 속성의 이름과 슬러그를 입력하여 시작하십시오.

예를 들어 특정 제품 재료에 대한 필터를 생성하려는 경우 속성 이름을 '재료별 필터'로 지정할 수 있습니다.

그런 다음 해당 속성을 공유하는 모든 항목을 단일 페이지에 표시하려면 '보관 사용' 상자를 선택해야 합니다.

그런 다음 하단의 '속성 추가' 버튼을 클릭합니다.

속성이 생성되면 '용어 구성' 링크를 클릭하여 속성에 용어를 추가합니다.

이렇게 하면 '이름' 상자에 용어를 입력해야 하는 새 화면으로 이동합니다.

예를 들어 '재료별 필터'라는 속성을 만든 경우 개별 재료를 양모와 같은 용어로 추가할 수 있습니다. 원하는 만큼 속성에 용어를 추가할 수 있습니다.

완료되면 '재료별 새 필터 추가' 버튼을 클릭하여 용어를 저장합니다.

제품에 사용자 정의 속성 추가

속성을 생성한 후 개별 WooCommerce 제품에 추가해야 합니다.

이를 위해서는 편집하려는 제품 페이지를 열어야 합니다. 여기에서 '제품 데이터' 섹션까지 아래로 스크롤하고 '속성' 탭으로 전환합니다.

다음으로 '맞춤 제품 속성' 드롭다운 메뉴를 열고 방금 만든 맞춤 속성을 선택하기만 하면 됩니다.

이제 '추가' 버튼을 클릭하십시오.

맞춤 속성이 추가되었으므로 '용어 선택' 옵션에서 제품과 일치하는 용어를 검색하기만 하면 됩니다.

예를 들어 재료에 대한 속성을 생성했고 편집 중인 제품이 양모로 만들어진 경우 드롭다운 메뉴에서 '양모'를 선택해야 합니다.

완료되면 '속성 저장' 버튼을 클릭합니다.

그런 다음 상단의 '업데이트' 또는 '게시' 버튼을 클릭하여 변경 사항을 저장합니다.

이제 동일한 속성을 공유하는 모든 제품에 대해 프로세스를 반복해야 합니다.

플러그인을 사용하여 사용자 정의 속성 필터 생성

다음으로 YITH WooCommerce Ajax 제품 필터 플러그인을 설치하고 활성화해야 합니다. 자세한 지침은 WordPress 플러그인 설치 방법에 대한 가이드를 참조하십시오.

참고 : 플러그인의 무료 또는 프리미엄 버전을 사용하여 WooCommerce용 사용자 정의 속성 필터를 생성할 수 있습니다.

활성화되면 WordPress 관리자 사이드바에서 YITH » Ajax 제품 필터 페이지로 이동합니다.

여기에서 '+ 새 사전 설정 만들기' 버튼을 클릭하세요.

다음으로 '사전 설정 이름' 상자에 만들고 있는 사전 설정의 이름을 입력해야 합니다.

완료되면 하단의 '+ 새 필터 추가 버튼'을 클릭하여 WooCommerce 사용자 정의 속성 필터 생성을 시작합니다.

먼저 '필터 이름' 상자에 이름을 입력해야 합니다.

예를 들어 고객이 다양한 재료 옵션을 통해 정렬하는 데 도움이 되는 필터를 생성하는 경우 이름을 'Filter for Material'로 지정할 수 있습니다.

그런 다음 '필터 대상' 드롭다운 메뉴에서 '분류'를 선택합니다. 플러그인의 무료 버전을 사용하는 경우 이 옵션이 기본적으로 선택됩니다.

이제 생성한 맞춤 속성은 '분류 선택' 옵션 옆의 드롭다운 메뉴에서 이미 사용할 수 있습니다.

계속해서 드롭다운 목록에서 맞춤 속성을 선택하고 '용어 선택' 상자에 속성 용어를 입력합니다.

다음으로 '필터 유형' 드롭다운 메뉴에서 매장 프런트 엔드에 필터를 표시할 방식을 선택해야 합니다.

필터는 확인란, 드롭다운 메뉴, 텍스트, 색상 견본 등으로 표시될 수 있습니다.

그런 다음 '정렬 기준' 드롭다운 메뉴에서 필터링된 용어의 기본 순서를 선택합니다.

이름, 용어 수 또는 슬러그를 사용하여 필터 범주를 정렬할 수 있습니다. 오름차순(ASC) 또는 내림차순(DESC)으로 필터링된 용어에 대한 '주문 유형'을 선택할 수도 있습니다.

마지막으로 하단의 '필터 저장' 버튼을 클릭하여 사용자 지정 속성 필터를 저장합니다.

다음으로 상단에서 '일반 설정' 탭으로 전환해야 합니다. 여기에서 필터 모드를 선택하고 빈 용어를 숨기고 필요에 따라 기타 설정을 구성할 수 있습니다.

완료되면 '옵션 저장' 버튼을 클릭하여 변경 사항을 저장하고 상단의 '사용자 지정' 탭으로 전환합니다.

참고 : 무료 버전을 사용 중인 경우 사용자 지정 설정을 사용할 수 없습니다.

여기에서 필터 사전 설정이 웹 사이트의 프런트 엔드에 표시되는 방식을 사용자 지정할 수 있습니다.

예를 들어 레이블 스타일 색상, 텍스트 용어 색상, 색상 견본 크기, 필터 영역 색상 등을 선택할 수 있습니다.

선택을 마친 후 '옵션 저장' 버튼을 클릭하고 상단에서 'SEO' 탭으로 전환합니다.

여기에서 'SEO 옵션 사용' 스위치를 토글하여 설정을 활성화합니다.

드롭다운 메뉴에서 로봇 메타 태그를 추가하여 필터링된 페이지에서 사용할 수 있습니다. 이렇게 하면 사이트의 SEO가 향상됩니다.

또한 '필터 앵커에 "nofollow" 추가' 스위치를 토글하여 모든 필터 앵커에 nofollow 속성을 자동으로 추가할 수 있습니다.

만족스러우면 '옵션 저장' 버튼을 클릭하여 설정을 저장하십시오.

WooCommerce 제품 페이지에 사용자 정의 속성 필터 추가

WooCommerce 제품 페이지에 사용자 정의 속성 필터를 추가하려면 상단의 '필터 사전 설정' 탭으로 전환해야 합니다.

여기에서 사용자 정의 속성 필터의 단축 코드를 복사하십시오.

그런 다음 WordPress 관리자 사이드바의 블록 편집기에서 제품 페이지를 엽니다.

여기에서 왼쪽 상단의 블록 추가 '(+)' 버튼을 클릭하여 Shortcode 블록을 찾아 추가합니다.

그런 다음 블록에 복사한 필터 사전 설정 단축 코드를 붙여넣기만 하면 됩니다.

마지막으로 '게시' 또는 '업데이트' 버튼을 클릭하여 변경 사항을 저장합니다.

이제 웹사이트를 방문하여 WooCommerce 사용자 정의 속성 필터가 작동하는 것을 볼 수 있습니다.

이 기사가 속성 및 사용자 정의 속성별로 WooCommerce 제품을 필터링하는 방법을 배우는 데 도움이 되었기를 바랍니다. 검색 결과를 개선하기 위해 웹사이트에 퍼지 검색을 추가하는 방법과 최고의 WooCommerce 테마에 대한 최고의 선택에 대한 기사를 보고 싶을 수도 있습니다.

이 기사가 마음에 드셨다면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. 트위터와 페이스북에서도 우리를 찾을 수 있습니다.