PWF 검토: SEO 친화적인 WooCommerce 제품 필터 만들기

WooCommerce 스토어에 제품이 많은 경우 제품 필터를 추가하면 쇼핑객이 가장 관련성이 높은 제품을 찾는 데 도움이 될 수 있습니다.

WooCommerce에는 가격 및 기타 세부 정보에 대한 몇 가지 기본 내장 필터 기능이 포함되어 있지만 전용 WooCommerce 제품 필터 플러그인을 사용하면 더 유용한 제품 필터를 추가 하고 더 나은 인터페이스(예: WooCommerce Ajax 제품 필터 설정)를 만들 수 있습니다.

PWF는 가격에서 등급, 분류, 속성 등에 이르기까지 모든 제품 세부 정보에 대한 필터를 생성할 수 있는 프리미엄 WooCommerce 제품 필터 플러그인입니다. 또한 Ajax 필터 결과 및 동적 SEO 메타데이터가 포함된 깨끗하고 SEO 친화적인 필터 URL( 관련 롱테일 쿼리에 대한 순위를 지정하는 데 도움이 됨 )과 같은 기타 유용한 기능이 포함되어 있습니다.

또한 플러그인은 주로 WooCommerce 제품 필터에 중점을 두지만 이를 사용하여 다른 게시물 유형에 대한 필터를 만들 수도 있습니다.

실습 PWF 검토에서 이 WooCommerce 제품 필터 플러그인의 기능에 대해 더 많이 공유하고 매장에서 구성하고 사용하는 것이 어떤 것인지 자세히 살펴보겠습니다.

PWF 검토: 플러그인은 무엇을 합니까?

일반적으로 PWF의 높은 수준의 이점은 방문자가 관련 WooCommerce 제품(또는 다른 유형의 콘텐츠)을 더 쉽게 찾는 데 사용할 수 있는 프런트엔드 필터를 만들 수 있다는 것입니다.

다음은 PWF로 만들 수 있는 필터 유형의 예입니다.

마찰을 제거하기 위해 플러그인을 사용하면 페이지를 다시 로드하지 않고 Ajax를 사용하여 필터를 적용할 수 있습니다( 이 접근 방식이 마음에 들지 않으면 Ajax 필터를 비활성화할 수도 있음 ).

Ajax로 필터를 적용하는 것 외에도 원하는 경우 Ajax 페이지 매김을 사용할 수도 있습니다. 전체적으로 페이지 매김을 처리하는 세 가지 옵션이 있습니다.

• Ajax 더 로드
• 무한 스크롤
• 표준 페이지 매김(클릭 가능한 페이지 번호)

"일반" 수직 필터 레이아웃 외에도 PWF를 사용하면 제품 목록 위에 표시되는 수평 레이아웃을 사용할 수 있습니다.

플러그인을 이해하는 데 도움이 되는 몇 가지 다른 기능 세부 정보를 살펴보겠습니다.

필터링할 수 있는 제품 데이터

가능한 한 가장 유용한 필터를 생성하기 위해 PWF는 다음 제품 데이터의 일부 또는 전부를 기준으로 필터링할 수 있습니다.

• 제품 속성
• 제품 카테고리
• 제품 태그
• 모든 분류(맞춤 분류 포함)
• 재고현황
• 작가
• 사용자 정의 필드(메타) – 여기에는 제품 추가 기능 필드와 일반적으로 모든 사용자 정의 필드가 포함됩니다.
• 판매 상태
• 주요 상태
• 평가
• 제품 가시성
• 제품 배송 유형
• 제품 유형(예: 단순 vs 가변)

프런트엔드 필터 필드 유형

모든 제품 데이터를 필터링하기 위해 PWF는 선택할 수 있는 다양한 필드 유형을 제공합니다.

• 확인란 목록
• 라디오 목록
• 드롭 다운 목록
• 색상 목록
• 상자 목록
• 텍스트 목록
• 날짜
• 가격 슬라이더
• 범위 슬라이더
• 평가
• 단추
• 카테고리
• 재고현황

사용자가 키워드로 검색할 수 있는 일반 "검색" 필드를 추가할 수도 있습니다.

SEO 친화적인 필터 URL

많은 제품 필터 플러그인은 URL에 쿼리 매개변수를 추가하여 작동합니다. 이는 사용자에게는 문제가 없지만 Google 및 기타 검색 엔진에서 필터 페이지의 순위를 매길 수 없음을 의미합니다.

그러나 일부 틈새 시장에서는 프로그래밍 방식으로 생성된 필터 목록 페이지가 롱테일 키워드의 순위를 매기는 정말 좋은 방법이 될 수 있습니다.

