WooCommerce: 제품 필터(예: "Ajax 필터")를 활성화하는 방법은 무엇입니까?

게시 됨: 2018-08-22

WooCommerce 스토어에 제품이 많으면 온라인 고객이 쉽게 길을 잃을 수 있습니다. 원하는 제품을 찾기 전에 방문해야 할 페이지가 너무 많을 수 있습니다("제품 페이지 매김"). 말할 필요도 없이 이것은 귀하의 비즈니스에 큰 손실입니다. 아마도 그들은 결코 돌아 오지 않을 것입니다.

Amazon 및 eBay와 같은 인기 있는 전자 상거래 웹 사이트에서 쇼핑을 하면 각각 10억 개 정도의 제품을 취급한다는 것을 알 수 있습니다. 고맙게도 매우 유용한 검색 표시줄 위에 이러한 웹 사이트는 사이드바에 " 제품 필터 "를 제공합니다. 가격, 리뷰, 태그, 카테고리 등으로 세분화할 수 있습니다. 웹사이트는 "새로고침"되지 않지만 대신 동일한 페이지에서 즉시 필터링된 결과를 반환합니다 .

이것을 " Ajax 제품 필터 "라고 합니다(Ajax는 웹사이트 페이지 새로 고침을 강제하지 않고 백그라운드에서 실행되는 응용 프로그램 집합입니다). 그리고 Amazon과 eBay가 방금 증명했듯이 이 필터는 100개 이상의 WooCommerce 제품이 있는 경우 절대적으로 필요합니다.

다행히도 이를 위한 플러그인이 있습니다. 그리고 이 작은 비용을 잠재적인 투자 수익(ROI)과 비교할 때 무료이거나 매우 저렴합니다.

게다가, 많은 제품이 있는 경우 이미 여러 WooCommerce 제품 카테고리, 제품 태그, 제품 속성, 제품 사용자 정의 필드, 가격, 재고 상태가 있습니다. 즉 , WooCommerce 스토어에서 Ajax 제품 필터를 구현하는 데 10분이 소요될 수 있습니다 . 플러그인을 활성화하고 필터 기준을 선택하면 사용자가 사이드바에서 자동으로 부드러운 필터 위젯을 볼 수 있습니다!

그렇다면 최고의 "WooCommerce Ajax 제품 필터" 플러그인은 무엇입니까?

1. WooCommerce 기본 제품 필터 위젯(무료)

놀라다

WooCommerce는 기본적으로 제품 필터 위젯을 제공합니다. WooCommerce 내장 필터를 사용하려면 모양 > 위젯으로 이동하여 사이드바에 " Filter Products by Attribute ", " Filter Products by Rating " 및 " Filter Products by Price " 필터를 끌어다 놓습니다 .

WooCommerce 내장 제품 필터 위젯

일부 테스트 제품에는 "크기"라는 속성이 있으므로 "속성별 제품 필터링" 위젯을 설정하여 제품 크기를 필터링합니다. 제품에 기존 속성이 있는 한 이 작업은 모두 자동입니다. 이제 프론트 엔드는 다음과 같습니다.

기본 WooCommerce 제품 필터 위젯이 활성화된 WooCommerce Shop 페이지

약 1분 만에 속성, 등급 및 가격 "슬라이더"별로 필터를 추가할 수 있었습니다. 매우 쉽습니다. 그러나 두 가지 주요 문제가 있습니다. 이러한 WooCommerce 필터는 Ajax에 의해 구동되지 않으며 (따라서 필터 중 하나를 사용한 후 페이지가 "다시 로드"됨) 너무 제한적 입니다. 기본 위젯은 3개뿐입니다. 속성 드롭다운 또는 목록만 가질 수 있고 가격 슬라이더만 있고 가격 범위 목록은 아마존에서 사용할 수 없습니다... 기본적으로 이 설정으로는 많은 작업을 할 수 없습니다.

더 고급 위젯, 더 많은 디자인 옵션, Ajax 기반 시스템 및 더 강력하면서도 유연한 무언가가 필요할 수 있습니다.

