WooCommerce 상점 페이지를 사용자 정의하는 방법(코드 프리)

WooCommerce 상점 페이지를 사용자 지정하는 방법을 찾고 계십니까? 이 단계별 가이드에서는 상점의 상점 페이지를 사용자 지정하는 세 가지 100% 코드 프리 방법을 배웁니다.

카탈로그 페이지라고도 하는 상점의 상점 페이지는 여러 제품을 나열하는 페이지입니다. 귀하의 모든 제품("메인" 상점 페이지에 있음) 또는 특정 제품 범주 또는 태그가 있는 제품일 수 있습니다.

보다 기술적인 용어로 WooCommerce 상점의 제품 게시물 유형에 대한 아카이브 디자인입니다.

상점 페이지는 방문자가 제품을 탐색하고 발견하는 데 도움이 되므로 올바르게 만드는 것이 중요합니다. 이 게시물은 방법을 알려줍니다!

아래에서는 Botiga 테마를 예로 사용하여 코드 없이 WooCommerce 상점 페이지를 사용자 지정하는 세 가지 방법을 배웁니다.

• 기본 WordPress 테마 사용자 정의 프로그램의 내장 옵션
• 기본 WordPress 블록 편집기
• Elementor 페이지 빌더 플러그인(이 방법을 사용하면 무료 버전의 Elementor를 사용할 수 있습니다.)

참고 — 아직 WooCommerce 상점을 만들지 않은 경우 WooCommerce 상점을 만드는 방법에 대한 가이드로 이동할 수 있습니다. 작업 중인 상점이 있으면 여기로 돌아와서 상점 페이지 사용자 정의를 시작하십시오!

WooCommerce 상점 페이지 사용자 정의에 대한 빠른 소개

WooCommerce 상점 페이지를 완전히 사용자 지정하려면 유연성을 제공하도록 구축된 WooCommerce 테마를 선택하는 것이 좋습니다.

이 자습서에서 배우는 일반 원칙은 모든 WooCommerce 테마에 적용할 수 있지만 다음과 같은 몇 가지 이유로 Botiga 테마를 사용합니다.

• 워드프레스 커스터마이저에 세부 옵션이 포함되어 있어 처음부터 모든 것을 디자인할 필요 없이 상점 페이지를 사용자 정의할 수 있습니다.
• 처음부터 모든 것을 디자인하고 싶다면 Botiga Pro에는 기본 WordPress 블록 편집기 또는 무료 버전의 Elementor를 사용하여 모든 것을 사용자 지정할 수 있는 기능이 내장되어 있습니다.

많은 사용자 정의 옵션 외에도 Botiga는 가장 빠른 WooCommerce 테마 중 하나이므로 다른 영역에서도 성공할 수 있도록 상점을 설정합니다.

다른 WooCommerce 테마를 사용하는 경우 이 튜토리얼이 여전히 유용하다는 것을 알 수 있습니다.

예를 들어 대부분의 WooCommerce 테마는 사용자 정의 프로그램에서 최소한 몇 가지 옵션을 제공합니다.

마찬가지로, 우리가 선보이는 일반적인 Elementor 방법은 모든 테마에서 작동합니다. 유일한 차이점은 Botiga를 사용하지 않는 경우 Elementor Pro를 구매해야 하는 반면, Botiga에서는 무료 버전의 Elementor를 사용하여 모든 작업을 수행할 수 있다는 것입니다.

Botiga에 대해 자세히 알아보려면 Botiga 테마 페이지로 이동하세요.

방법 1 - 워드프레스 커스터마이저로 쇼핑 페이지 커스터마이징

대부분의 사람들에게 WooCommerce 상점 페이지를 편집하는 가장 쉬운 방법은 WordPress 사용자 지정 프로그램에서 테마 옵션을 사용하는 것입니다.

Botiga를 사용하면 상점 상점 페이지의 레이아웃, 스타일 및 콘텐츠를 사용자 지정하는 데 도움이 되는 자세한 옵션 배열을 얻을 수 있습니다.

다른 테마는 그다지 많은 옵션을 제공하지 않을 수 있지만 적어도 사용자 정의 프로그램에서 일부를 찾을 수 있어야 합니다.

다음은 Botiga 테마의 옵션을 사용하여 WooCommerce 상점 페이지를 사용자 지정하는 방법입니다.

1. 쇼핑 페이지에 표시할 항목 선택

작업을 시작하려면 상점 페이지에 표시할 콘텐츠를 선택해야 합니다. 기본값은 제품을 표시하는 것이지만 Botiga는 카테고리를 표시하는 옵션도 제공합니다.

