코딩 없이 WordPress에서 WooCommerce 카테고리 페이지를 사용자 정의하는 방법

wooCommerce 카테고리 페이지를 사용자 정의하는 방법

Elementor에서 WooCommerce 제품 카테고리 페이지를 편집해야 할지 고민 중이신가요?

글쎄요, 그렇다면 그렇게 하라고 강력히 권하고 싶습니다. WooCommerce 아카이브 페이지를 사용자 정의하고 최적화하면 매출을 높일 수 있습니다.

하지만 문제는 WordPress에서 WooCommerce 제품 카테고리 페이지를 사용자 정의하는 방법입니다.

이 블로그에 표시된 프로세스를 따르면 WooCommerce 카테고리 페이지를 사용자 정의하기 위해 코딩을 할 필요가 없습니다.

이 기사에서 배울 내용은 다음과 같습니다. 코딩 없이 WooCommerce 카테고리 페이지를 사용자 정의하는 방법. 게다가 당신도 알게 된다. 각 카테고리에 대해 개별적으로 다양한 사용자 정의 아카이브 템플릿을 만드는 방법. 또한 아카이브 페이지를 최적화하여 전환율을 높일 수 있는 방법도 있습니다.

그러니 계속 읽어보세요…

WooCommerce 카테고리 페이지를 사용자 정의하는 이유

에 따르면 내장, WooCommerce는 상위 100만개 웹사이트 중 29%% 이상에서 사용됩니다. 이러한 인기는 전자 상거래 도구로서 WooCommerce의 신뢰성을 나타내는 동시에 수천 개의 웹 사이트가 WooCommerce가 제공하는 것과 동일한 기본 레이아웃을 사용하고 있음을 반영합니다.

우커머스
상위 100만개 사이트 중 WooCommerce 사용량

그리고 기본값을 사용한다고 생각한다면 우커머스 페이지는 귀하의 웹사이트가 군중 속에서 눈에 띌 가능성을 최소화할 뿐입니다. 그렇다면 귀하의 생각은 틀렸습니다. 고려해야 할 다른 이유도 있습니다. 이러한 다른 이유에 대해 알아보려면 WooCommerce 기본 카테고리 페이지를 살펴보겠습니다. WordPress Twenty Twenty-Two 테마 활성화되었습니다.

기본 WooCommerce 카테고리 페이지
WooCommerce 기본 카테고리 페이지

보시다시피 WooCommerce 기본 카테고리 페이지는 그다지 매력적이지 않은 기본 모양을 가지고 있습니다. 게다가, 그것은 고급 옵션이 없습니다 이름을 사용하여 제품을 검색하고 다양한 속성을 기반으로 제품을 필터링하는 등의 모든 기능은 온라인 상점에서 좋은 사용자 경험을 보장하는 데 중요합니다.

게다가 눈을 편안하게 하고 탐색하기 쉬운 멋진 사이트를 좋아하지 않는 사람이 어디 있겠습니까? 

글쎄, 대답은 모두입니다! 코딩 없이 WooCommerce 제품 카테고리 페이지 템플릿을 사용자 정의하는 방법을 배우는 다음 섹션으로 이동하겠습니다.

ShopEngine을 사용하여 WooCommerce 사용자 정의

WooCommerce 제품 카테고리 페이지를 6단계로 사용자 정의하는 방법

이것은 코딩 없이 WordPress에서 WooCommerce 카테고리 페이지를 사용자 정의하는 방법에 대한 따라하기 쉬운 튜토리얼입니다. 이 프로세스를 따르면 WooCommerce 아카이브 페이지의 레이아웃과 디자인을 즉시 선택할 수 있습니다. 자, 시작해 봅시다…

#1단계: Elementor 페이지 빌더 및 ShopEngine 설치

이 블로그에 표시된 프로세스를 사용하여 Elementor에서 WooCommerce의 제품 카테고리 페이지를 편집하려면 두 개의 WordPress 플러그인이 필요합니다.