예를 들어, 전자상거래 상점은 아니지만 Nomad List는 이 SEO 친화적인 필터 URL 접근 방식을 사용하여 거주할 도시를 찾는 것을 기반으로 많은 롱테일 쿼리의 순위를 매깁니다. 다음은 필터에서 프로그래밍 방식으로 구성된 SEO 친화적인 URL의 예입니다. :

 https://nomadlist.com/places-with-a-tropical-climate-in-asia-and-clean-air-all-year-and-cheap-hotels

PWF를 사용하면 동일한 종류의 전략을 구현할 수 있습니다.

깨끗한 URL을 사용하는 것 외에도 플러그인은 SEO 제목, 메타 설명, 필터 페이지 제목 H1, 이동 경로 및 짧은 설명( 각 필터 페이지에 고유한 콘텐츠를 추가하는 데 유용함 )에 대한 템플릿을 설정할 수 있는 SEO 도구도 제공합니다. .

XML 사이트맵에 필터 페이지를 포함하는 기능도 있습니다.

단순한 WooCommerce 제품 이상에서 작동합니다(모든 게시물 유형 필터링).

플러그인은 WooCommerce 제품 필터 기능을 설정하는 데 중점을 두지만( PWF 검토의 주요 초점이기도 함 ) PWF는 WooCommerce 제품 이상에서 작동한다는 점을 지적할 가치가 있습니다.

또한 이를 사용하여 사이트에서 만든 블로그 게시물 또는 사용자 정의 게시물 유형을 포함하여 모든 게시물 유형에 대한 필터를 만들 수 있습니다.

내장 필터 분석

사람들이 필터를 사용하는 방법을 이해하는 데 도움이 되도록 PWF에는 사람들이 사용하는 필터, 사람들이 필터를 사용하는 빈도 등과 같은 데이터를 볼 수 있는 내장 분석 도구가 포함되어 있습니다.

기타 주목할만한 기능

위에서 설명한 것 외에도 PWF가 제공하는 몇 가지 주목할만한 기능이 있습니다.

• 조건부 논리 – 조건부 논리를 기반으로 특정 필터를 숨깁니다.
• 스타일 옵션 – 필터의 스타일과 레이아웃을 제어할 수 있는 많은 옵션이 있습니다.
• 정렬 옵션 – 필터링된 제품에 대한 기본 정렬 순서 및 옵션을 선택합니다.
• 사용자 정의 CSS – 사용자 정의 CSS를 보다 쉽게 ​​사용할 수 있도록 CSS 클래스 및 ID를 사용자 정의합니다.
• 페이지 빌더 지원 – 플러그인은 Elementor, Divi, Beaver Builder, Oxygen 등을 포함한 가장 인기 있는 페이지 빌더 플러그인과 통합됩니다.

PWF로 WooCommerce 제품 필터를 추가하는 방법

이제 플러그인의 기능에 대해 더 많이 알게 되었으므로 실제로 PWF를 사용하여 상점에서 제품 필터를 설정하는 것이 어떤 것인지 자세히 살펴보겠습니다.

참고 – 내 사이트에서 프리미엄 플러그인을 사용하고 있습니다. 기본 기능과 인터페이스는 동일하지만 아래에 표시되는 일부 기능을 사용하려면 프리미엄 버전이 필요합니다. 나중에 가격에 대해 자세히 알아보십시오.

플러그인을 설치하고 활성화하면 WordPress 대시보드에 새로운 필터 탭이 표시되어 플러그인의 모든 기능에 액세스할 수 있습니다.

필터 그룹을 추가하는 인터페이스 외에도 세 가지 다른 영역이 있습니다.

• 설정 – 플러그인의 일반 설정을 제어합니다.
• SEO 규칙 – 필터 페이지의 SEO를 개선할 수 있습니다.
• 분석 – 필터 사용에 대한 분석을 볼 수 있습니다.

새 필터 그룹을 추가해 보겠습니다.

1. 새 필터 생성 및 설정 편집

첫 번째 필터 그룹을 추가하려면 Filters → Add New 로 이동할 수 있습니다.

이 인터페이스에는 두 개의 열이 표시됩니다.

• 항목 – 여기에서 필터 옵션을 추가합니다.
• 필터 설정 - 여기에서 필터링할 콘텐츠 유형, Ajax 사용 여부, 페이지 매김 처리 방법 등과 같은 필터에 대한 일반 설정을 구성합니다.

시작하려면 필터 설정 옵션을 살펴보고 싶을 것입니다.

일반 탭(위 그림)은 Ajax, 페이지 매김, 예쁜 URL 등을 제어할 수 있기 때문에 중요합니다.

Database Query 탭은 필터링할 콘텐츠를 선택할 수 있기 때문에 매우 중요합니다.

기본값은 WooCommerce 제품을 필터링하는 것입니다.