이러한 설정에 액세스하려면 WordPress 대시보드에서 모양 → 사용자 지정 으로 이동하여 WordPress 사용자 지정 프로그램을 엽니다.

그런 다음 WooCommerce 에서 일반을 ​​선택합니다.

이제 Shop Page Display 드롭다운을 사용하여 제품만 표시할지, 카테고리만 표시할지 또는 둘 다 표시할지 선택합니다.

범주 표시 드롭다운을 사용하여 범주 아카이브 페이지에 대해 유사한 선택을 할 수도 있습니다. 이 경우 하위 범주를 표시할지 여부를 선택합니다.

2. WordPress Customizer에서 Shop Page Settings를 엽니다.

그런 다음 커스터마이저의 기본 메뉴 목록으로 돌아가서 제품 카탈로그 옵션을 선택하여 상점 페이지를 보다 완벽하게 사용자 정의하십시오.

이제 사이드바에 일반 및 스타일 의 두 탭으로 나누어진 다양한 옵션이 표시됩니다.

• 일반 - 상점 페이지에서 요소의 레이아웃과 콘텐츠를 제어합니다.
• 스타일 – 색상/글꼴 변경 또는 테두리 추가와 같이 상점 페이지의 요소 디자인을 조정합니다.

3. 일반 레이아웃 사용자 지정

시작하려면 레이아웃 설정을 확장하여 상점 페이지의 일반 레이아웃을 조정하십시오.

먼저 세 가지 일반 옵션을 제공하는 레이아웃 유형을 선택해야 합니다.

• 그리드
• 목록
• 벽돌공 직

사용할 행 및 열 수와 같은 일반 레이아웃 옵션을 제어할 수도 있습니다.

그 아래에서 상점 페이지에 사용할 헤더 스타일과 헤더에 포함할 콘텐츠(예: 제품 카테고리 표시 여부)를 선택할 수 있습니다.

사용자 지정 메뉴의 아래쪽에는 사이드바 레이아웃, 페이지 요소 및 페이지 매김을 제어하는 ​​옵션이 있습니다.

• 사이드바 레이아웃 – 세로 또는 가로 사이드바를 추가할 수 있습니다. 그런 다음 위젯을 사용하여 사이드바의 콘텐츠를 제어할 수 있습니다. 이는 방문자가 제품을 탐색할 수 있도록 제품 필터를 추가하는 데 정말 유용할 수 있습니다.
• 페이지 요소 - 페이지에서 다양한 요소를 표시하거나 숨길 수 있습니다.
• 페이지 매김 - 일반 페이지 매김, 무한 스크롤 또는 페이지를 새로고침하지 않고 새 제품을 로드하는 Ajax 기반 '추가 로드' 버튼을 사용할 수 있습니다.

4. 제품 카드 사용자 정의

다음으로 제품 카드 섹션을 열어 개별 제품이 상점 페이지에 표시되는 방식을 사용자 지정할 수 있습니다.

첫째, 다양한 카드 레이아웃과 장바구니에 추가 버튼 배치를 선택할 수 있습니다.

예를 들어 아래 스크린샷에서 카트에 추가 버튼을 이동하여 왼쪽 하단 모서리에 있는 제품 이미지 위에 떠 있는 것을 볼 수 있습니다.

설정에서 더 아래로 내려가면 몇 가지 다른 중요한 선택을 할 수 있습니다.

• 제품 빠른 보기 동작을 사용자 지정하거나 비활성화합니다.
• 예를 들어 쇼핑 페이지에 리뷰 수를 표시할지 여부와 같은 특정 콘텐츠 요소를 활성화/비활성화합니다.
• 정렬 및 간격을 조정합니다.

5. 판매 태그 및 카테고리 사용자 정의

다음으로 판매 태그 및 카테고리 섹션을 확장하여 상점 페이지의 해당 영역을 구성할 수 있습니다.

판매 태그 설정을 사용하면 판매 배지의 위치와 텍스트를 제어할 수 있습니다. 대신 판매율을 표시하는 옵션도 있어 각 제품에 대해 적절한 할인을 동적으로 삽입합니다.

이 가이드의 1단계에서 범주를 표시하도록 선택한 경우 범주 설정을 통해 범주 카드의 레이아웃을 제어할 수 있습니다.

6. 필요에 따라 스타일 옵션 조정

상점 페이지의 레이아웃과 콘텐츠에 만족하면 스타일 탭으로 이동하여 필요에 따라 모든 스타일을 조정할 수 있습니다.