ShopEngine은 드래그 앤 드롭 페이지 빌더인 Elementor를 위한 Ultimate WooCommerce 빌더입니다. WooCommerce 사용자 정의를 쉽게 만들어주는 수많은 위젯과 모듈이 포함된 Elementor용 추가 기능입니다.

메모: 할 수 있다 쿠폰을 사용하세요 커뮤니티20 ShopEngine Pro에서 20%를 끄려면. ShopEngine은 이 페이지 빌더에 의존하므로 Elementor를 먼저 설치하십시오. ShopEngine Pro를 활성화하는 데 도움이 필요하면 다음을 확인하세요. 선적 서류 비치.

#2단계: 사용자 정의 WooCommerce 카테고리 페이지 템플릿 만들기

필요한 모든 플러그인을 설치하고 활성화한 후에는 카테고리 템플릿을 생성해야 합니다. WooCommerce 사용자 정의 카테고리 페이지 템플릿을 생성하려면,

  • 로 이동: ShopEngine ⇒ 빌더 템플릿
  • 새로 추가를 클릭하세요
  • 템플릿 이름 제공
  • 드롭다운에서 유형을 아카이브로 선택하세요.
  • 해당 카테고리 필드는 그대로 둡니다. 모든 카테고리에 대한 공통 템플릿을 만드는 것입니다
  • 기본값 설정 옵션을 켜세요 기존 카테고리/아카이브 페이지 템플릿을 재정의하려면
  • 샘플 디자인에서 빈 옵션을 선택하세요. 
  • Elementor로 편집을 클릭하세요. 템플릿 작성을 시작하려면
WooCommerce 사용자 정의 카테고리 페이지 템플릿 만들기
빈 WooCommerce 카테고리 페이지 템플릿 만들기

메모: 저는 이 블로그에서 빈 옵션을 선택했습니다. 처음부터 사용자 정의 카테고리 페이지를 만듭니다. ShopEngine은 다양한 기능을 제공합니다. 사전 구축된 WooCommerce 카테고리 페이지 템플릿. 네가 원한다면 사용하다 사전 제작된 템플릿에서 원하는 템플릿을 선택한 다음 5단계로 이동하세요. (처음부터 새로 구축하려면 3단계와 4단계가 필수입니다.)

#3단계: WooCommerce 카테고리 페이지의 레이아웃/구조 선택

편집 모드에 들어가면 WooCommerce 카테고리 페이지의 구조를 선택해야 합니다.

사용자 정의 아카이브 페이지를 구축하기 위해 세 가지 다른 섹션에 대해 세 가지 다른 유형의 레이아웃을 사용할 것입니다. 블로그에 표시된 것과 동일하게 수행하거나 원하는 레이아웃을 선택할 수 있습니다.

구조를 선택하려면, "+" 아이콘을 클릭하세요을 클릭한 다음 원하는 레이아웃에 마우스를 가져다 대고 클릭하세요.

사용자 정의 카테고리 페이지의 구조 선택 WooCommerce 제품 카테고리 페이지 튜토리얼을 사용자 정의하는 방법
구조를 선택하세요

메모: 동일한 과정을 반복하여 다른 레이아웃을 선택할 수 있습니다.

관련된: WooCommerce 제품 페이지를 사용자 정의하는 방법

#4 단계: ShopEngine 위젯을 드래그 앤 드롭하고 설정을 사용자 정의하세요.

ShopEngine은 맞춤형 WooCommerce 아카이브 페이지를 구축하기 위한 8개 이상의 전용 위젯을 제공합니다. 이러한 카테고리 페이지 위젯은 다음과 같습니다.

  • 아카이브 설명
  • 아카이브 제품
  • 아카이브 제목
  • 아카이브 결과 수
  • 아카이브 보기 모드
  • 필터로 정렬
  • 페이지당 제품 필터
  • 상품 목록
  • 제품 필터

나는 이것들 중 일부를 사용할 것입니다. Elementor WooCommerce 제품 카테고리 페이지를 편집하는 데 이들 모두를 사용하도록 선택할 수 있습니다. 하지만 그 전에 모든 위젯이 활성화되어 있고 사용할 수 있는지 확인해야 합니다. 