그러나 위에서 언급했듯이 사용자 지정 게시물 유형을 포함하여 사이트의 모든 게시물 유형에 대한 필터를 추가할 수도 있습니다. 이 탭에서 게시물 유형 드롭다운을 사용하여 해당 동작을 제어할 수 있습니다.

또한 쿼리 유형 드롭다운을 사용하여 기본 상점 아카이브 대신 제품 범주 페이지에 이러한 필터를 추가하는 등 다양한 유형의 쿼리를 설정할 수 있습니다.

마지막으로 페이지 드롭다운을 사용하면 기본 상점 페이지 또는 특정 아카이브 페이지와 같이 이 필터를 사용할 사이트의 특정 페이지를 선택할 수 있습니다.

다른 탭에는 주로 필터 모양과 관련된 몇 가지 유용한 설정도 포함되어 있습니다. 그러나 일반 및 데이터베이스 쿼리 탭은 필터 그룹의 동작과 관련하여 대부분의 고기를 보유합니다.

2. 필터 항목 추가

일반 필터 설정을 구성했으면 필터 옵션 추가를 시작할 수 있습니다. 이렇게 하려면 항목 목록 아래에서 항목 추가 버튼을 클릭합니다.

이렇게 하면 추가할 수 있는 필터 필드 및 사전 설정 목록이 표시됩니다. 다중 열 필터 레이아웃을 만들 수 있는 열 레이아웃 옵션도 있습니다.

필드 유형을 선택하면 옵션이 확장되어 해당 필드를 사용자 지정할 수 있습니다. 가장 중요한 것은 이 필터의 옵션에 대한 소스를 선택할 수 있다는 것입니다.

예를 들어 제품 범주에서 선택하기 위해 확인란 목록을 추가한다고 가정해 보겠습니다. 옵션 소스를 분류법 과 동일하게 설정한 다음 제품 범주를 특정 분류법으로 선택합니다. 원하는 경우 더 구체적으로 이동할 수도 있습니다.

또 다른 유용한 옵션은 표시 규칙 입니다. 이를 통해 다른 조건(AKA 조건 논리)을 기반으로 필터를 숨길 수 있습니다. 다음 조건 중 일부 또는 모두가 참인 경우 필터를 숨길 수 있습니다.

• 기인하다
• 범주
• 꼬리표
• 기타 분류
• 페이지

마지막으로 URL 키는 예쁜 URL을 설정하는 데에도 중요합니다. 이를 통해 SEO에 적합한 URL의 URL 구조를 제어할 수 있기 때문입니다.

각 필터 항목에는 해당 필터에만 사용자 정의 CSS 클래스를 추가하는 것을 포함하여 몇 가지 표시 옵션이 포함된 시각적 설정 탭도 있습니다.

실제 옵션은 추가하는 필터 필드 유형에 따라 다릅니다.

다음은 색상 목록 필터에 대한 또 다른 예입니다. "색상" 속성을 선택한 다음 실제 색상 견본을 각 속성에 연결할 수 있습니다.

미리 설정된 필터 중 일부는 매우 간단합니다. 예를 들어 등급 필터에는 몇 가지 옵션만 있습니다.

모든 제품 데이터 또는 제품 제목만 검색할 수 있는 검색 필터도 있습니다.

모든 단일 필드 유형을 표시할 수는 없습니다. 그러나 일반적으로 모든 것에 대해 많은 양의 사용자 정의 옵션을 얻을 수 있습니다.

3. 프런트엔드에 필터 추가

필터 그룹을 설정한 후 마지막 단계는 매장 프런트엔드에서 해당 필터를 추가할 위치를 제어하는 ​​것입니다.

플러그인은 두 가지 옵션을 제공합니다.

1. 단축 코드 – 블록 편집기의 단축 코드 블록을 포함하여 사이트의 아무 곳에나 단축 코드를 추가할 수 있습니다. do_shortcode 함수를 사용하여 테마의 템플릿 파일에 직접 포함할 수도 있습니다.
2. 위젯 – 모든 위젯화된 영역에 위젯을 추가할 수 있습니다(이는 블록 위젯과 클래식 위젯 플러그인 모두에서 작동합니다).

단축 코드를 찾으려면 대시보드의 기본 필터 영역으로 이동하십시오.

위젯을 사용하려면 위젯 인터페이스를 열고 필요에 따라 PWF 위젯을 사용하십시오.

필터를 표시하는 위젯 외에도 활성 필터 및 SEO 짧은 설명에 대한 위젯도 제공됩니다.

위젯을 추가한 후 예제 스토어에 대한 필터는 다음과 같습니다.

4. SEO 기능 설정

SEO 친화적인 URL을 사용하는 경우 PWF의 기능을 활용하여 중요한 SEO 세부 정보에 대한 동적 템플릿을 설정하고 싶을 것입니다.