2. WooCommerce의 Ajax 지원 Enhanced Layered Navigation 플러그인(PREMIUM)

WooCommerce의 이 공식 플러그인은 제품 필터링 완벽을 향한 훌륭한 첫 단계입니다. 이 플러그인은 기본 비 Ajax 내장 제품 필터 위젯보다 더 나은 UX와 더 많은 위젯 옵션을 제공합니다.

활성화되면 Ajax 지원 Enhanced Layered Navigation 플러그인은 상점/아카이브/카테고리 페이지에서 사용할 수 있는 " WooCommerce Ajax Layered Nav "라는 추가 위젯을 제공합니다.

이 고급 위젯의 가장 큰 장점은 속성 필터를 목록, 확인란, 드롭다운 또는 레이블 선택기/색상 견본 과 같이 프런트 엔드에 표시하는 방법을 결정할 수 있다는 것입니다.

WooCommerce Ajax Layered Nav 플러그인 위젯 설정 및 프런트 엔드 결과

유감스럽게도 안내해 드릴 데모가 없습니다. 위젯은 원하는 만큼 사용할 수 있지만 가격 필터, 등급 필터, 주식 필터 등은 없습니다. 이것은 속성(크기, 색상 등)만을 위한 것 입니다.

따라서 이것이 목표에 충분하지 않으면 이 플러그인은 완전하지 않습니다.

3. YITH의 WooCommerce Ajax 제품 필터 플러그인(무료 및 프리미엄)

YITH에 관해서는 모든 것을 위한 WooCommerce 플러그인이 있다는 것을 알고 있습니다. 말할 것도 없이 고급 Ajax 제품 필터 플러그인도 판매합니다.

좋은 소식은 – 이것은 무료 버전으로도 제공됩니다 (이전 섹션에서 설명한 WooCommerce 프리미엄 플러그인과 거의 동일한 기능을 수행함). 또한 플러그인 페이지에서 구매하기 전에 데모를 보고 제품을 테스트할 수 있습니다.

프리미엄 플러그인이 활성화되면 5개의 새 위젯이 표시됩니다.

  • Ajax 정렬 기준(이는 WooCommerce 정렬 옵션에 따라 제품을 정렬하지만 Ajax에서도 수행됩니다!)
  • Ajax 제품 필터 (속성/카테고리/태그/브랜드별로 정렬하고 드롭다운/체크박스/목록/견본/라벨로 표시)
  • Ajax 가격 필터 (필터링 가능한 목록에 가격 범위 생성)
  • Ajax Stock/on Sale Filter (판매 중이거나 재고가 있는 제품을 필터링하기 위한 위젯 추가)
  • Ajax 재설정 필터 (한 번의 클릭으로 필터 재설정)

이것은 백엔드입니다.

YITH WooCommerce Ajax 제품 필터 백엔드

이 필터 위젯이 활성화되면 다음은 쇼핑 페이지입니다.

YITH WooCommerce Ajax 제품 필터 플러그인 설치 후 쇼핑 페이지 사이드바

필터 조합은 무제한이며 여러 "Ajax 제품 필터" 위젯을 사용할 수 있습니다. 즉, 동일한 사이드바에서 속성, 태그, 카테고리, 가격 및/또는 브랜드별로 동시에 필터링할 수 있습니다 . 페이지를 새로 고치지 않고도 결과가 즉시 표시됩니다.

상상할 수 있듯이 YITH WooCommerce Ajax 제품 필터는 다른 모든 YITH 플러그인과 호환되므로 꽤 고급 작업을 수행할 수 있습니다.

또한 각 위젯을 "토글"하고 기본적으로 "닫힌" 상태로 만들 수 있습니다. 또한 각 위젯 내 에서 필터에서 제외해야 하는 속성/태그/카테고리를 선택/선택 해제 할 수 있습니다.

예, 이것은 매우 유연합니다. 그리고 그것은 작동합니다.