다음에서 위젯을 활성화/활성화할 수 있습니다. ShopEngine ⇒ 위젯. 여기 위젯 다 켜줘 또는 당신이 사용할 것 상태를 업데이트하려면 "변경 사항 저장" 버튼을 클릭하세요..

모든 ShopEngine 카테고리 페이지 위젯을 활성화합니다.
모든 ShopEngine 카테고리 페이지 위젯을 활성화합니다.

나는 하나를 선택할 것이다 1열 레이아웃 그리고 고급 검색 및 보관 결과 개수 위젯을 끌어다 놓습니다.

WooCommerce 카테고리 페이지에 대한 드래그 앤 드롭 검색 및 결과 개수 위젯 WooCommerce 카테고리 페이지를 사용자 정의하는 방법
고급 검색 및 보관 결과 개수 위젯 드래그 앤 드롭

위젯을 선택하고 관련 설정을 맞춤 설정할 수 있습니다. 예를 들어, 왼쪽 패널에서 고급 검색 위젯을 클릭하면 다음과 같은 옵션이 표시됩니다. 제품 열, 검색 결과에 카테고리 표시, 카테고리 드롭다운 표시, 모든 카테고리에 대한 텍스트, 검색 아이콘 등

WooCommerce 고급 검색 위젯 사용자 정의
WooCommerce 고급 검색 위젯 사용자 정의

이제 다음 섹션에서는 3단계에서 설명한 단계를 사용하여 두 열의 새 레이아웃을 삽입하겠습니다. 그런 다음 제품 필터 및 제품 보관 위젯을 끌어서 놓습니다.

드래드 앤 드롭 제품 필터 및 제품 보관 위젯 WooCommerce 보관 페이지 사용자 정의
새로운 Elementor 구조를 선택하세요

메모: 그만큼 제품 필터 위젯은 ShopEngine Pro에서만 사용할 수 있습니다.. 따라서 ShopEngine Pro를 설치하고 활성화했는지 확인하십시오.

가격 필터, 등급 필터, 색상 필터, 카테고리 필터 등과 같은 필터 관련 옵션을 사용자 정의할 수 있습니다. 또한 필터 보기 모드, 컨테이너 토글 버튼 활성화, 열(행당) 등과 같은 레이아웃 관련 옵션을 사용자 정의할 수 있습니다. . 원하는 경우 사용자 정의 속성 목록을 추가할 수도 있습니다.

WooCommerce 카테고리 페이지를 사용자 정의하는 방법 Proudct 필터 위젯 사용자 정의
Proudct 필터 위젯 사용자 정의

WooCommerce 레이아웃 옵션에서 보관 제품 레이아웃 설정을 변경할 수 있습니다. 레이아웃 옵션을 변경하는 방법에 대한 자세한 내용은 여기를 확인하세요. 문서. 또한, 플래시 세일 배지, 카테고리 표시, 설명 등급 표시 등과 같은 콘텐츠 설정을 개인화할 수 있습니다. 또한 장바구니에 추가, 위시리스트에 추가, 빠른 보기 등과 같은 CTA 버튼의 사용자 정의 페이지 매김 아이콘과 사용자 정의 순서를 선택할 수도 있습니다. .

아카이브 제품 위젯 사용자 정의

관련된: WooCommerce 내 계정 페이지를 사용자 정의하는 방법

#5단계: WooCommerce 보관 페이지 스타일 설정 사용자 지정

사용자 정의된 레이아웃과 개인화된 위젯으로 설정한 후에는 이러한 위젯의 스타일 설정을 변경하여 위젯의 모양을 변경할 차례입니다. 스타일 설정을 변경하려면 위젯을 클릭하고 패널에서 스타일 탭으로 이동하여 모든 스타일 설정에 액세스해야 합니다. 이 튜토리얼에서 사용된 위젯의 스타일 옵션을 살펴보겠습니다.

고급 검색:  검색 양식, 검색 아이콘/텍스트 스타일, 카테고리 스타일, 제품 스타일, 추가 제품 버튼 및 글로벌 글꼴의 다양한 옵션을 사용자 정의할 수 있습니다. 