이를 통해 사용자가 선택한 필터를 기반으로 중요한 콘텐츠를 자동 생성할 수 있습니다. 예를 들어 사용자가 "T-셔츠 제품 범주", "파란색 속성" 및 "면 소재 속성"에 대한 필터를 선택하면 "파란색 면 티셔츠: 지금 구매하세요"와 같은 제목을 자동으로 생성할 수 있습니다.

이를 설정하려면 필터 → SEO 규칙 으로 이동하여 SEO 규칙 추가를 시작하십시오.

선택한 SEO URL을 기반으로 각 SEO 규칙을 통해 다음 세부 정보를 동적으로 수정할 수 있습니다.

• 메타 제목
• 메타 설명
• 페이지 제목 H1
• 빵 부스러기
• 간단한 설명

점 세 개 아이콘을 클릭하면 사용 가능한 변수 목록을 확장하여 사용자가 선택한 필터에 따라 동적으로 정보를 삽입할 수 있습니다.

예를 들어 "Best %color% %category%"는 사용자가 "Blue" 색상 필터와 "T-Shirts" 카테고리를 선택하면 "Best Blue T-Shirts"가 됩니다.

전체 범주에 대한 일반 규칙을 생성하거나 특정 속성 및 범주 조합(또는 기타 세부 사항)에 대한 규칙을 파고들어 생성할 수 있습니다.

규칙을 설정하는 데 시간이 다소 걸릴 수 있지만 이는 SEO를 위한 정말 강력한 기능이며 많은 롱테일 쿼리에 대해 자동으로 순위를 매기도록 설정할 수 있습니다.

PWF 가격 책정

PWF는 WordPress.org의 무료 버전과 Envato의 CodeCanyon 마켓플레이스의 프리미엄 버전으로 제공됩니다.

무료 버전에는 Ajax 필터를 비롯한 대부분의 핵심 기능이 포함되어 있습니다.

그러나 다음 개선 사항에 액세스하려면 프리미엄 버전으로 업그레이드해야 합니다( 이는 일부 목록일 뿐이며 더 많은 프리미엄 기능이 있습니다 ).

• 깨끗하고 SEO 친화적인 제품 URL . 예를 들어 프리미엄 버전은 yoursite/product-category-mobile/color-black/ 과 같은 URL을 생성하는 반면 무료 버전은 yoursite/?product-category=mobile&color=black 과 같은 쿼리 매개변수를 사용하여 URL을 생성합니다.
• SEO 도구. 선택한 필터를 기반으로 SEO 정보를 동적으로 조정합니다.
• 더 많은 레이아웃 옵션 . 가로 또는 세로 레이아웃을 사용합니다.
• 더 많은 필터 옵션 . 무료 버전은 핵심 제품 세부 정보를 지원하지만 프리미엄 버전은 더 많은 옵션을 추가합니다.
• 더 많은 필터 필드 유형. 프리미엄 버전은 상자 목록, 범위 슬라이더, 날짜 등과 같은 새로운 필터 필드 유형을 추가합니다.
• 검색 창. 새로운 필터 필드 유형 외에도 프리미엄 버전에서는 사람들이 키워드로 검색할 수 있습니다.
• 해석학. 프리미엄 버전은 내장된 분석 기능을 추가하여 사람들이 필터를 어떻게 사용하고 있는지, 어떤 필터가 가장 많은 관심을 불러일으키는지 확인할 수 있습니다.

고맙게도 프리미엄 버전은 평생 업데이트 및 6개월 지원( 표준 Envato 라이센스 )이 포함된 단일 사이트에서 사용하는 데 단 39달러로 상당히 저렴합니다.

평생 업데이트 혜택은 라이선스를 계속 갱신할 필요가 없다는 것을 의미하므로 장기적인 가치 측면에서 특히 중요합니다.

PWF에 대한 최종 생각

전반적으로 PWF는 사이트의 다른 게시물 유형뿐만 아니라 WooCommerce 제품에 대한 필터를 설정할 수 있는 매우 유연한 방법을 제공합니다.

필터 자체와 관련하여 필터링할 데이터와 프런트엔드 입력 필드를 사용할 수 있는 다양한 옵션이 제공됩니다.

하지만 제가 가장 좋아하는 기능은 SEO 친화적인 URL과 롱테일 쿼리를 위해 해당 URL의 순위를 매기는 데 필요한 콘텐츠를 동적으로 생성하는 SEO 도구입니다.

플러그인을 테스트하려면 WordPress.org에서 무료 버전을 사용해 볼 수 있습니다. 하지만 가장 좋은 기능은 프리미엄 버전에 있다고 생각하므로 가능하면 업그레이드를 권장합니다. 평생 업데이트를 받을 수 있기 때문에 39달러의 가격은 장기적으로 상당히 저렴합니다.

아래 버튼을 사용하여 시작할 수 있습니다…