여기서도 색상을 변경하고, 글꼴을 조정하고, 테두리를 추가하는 등의 작업을 할 수 있습니다.

여기서 아무것도 변경할 필요가 없습니다. 그러나 약간의 조정을 하고 싶다면 탐색하기에 좋은 영역입니다.

7. 기타 사용자 정의 옵션 살펴보기

사용자 정의 프로그램의 전용 제품 카탈로그 영역 외에도 Botiga는 상점 페이지에 영향을 줄 수 있는 몇 가지 다른 옵션도 제공합니다.

예를 들어 버튼 설정을 열어 카트에 추가 및 빠른 보기 버튼(사이트의 다른 모든 버튼 포함)의 색상을 조정할 수 있습니다.

변경하려는 특정 세부 정보가 있는 경우 이러한 다른 옵션을 탐색해 볼 가치가 있습니다. 그러나 상점 페이지의 모양이 마음에 든다면 더 깊이 파고들 필요가 없습니다.

8. 상점 페이지 레이아웃 게시

상점 페이지가 마음에 들면 게시 버튼을 클릭하여 상점에 표시하기만 하면 됩니다.

방법 2 – WordPress 블록 편집기로 쇼핑 페이지 사용자 지정

대부분의 상점에서 Botiga의 기본 제공 사용자 정의 옵션은 WooCommerce에서 사용자 정의 상점 페이지를 생성할 때 충분한 유연성을 제공합니다.

그러나 처음부터 진정한 맞춤형 디자인을 구축하려는 상황이 있을 수 있습니다.

코드 없이 이를 달성할 수 있도록 Botiga Pro의 템플릿 빌더 기능을 사용하여 기본 WordPress 블록 편집기 또는 Elementor(무료 버전 포함)를 사용하여 상점 페이지를 사용자 지정할 수 있습니다.

이 섹션에서는 블록 편집기에서 어떻게 작동하는지 보여줍니다. 그런 다음 다음 섹션에서 Elementor와 어떻게 작동하는지 보여 드리겠습니다. Elementor를 사용하고 싶다는 것을 이미 알고 있다면 이 링크를 클릭하여 해당 섹션으로 건너뛰십시오.

1. Botiga Pro 템플릿 작성기 모듈 활성화

템플릿 빌더를 활성화하려면 모양 → 테마 대시보드 → 테마 기능 으로 이동합니다.

그런 다음 아래로 스크롤하여 Templates Builder 모듈을 활성화합니다.

이 모듈을 활성화하려면 Botiga Pro가 필요합니다. 아직 가지고 있지 않은 경우 여기를 클릭하여 구입할 수 있습니다.

2. 새로운 쇼핑 페이지 레이아웃 만들기

다음으로 외모 → Botiga 템플릿 → 템플릿 추가 로 이동하여 새 상점 페이지 템플릿을 만듭니다.

템플릿 인터페이스에서 이름(예: "상점 페이지")을 지정하고 템플릿 유형으로 Shop Catalog를 선택합니다.

3. 블록을 사용하여 상점 페이지 디자인

이제 편집기를 사용하여 블록을 사용하여 상점 페이지 레이아웃을 디자인할 수 있습니다.

기존 WordPress 블록(또는 다른 플러그인의 블록)을 사용할 수 있습니다.

Botiga는 또한 상점 아카이브 세부 정보 및 제품 세부 정보와 같은 중요한 동적 콘텐츠를 위해 자체 WooCommerce 블록을 추가합니다.

특정 유형의 제품을 실제로 나열하려면 제품 쿼리 블록을 사용할 수 있습니다.

처음에 제품 쿼리 블록을 추가하면 제품 그리드가 표시됩니다.

그런 다음 블록의 설정을 사용하여 다양한 유형의 제품을 필터링하고, 레이아웃을 사용자 지정하고, 제품 카드를 조정하고, 스타일을 변경하는 등의 작업을 수행할 수 있습니다.

자세한 내용은 다음 비디오도 확인하십시오.

4. 템플릿 게시

상점 페이지 디자인에 만족하면 게시 버튼을 클릭하기만 하면 됩니다.

프런트엔드에서 상점의 상점 페이지를 열면 사용자 지정 상점 페이지 템플릿이 표시됩니다.

방법 3 – Elementor 플러그인을 사용한 쇼핑 페이지 사용자 지정

블록 편집기 대신 Elementor를 사용하는 것을 선호하는 경우 유사한 접근 방식을 따라 WooCommerce 상점 페이지를 사용자 지정할 수도 있습니다.