WooCommerce 카테고리 페이지를 사용자 정의하는 방법 고급 검색 위젯의 스타일 설정 변경
고급 검색 위젯의 스타일 설정 변경

아카이브 결과 수: 정렬, 색상 및 타이포그래피 옵션을 사용자 정의할 수 있습니다.

elementsKit의 결과 개수 위젯
Archive Result Count 위젯의 스타일 설정 변경

제품 필터: 일반 스타일, 가격 필터/범위 슬라이더, 등급 필터, 카테고리 필터 등 다양한 카테고리에서 제품 필터 섹션의 스타일을 지정하는 옵션을 찾을 수 있습니다.

WordPress에서 WooCommerce 제품 카테고리 페이지를 편집하기 위한 제품 필터 스타일 설정
제품 필터 위젯 스타일 옵션 사용자 정의

아카이브 제품: 제품 컨테이너, 제품 이미지, 제품 카테고리, 제품 제목, 제품 가격, 오프 태그, 장바구니에 추가 버튼, 등급, 플래시 세일, 페이지 매김과 같은 섹션에 제공되는 옵션을 사용자 정의하여 아카이브 제품 스타일 설정을 개인화할 수 있습니다.

Elementor WooCommerce 카테고리 페이지를 편집하려면 제품 스타일 설정을 보관하세요.
제품 보관 위젯 스타일 사용자 정의

관련된: WooCommerce 장바구니 페이지를 사용자 정의하는 방법

#6단계: WooCommerce 사용자 정의 카테고리 페이지 템플릿 업데이트 및 미리보기

스타일 사용자 정의를 마친 후 업데이트 버튼을 클릭하여 저장하세요. 이제 미리보기 버튼을 클릭하여 미리보기를 보거나 카테고리 페이지를 수동으로 방문하면 아래 미리보기와 같이 새 템플릿이 활성화된 것을 확인할 수 있습니다.

카테고리 페이지 미리보기 맞춤설정
ShopEngine을 사용한 사용자 정의 WooCommerce 카테고리 페이지

이제 WooCommerce 스토어를 위한 맞춤형 카테고리 페이지를 만드는 과정이었습니다. 하지만 매장의 각 카테고리마다 다른 디자인을 만드는 것은 어떻습니까? 음, ShopEngine으로도 그렇게 할 수 있습니다. 자세한 내용을 알아보려면 다음 섹션으로 이동하세요.

ShopEngine을 사용하여 WooCommerce 사용자 정의

각 카테고리에 대해 개별적으로 사용자 정의 WooCommerce 아카이브 페이지를 구축하는 방법은 무엇입니까?

WooCommerce 매장의 각 카테고리 또는 특정 카테고리에 대해 완전히 다른 디자인을 구축할 수 있습니다. 이를 위한 프로세스는 다음과 거의 동일합니다. 위에 표시된. 하지만 2 단계, 카테고리 페이지 템플릿 만들기너 해당 카테고리 필드를 비워둘 수 없습니다.

당신은 해당 카테고리 필드에서 카테고리를 선택하세요. 작성 중인 디자인 템플릿을 적용하려는 대상입니다. 예를 들어 음악 카테고리에만 적용할 수 있는 디자인을 생성하려면 적용 가능한 카테고리 필드에서 음악을 선택하세요. 

ShopEngine을 사용하여 WooCommerce의 각 카테고리에 대해 다른 아카이브 페이지를 만듭니다.

나머지 단계는 다음에 표시된 일반 카테고리 템플릿 디자인을 구축하는 것과 동일합니다. 위의 섹션.

메모:  특정 카테고리에 대한 아카이브 템플릿을 생성하면 해당 카테고리 페이지에만 적용되고 나머지 카테고리 페이지에는 적용되지 않습니다..
나머지 카테고리에 대해서는 모든 카테고리에 대해 "적용 가능한 카테고리" 필드가 비어 있거나 각 카테고리에 대해 다른 카테고리가 있는 다른 카테고리 템플릿을 만들어야 합니다. 그렇지 않으면 나머지 카테고리에는 기본 WooCommerce 아카이브 템플릿이나 활성화된 테마가 제공하는 템플릿이 있습니다.