4. 패싯WP(프리미엄)

마지막으로 WooCommerce와도 호환되는 강력한 필터링 도구인 FacetWP는 개발자를 위한 매우 진보된 제품 입니다. 이를 최대한 활용하려면 약간의 기술 지식이 필요합니다. 후크, 단축 코드, 성능 중심 Ajax 코딩 및 통합과 함께 제공됩니다.

필터를 추가하려면 텍스트 위젯에 단축 코드를 추가하거나 PHP를 통해 테마 파일에 추가해야 합니다( 사이드바 외부에 필터 를 표시할 수도 있음).

FacetWP를 사용하면 다음과 같은 필터 표시와 같은 여러 "패싯"을 만들 수 있습니다.

  • 체크박스
  • 쓰러지 다
  • f선택
  • 라디오
  • 계층
  • 슬라이더
  • 검색
  • 자동 완성
  • 날짜 범위
  • 숫자 범위
  • 별점 매기기
  • 근접성

WooCommerce와 관련하여 각 패싯 또는 제품 필터는 다음 데이터 소스를 대상으로 할 수 있습니다.

  1. 가격
  2. 판매가
  3. 정가
  4. 평균 평점
  5. 재고현황(재고 있음 / 품절)
  6. 판매 중
  7. 제품 카테고리
  8. 제품 태그
  9. 제품 속성

보시다시피 WooCommerce 패싯을 만드는 것은 매우 간단합니다.

FacetWP: 제품 속성, 제품 범주 등과 같은 적절한 데이터 소스 선택 항목을 선택합니다.

FacetWP는 훌륭한 개발자 문서와 함께 제공되며 고급 프로젝트에 필수입니다. 반면에 FacetWP가 너무 많은 경우 YITH WooCommerce Ajax 제품 필터 플러그인을 선호합니다.

5. Crocoblock의 JetSmartFilters

Crocoblock의 JetSmartFilters는 AJAX 기반 필터 시스템과 WooCommerce 웹사이트를 단 한 줄의 코드도 작성하지 않고도 사용자 친화적으로 만드는 9개의 편리한 위젯이 있는 사용하기 쉬운 플러그인입니다.

  1. 등급 필터 – 등급별로 제품을 정렬합니다.
  2. 시각적 필터 – 다양한 색상이나 브랜드를 보유하고 있는 온라인 상점에 매우 효과적입니다.
  3. 검색 필터 – 단어나 구로 검색할 수 있으며 해당 결과를 빠르게 표시합니다.
  4. 라디오 필터 – 목록에서 하나의 제품이나 게시물을 선택할 수 있는 옵션을 제공합니다.
  5. 체크박스 필터 – 체크리스트에서 여러 옵션을 선택할 수 있습니다.
  6. 날짜 범위 – 추가된 날짜 또는 이벤트가 발생해야 하는 날짜를 기준으로 게시물이나 제품을 필터링하려는 경우 좋은 옵션입니다.
  7. 범위 필터 확인 – 확인란 목록 형태로 다양한 옵션을 만드는 데 도움이 됩니다.
  8. 범위 필터 – 슬라이더 를 사용하여 검색 범위를 설정할 수 있습니다.
  9. 필터 선택 – 드롭다운 목록 형식으로 옵션을 선택할 수 있습니다.

JetSmartFilters 플러그인 내부의 추가 위젯은 웹사이트 사용자가 페이지를 새로 고치지 않고도 관련 제품을 살펴보고, 현재 적용된 필터를 확인하고, 더 편리하도록 필요한 필터를 제거하는 데 도움이 됩니다.

JetSmartFilters는 Crocoblock에서 제작한 또 다른 애드온인 JetWooBuilder와 밀접하게 연결되어 있습니다. 이 플러그인은 다양한 제품 그리드에서 시작하여 리뷰 및 평가 양식에 이르기까지 제품을 선보일 수 있는 다양한 옵션을 제공하므로 전자상거래 웹사이트 제작자에게 꼭 필요한 도구입니다.