일반적으로 상점의 상점 페이지를 사용자 지정하려면 Elementor Pro가 필요합니다. 그러나 Botiga Pro를 사용하면 무료 버전의 Elementor를 사용하여 상점 페이지를 완전히 사용자 지정할 수 있습니다.

Botiga Pro는 상점 페이지를 설정할 수 있도록 자체 사용자 정의 Elementor 위젯을 추가하기 때문에 이를 달성할 수 있습니다.

즉, Botiga Pro는 여전히 Elementor Pro와 완벽하게 호환됩니다. 따라서 이미 Elementor Pro 라이선스가 있는 경우 추가되는 모든 추가 디자인 기능을 계속 활용할 수 있습니다.

Elementor 및 Botiga로 WooCommerce 상점 페이지를 편집하는 방법은 다음과 같습니다.

1. Botiga Pro 템플릿 작성기 모듈 활성화

템플릿 빌더를 활성화하려면 모양 → 테마 대시보드 → 테마 기능 으로 이동합니다.

그런 다음 아래로 스크롤하여 Templates Builder 모듈을 활성화합니다.

이 모듈을 활성화하려면 Botiga Pro가 필요합니다. 아직 가지고 있지 않은 경우 여기를 클릭하여 구매할 수 있습니다.

2. 새로운 상점 페이지 레이아웃 생성 및 Elementor 실행

다음으로 외모 → Botiga 템플릿 → 템플릿 추가 로 이동하여 새 상점 페이지 템플릿을 만듭니다.

템플릿 인터페이스에서:

1. 내부 이름을 지정합니다(예: "상점 페이지").
2. Shop Catalog를 템플릿 유형으로 선택합니다.
3. Save Draft 버튼을 클릭하여 데이터베이스에 저장합니다(Elementor 사용에 유용함).

완료하면 Elementor로 편집 버튼을 클릭하여 Elementor 인터페이스를 시작할 수 있습니다.

3. Botiga 위젯을 사용하여 상점 페이지 디자인 만들기

이제 일반 Elementor 인터페이스를 사용하여 상점 페이지를 디자인할 수 있습니다.

무료 버전의 Elementor로 디자인을 설정할 수 있도록 Botiga는 Botiga WooCommerce 섹션에 자체 위젯을 추가합니다.

상점 페이지의 경우 가장 중요한 위젯은 일부/전체 제품 목록을 표시할 수 있는 제품 쿼리 위젯입니다.

Archive Title , Archive Description 및 기타 Archive 레이블이 지정된 위젯과 같은 다른 유용한 위젯도 있습니다.

제품 쿼리 위젯의 설정에서 표시할 제품을 선택하고, 레이아웃을 사용자 지정하고, 제품 카드를 변경하는 등의 작업을 수행할 수 있습니다.

Elementor가 제공하는 모든 일반 스타일 및 고급 옵션을 활용할 수도 있습니다.

Botiga WooCommerce 위젯을 사용하여 상점 페이지를 디자인하는 것 외에도 타사 Elementor 애드온의 위젯을 포함하여 다른 Elementor 위젯을 자유롭게 사용할 수 있습니다.

4. 상점 페이지 게시

상점 페이지 디자인에 만족하면 Elementor에서 게시 버튼을 클릭하여 게시하십시오.

일단 게시하면 프런트엔드에서 상점 페이지를 열 수 있으며 Elementor로 만든 사용자 정의 디자인을 볼 수 있습니다.

결론: 지금 맞춤형 WooCommerce 쇼핑 페이지 만들기

이것으로 코드 없이 WooCommerce 상점 페이지를 사용자 지정하는 방법에 대한 가이드를 마칩니다.

대부분의 사람들에게 사용자 정의 프로그램의 Botiga 내장 옵션은 이미 사용자 정의 WooCommerce 상점 페이지를 생성할 수 있는 충분한 유연성을 제공합니다.

더 많은 제어가 필요한 경우 Botiga Pro의 템플릿 작성기 기능을 사용하면 기본 WordPress 블록 편집기 또는 Elementor(무료 버전 포함)를 사용하여 상점 페이지의 모든 부분을 완전히 사용자 지정할 수 있습니다.

아직 Botiga를 사용하고 있지 않다면 지금 Botiga로 전환하여 이러한 모든 사용자 지정 옵션과 훨씬 더 많은 옵션에 액세스할 수 있습니다!

WooCommerce 상점 페이지를 사용자 정의하는 방법에 대해 여전히 질문이 있습니까? 댓글로 알려주세요.