최고의 WooCommerce 빌더인 ShopEngine을 사용하는 다양한 WooCommerce 아카이브 페이지 템플릿

다음은 ShopEngine으로 구축된 다양한 디자인의 다양한 WooCommerce 카테고리 페이지 미리보기입니다.

ShopEngine을 사용하여 각 카테고리에 대한 다양한 사용자 정의 WooCommerce 카테고리 페이지 미리보기

메모: WooCommerce 사이트의 다양한 카테고리에 대해 다양한 템플릿/디자인을 생성하는 옵션은 ShopEngine Pro 버전에서만 사용할 수 있습니다.

보너스: WooCommerce 카테고리 페이지를 최적화하여 전환율을 높이는 5가지 방법 

다음은 WooCommerce 아카이브 페이지를 최적화하기 위해 따를 수 있는 몇 가지 유용한 팁입니다. 전환율 향상:

제품 필터 옵션 제공

전환율을 높이려면 제품 필터를 추가하세요.
WooCommerce 카테고리 페이지의 제품 필터

기본적으로 카테고리 페이지에는 해당 카테고리의 모든 제품이 표시됩니다. 그러나 일반적으로 사람들은 특정 색상이나 크기 또는 기타 특성을 지닌 제품을 찾고 있습니다.

따라서 선호하는 속성에 따라 카테고리의 제품 수를 필터링하고 범위를 좁힐 수 있는 옵션을 제공해야 합니다. 이렇게 하면 사람들이 자신의 제품을 쉽게 찾을 수 있으며 이는 귀하에게 도움이 될 것입니다. 매출을 증대시키세요.

또한 확인 WooCommerce 웹사이트에 통화 전환기를 추가하는 5단계 방법

제품 비교 옵션 추가

제품 비교를 추가하고 WordPress에서 WooCommerce 카테고리 페이지를 사용자 정의하는 방법을 알아보세요.
WooCommerce의 제품 비교 옵션

추가 제품 비교 WooCommerce에 대한 옵션은 소비자가 유사한 종류의 제품을 비교하는 데 도움이 됩니다. 특히 휴대폰, 시계 등과 같은 디지털 제품을 제공하는 경우 이 옵션이 필요합니다.

제품 비교 옵션은 고객이 더 빠르게 결정을 내리는 데 도움이 됩니다. 그리고 이는 더 높은 판매 목표를 빠르게 달성하는 데 도움이 될 것입니다.

위시리스트 버튼

WooCommerce 카테고리 페이지를 사용자 정의하기 위한 wooCommerce 아카이브 페이지 위시리스트 사용자 정의
카테고리 페이지의 위시리스트 버튼

위시리스트 나중에 구매할 수 있도록 장바구니에 제품을 추가할 수 있는 옵션을 제공합니다. 어떤 사람들은 위시리스트가 전환에 있어서 그다지 효과적이지 않다고 생각합니다. 하지만 솔직히 효과는 매우 좋습니다.

사람들은 일반적으로 제품이 정말 마음에 들 때 위시리스트에 제품을 추가하지만 어떤 이유로 바로 구매할 수 없기 때문입니다. 하지만 그렇다고 해서 그 사람이 나중에 그 제품을 사지 않을 것이라는 뜻은 아닙니다.

대부분의 경우 사람들은 위시리스트에 추가한 제품을 구매하는 경향이 있습니다. 따라서 WooCommerce 카테고리 페이지에 위시리스트 옵션을 추가하세요.

빠른 보기 옵션

WooCommerce 사용자 정의 카테고리 페이지 템플릿을 사용하여 카테고리 페이지 전환율을 높이는 빠른 보기 추가
WooCommerce 아카이브 페이지의 빠른 보기 옵션

추가 퀵뷰 버튼은 사람들이 제품에 대해 알기 위해 별도의 페이지를 방문할 필요가 없기 때문에 훌륭한 사용자 경험을 보장합니다. 이 빠른 보기 옵션을 사용하면 고객은 한 번의 클릭으로 카테고리 페이지에 머물면서 제품에 대한 세부 정보를 알 수 있습니다.

사람들이 제품 페이지를 보기 위해 이동해야 하는 경우 제품이 마음에 들지 않을 경우 제품을 구매하지 않고 사이트를 떠날 수 있습니다. 그러나 고객이 같은 페이지에 머무르면서 여러 제품을 확인할 수 있도록 빠른 보기 옵션을 제공하면 쇼핑 경험이 향상됩니다. 결과적으로 매장 매출 증대에 도움이 될 것입니다.

페이지 내 SEO 최적화

페이지 SEO

카테고리 페이지는 웹사이트의 페이지 계층 구조를 나타내는 지표입니다. 그래서, 카테고리 페이지 최적화 검색엔진의 경우 결코 무시해서는 안 됩니다. 왜냐하면 홈과 제품 페이지의 순위를 원하지만 순위가 매겨지면 카테고리 페이지로 인해 많은 트래픽이 발생할 수도 있기 때문입니다.

귀하의 웹사이트에 더 많은 트래픽이 발생할수록 더 많은 전환을 얻을 가능성이 높아집니다. 따라서 적절한 SEO 메타데이터를 추가하고, 내부 및 외부 링크를 최적화하고, URL을 최적화하는 등의 작업을 수행해야 합니다. 다음과 같은 SEO 플러그인의 도움을 받을 수 있습니다. 순위수학, 요스트 SEO 등.

모든 요점이 유효하다고 생각하지만 전환율을 높이기 위해 이러한 옵션을 내 사이트에 추가하려면 여러 플러그인이 필요합니까?

글쎄, 걱정할 것이 없습니다. ShopEngine은 풍부한 기능을 갖춘 멋진 WooCommerce 커스터마이저라는 점 외에도 WooCommerce 위젯, 그것은 또한 제공합니다 13개 이상의 모듈 위시리스트, 빠른 결제, 제품 비교 등

또한 이 플러그인을 사용하면 전체 WooCommerce 매장을 맞춤 설정할 수 있습니다. 이 카테고리 편집기를 사용하면 모든 WooCommerce 페이지를 편집할 수 있습니다. ~로부터 상점 페이지 에게 감사 페이지. ShopEngine이 제공하는 광범위한 기능에 대해 알아보려면 비디오를 시청하십시오.

ShopEngine – 최고의 WooCommerce 빌더

기타 WooCommerce 관련 블로그:

👉 고급 WooCommerce 사용자 정의 체크아웃 필드를 추가하는 방법
👉 WooCoomerce를 위한 최고의 쇼핑 카트 플러그인
👉 WooCommerce 빈 장바구니 오류를 해결하는 방법
👉 WooCommerce 다단계 결제를 추가하는 방법

사용자 정의 WooCommerce 카테고리 페이지의 최종 단어

카테고리 페이지는 고객과 검색 엔진 모두에게 필수적인 페이지입니다. 카테고리 페이지를 사용자 정의하고 최적화하면 전자상거래 비즈니스에서 더 많은 성공을 거두는 데 도움이 될 수 있습니다. 

좋은 점은 이제 WordPress에서 WooCommerce 카테고리 페이지를 사용자 정의하는 방법과 페이지를 최적화하여 전환율을 두 배로 늘리는 방법을 알게 되었다는 것입니다. 게다가 이제 각 카테고리에 대해 개별적으로 사용자 정의 WooCommerce 카테고리 페이지를 만드는 방법을 알게 되었습니다.

ShopEngine이라는 시장에서 사용할 수 있는 가장 완벽한 WooCommerce 빌더를 활용하여 eStore의 카테고리 페이지를 최적화할 수 있습니다. 그리고 지금 20% OFF에서 만능 WooCommerce 플러그인을 다운로드할 수 있습니다!

🔔 🔔 구매하려면 20% 저렴한 가격의 ShopEngine Pro 쿠폰 코드를 사용하세요 커뮤니티20.

이제 서둘러 WooCommerce 애호가 커뮤니티에 참여하세요!


코멘트

답글쓰기

이메일은 표시되지 않습니다. 필수 필드는 *로그인이 됩니다