WooCommerce Shop 페이지를 사용자 정의하는 방법 – 전체 가이드

게시 됨: 2020-05-07

상점 페이지를 편집하는 다양한 방법을 찾고 계십니까? 당신은 바로 이곳에 왔습니다. 이 가이드에서는 WooCommerce Shop 페이지를 수동으로, 페이지 빌더 및 플러그인을 사용하여 단계별로 사용자 정의 하는 다양한 방법을 배웁니다.

상점 페이지는 제품을 표시하는 곳이므로 상점에서 가장 중요한 페이지 중 하나입니다. 그렇기 때문에 매력적이고 사용자 친화적인 디자인이어야 합니다.

상점 페이지는 상점의 미리 디자인된 구성요소이며 모양과 느낌을 변경할 수 있는 기본 제공 도구가 없습니다. 그러나 이것이 당신이 그것을 전혀 변경할 수 없다는 것을 의미하지는 않습니다. 이 가이드에서는 세 가지 다른 방법을 사용하여 WooCommerce 쇼핑 페이지를 사용자 지정하는 방법을 배웁니다.

WooCommerce Shop 페이지란 무엇이며 왜 커스터마이징해야 합니까?

WooCommerce에서 정의한 쇼핑 페이지는 "제품에 대한 게시물 유형 아카이브의 자리 표시자"입니다. 간단히 말해, 제품을 표시하는 페이지 이므로 비즈니스의 성공에 매우 중요합니다. 편집 방법에 대해 설명하기 전에 WooCommerce 상점 페이지를 사용자 정의해야 하는 이유를 살펴보겠습니다.

이제 당신이 물건을 사기 위해 가게에 들어간다고 상상해 보십시오. 쇼핑 과정에 대한 만족도를 결정짓는 것은 무엇입니까? 가장 중요한 것 중 하나는 제품이 어떻게 배열되어 있고 원하는 것을 얼마나 쉽게 찾을 수 있는지입니다. 우리는 인터넷 덕분에 서로 연결된 세상에 살고 있습니다. 특히 글로벌 팬데믹(세계적 대유행) 시기에 쇼핑은 오프라인 매장에서 온라인 매장으로 이동했습니다. 향후 20년 동안 모든 구매의 약 95%가 온라인에서 이루어질 것으로 예상됩니다.

사람들은 온라인 쇼핑이 더 쉽고 빠르기 때문에(또는 최소한 그래야 하기 때문에) 온라인 쇼핑을 합니다. 따라서 WooCommerce 쇼핑 페이지에서 제품을 정렬하는 방법과 고객에게 제품을 표시하는 방법이 큰 차이를 만들 수 있습니다. 전환 및 수익뿐만 아니라 상점의 평판에도 영향을 미칩니다.

쇼핑 페이지 사용자 정의의 이점

대체로 WooCommerce Shop 페이지를 사용자 정의하면 다음과 같은 몇 가지 이점이 있습니다.

경쟁자보다 돋보입니다. 대부분의 상점에는 동일한 상점 페이지가 있으므로 사용자 정의하면 눈에 띄게 됩니다.
고객 경험 향상
전환율 및 매출 증대
SEO 개선. 디자인을 수정하는 것 외에도 쇼핑 페이지를 수정하고 고객이 Google에서 찾을 수 있는 콘텐츠를 추가할 수 있습니다.

이제 상점 페이지를 사용자 정의해야 하는 이유를 더 잘 이해했으므로 다음 질문에 집중하겠습니다. 고객이 상점 페이지에 도달했을 때 어떻게 좋은 인상을 줄 수 있습니까? 핵심은 구매 프로세스를 쉽게 만드는 매력적이고 사용자 친화적인 디자인을 갖는 것입니다. 그것은 말보다 쉽습니다.

그러나 이 가이드 에서는 WooCommerce 쇼핑 페이지 디자인을 완전히 제어하는 방법을 보여줍니다.

WooCommerce Shop 페이지를 사용자 정의하는 방법: 단계별 가이드

이 섹션에서는 세 가지 다른 방법을 사용하여 쇼핑 페이지를 사용자 지정하는 방법을 보여줍니다.

프로그래밍 방식으로
페이지 빌더와 함께
플러그인 사용

1) 프로그래밍 방식으로 WooCommerce Shop 페이지 사용자 정의

먼저 페이지 빌더나 플러그인에 의존하지 않고 WooCommerce 쇼핑 페이지를 사용자 정의하는 방법을 살펴보겠습니다. 이 방법의 가장 큰 장점은 사이트에 타사 앱을 추가하지 않는다는 것입니다. 어려운 코딩을 하지 않기 때문에 몇 분 이상 걸리지는 않겠지만 기본적인 코딩 기술이 있으면 더 좋습니다.

1단계: 자식 테마 만들기

지금까지 테마에 대한 하위 테마를 만들지 않았다면 이제 만들 때입니다. 테마를 변경한 다음 업데이트하면 새 파일이 이전 파일을 대체하고 변경 사항을 잃게 되므로 하위 테마를 권장합니다.

그러나 자식 테마에서 테마를 사용자 지정하면 이를 방지할 수 있습니다. 다양한 방법을 사용하여 자식 테마를 만들 수 있습니다. 하위 테마 플러그인을 사용하거나 직접 코딩할 수 있습니다. 두 가지 방법에 대한 자세한 내용은 WordPress에서 하위 테마를 만드는 방법에 대한 가이드를 확인하세요.

2단계: 하위 테마에서 폴더 구조 만들기

이제 FTP 클라이언트를 사용하여 웹사이트 파일을 변경하겠습니다. FTP 계정이 없는 경우 FileZilla 소프트웨어를 권장하지만 원하는 클라이언트를 사용할 수 있습니다. 자식 테마를 만든 후 사이트 파일로 이동하여 /wp-content/themes/your-theme 경로를 따르세요.

Twenty Twenty 테마에 대한 하위 테마를 만들었다고 가정해 보겠습니다. 폴더 이름은 2020-child-theme 와 같아야 합니다. 그런 다음 클릭하고 WooCommerce 라는 폴더를 만듭니다. 그런 다음 상점 페이지 템플릿 파일인 archive-product.php 파일을 만듭니다. 스토어에 WooCommerce 쇼핑 페이지를 생성했지만 비어 있으므로 이제 콘텐츠를 추가해야 합니다.

3단계: 쇼핑 페이지 콘텐츠 만들기

archive-product.php 의 텍스트 편집기에 작성하는 모든 내용이 상점 페이지에 표시되고 고객이 볼 수 있음을 명심하십시오. 여기에서 몇 가지 코딩을 사용하여 쇼핑 페이지에 마법을 걸 수 있습니다. 그러나 수행 방법을 잘 모르는 경우 다음 단계로 이동하십시오.

4단계: 쇼핑 페이지 템플릿 만들기

WooCommerce 쇼핑 페이지를 처음부터 만드는 대신 기존 템플릿을 사용하여 조정할 수 있습니다. 이를 위해 상위 테마로 돌아가서 single.php 또는 index.php 파일을 찾습니다. 둘 중 하나가 보이면 복사하여 2단계에서 만든 WooCommerce 폴더에 붙여넣습니다. 두 파일이 모두 표시되면 single.php 를 복사합니다. 그런 다음 archive-product.php 파일을 삭제하고 여기에 방금 붙여넣은 파일 이름을 archive -product.php 로 변경합니다.

이를 통해 포스트 템플릿 파일을 쇼핑 페이지로 사용하지만 제품 페이지처럼 보일 것입니다. 그러나 이것은 이상적이지 않습니다. WooCommerce 쇼핑 페이지가 제품 페이지가 아닌 상점 페이지처럼 보이길 원합니다. 이를 사용자 정의하기 위해 일부 단축 코드를 사용합니다.

5단계: 단축 코드를 사용하여 쇼핑 페이지 사용자 지정

먼저 제품을 열이나 행으로 나눕니다. 예를 들어 최대 6개 제품의 2개 열에 제품을 표시하려면 다음 코드를 archive-product.php 파일에 붙여넣어야 합니다.

 [ products limit="6" columns="2" ]

방법을 잘 모르겠다면 다음 단계를 따르세요.

archive-product.php 파일을 엽니다.
<main id=“main” class=“site-main” role=“main”> 과 </main><!– #main –> 사이의 텍스트를 삭제합니다. 이 두 줄의 코드를 제거해서는 안 되며 그 사이에 있는 것만 제거해야 합니다.
방금 삭제한 항목이 남긴 공간에 다음 코드 줄을 추가합니다.
```
 <?php 에코 do_shortcode('[ products limit="6" columns="2" ]') ?>
```
변경 사항 저장
축하합니다! 새로운 WooCommerce 쇼핑 페이지를 구축했습니다!

가장 인기있는 제품 표시

WooCommerce에서 쇼핑 페이지를 프로그래밍 방식으로 사용자 정의하기 위해 할 수 있는 또 다른 예를 살펴보겠습니다. 가장 인기 있는 제품을 표시하고 싶다고 가정해 보겠습니다. 이를 위해 다음 단축 코드를 사용합니다.

 [ products orderby="popularity" ]

파일 테마의 archive-product.php 파일을 찾아 다음 코드를 붙여넣습니다.

 do_action('woocommerce_before_shop_loop');
echo '<h1>가장 인기있는 !!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

보시다시피, 우리는 두 개의 열로 구성된 단일 행 (columns=”2″ limit=”2″) 에 두 개의 제품을 표시하지만 이 숫자를 가장 적합한 값으로 조정할 수 있습니다.

마찬가지로 최고 평점 제품, 베스트 셀러 제품 등을 표시할 수 있습니다. 짧은 코드를 사용하거나 코딩을 통해 상점 페이지를 둘러보고 사용자 지정하여 비즈니스에 완벽한 모양과 느낌을 제공하는 것이 좋습니다.

약간의 코딩으로 상점을 사용자 정의하는 방법에 대한 더 많은 아이디어는 프로그래밍 방식으로 WooCommerce 상점 페이지를 편집하는 방법에 대한 가이드를 확인하십시오.

2) Page Builder로 WooCommerce Shop 페이지 사용자 정의

앞의 방법은 시간을 절약할 수 있지만 코딩 기술이 없는 사람에게는 어려울 수 있습니다. 그렇기 때문에 여기에서는 테마 파일을 수정하지 않고도 트릭을 완료하는 더 쉬운 방법을 보여드리겠습니다. 이 섹션에서는 페이지 빌더를 사용하여 WooCommerce 쇼핑 페이지를 사용자 정의하는 방법을 배웁니다 . 페이지 빌더를 사용하여 상점 페이지 디자인, 레이아웃, 제품 유형 및 표시할 제품을 변경할 수 있습니다.

또한 코드를 작성하거나 테마 파일을 수정할 필요가 없습니다. Elementor, Visual Composer, Divi 또는 기타 페이지 빌더를 사용하는지 여부에 관계없이 이 방법은 모두 호환됩니다.

참고 : 코드를 작성할 필요는 없지만 WooCommerce 단축 코드에 익숙하다면 도움이 될 것입니다. 단축 코드 가이드는 좋은 출발점입니다. 이제 페이지 빌더를 사용하여 상점 페이지를 사용자 정의하는 방법을 살펴보겠습니다. 이렇게 하려면 두 가지 주요 단계가 있습니다.

페이지 빌더로 제품을 표시하는 페이지 만들기
해당 페이지를 쇼핑 페이지로 만드십시오.

1단계: 페이지 빌더로 목록 페이지를 만들고 콘텐츠로 채우기

나는 당신이 페이지 빌더에 익숙하다고 가정하므로 여기에서 그것을 사용하는 방법에 대해 설명하지 않을 것입니다. 이 가이드에서는 Elementor를 페이지 빌더로 사용합니다. 가장 먼저 해야 할 일은 새 페이지를 만드는 것입니다.

페이지 빌더로 WooCommerce Shop 페이지 사용자 정의

일반적으로 WooCommerce 상점에서는 추천, 베스트 셀러 및 새로운 도착 제품을 표시합니다. 여기에서는 추천 제품과 베스트 셀러 제품으로 쇼핑 페이지를 만들 것입니다.

WooCommerce Shop 페이지 추천 및 베스트 셀러 사용자 지정

이제 페이지에 콘텐츠를 추가해 보겠습니다. 이를 위해 WooCommerce 단축 코드를 사용합니다. 표시하고 싶은 상품의 카테고리에 따라 사용할 수 있는 단축 코드가 많이 있습니다. 다음은 유용할 것입니다.

```
 [ featured_products ]
```

 [ best_selling_products _판매_제품 ]

```
 [ top_rated_products ]
```
```
 [ sale_products ]
```
```
 [ product_table ]
```
```
 [ recent_products ]
```
```
 [ products ]
```

이 예에 따라 다음을 사용하여 쇼핑 페이지에 추천 제품을 추가합니다.

짧은 코드. 이것을하기 위해:

WordPress 관리 대시보드 > 제품 페이지로 이동합니다. 오른쪽에 있는 별 아이콘을 클릭하여 추천 제품을 선택합니다.

편집 페이지에서 텍스트 편집기를 추천 제품 아래로 끕니다.

복사
```
 [ featured_products ]
```
거기에 숏코드를 붙여넣습니다.

업데이트 를 클릭하면 아래와 같이 제품이 표시됩니다.

마찬가지로 베스트 셀러의 경우 다음을 사용할 수 있습니다.

 [ best_selling_products _판매_제품 ]

단축 코드, 최근에 게시된 제품에 사용할 것

 [ recent_products ]

등등. 상점 페이지에 표시할 제품 유형을 결정하는 것은 귀하에게 달려 있습니다. 다음을 수행해야 할 수도 있는 단축 코드 속성이 있습니다.

열 수 설정
표시되는 제품 수 제한

예를 들어 최대 6개 제품의 2개 열을 표시하려면 다음과 같이 사용합니다.

 [ products limit="6" columns="2" ]

단축 코드는 매우 강력하고 사용하기 쉽습니다. 따라서 WooCommerce 단축 코드에 대한 가이드를 확인하여 최대한 활용하는 것이 좋습니다.

2단계: 새로 만든 페이지를 쇼핑 페이지로 만들기

새 페이지를 만든 후 WooCommerce 쇼핑 페이지로 만들어야 합니다. 이렇게 하려면 자식 테마를 설치하는 것이 좋습니다. 아직 만들지 않았다면 원하는 하위 테마 플러그인을 사용하는 것이 좋습니다. 여기에서는 계속해서 하위 테마를 설치하고 생성했다고 가정하겠습니다.

새로 만든 페이지의 URL 가져오기
워드프레스 대시보드로 이동
모양 > 테마 편집기 를 클릭한 다음 팝업이 표시되면 이해 를 클릭합니다.
그런 다음 오른쪽에 있는 테마 기능 파일에 액세스할 수 있는 페이지로 이동합니다.

functions.php 파일을 클릭하고 이 코드를 파일 끝에 붙여넣습니다.

 add_action('template_redirect', 'quadlayers_redirect_woo_pages');기능 quadlayers_redirect_woo_pages()
{
    if (function_exists('is_shop') && is_shop()) {
        wp_redirect('https://www.quadlayers.com/shop/');
        출구;
    }
}

중요 : 코드를 삭제하지 않고 있는 그대로 복사하여 붙여넣고 wp_redirect ('[yourURL]') 내에서 URL을 교체한 다음 파일을 업데이트하면 됩니다. 맞춤형 WooCommerce 쇼핑 페이지를 만들었습니다 .

3) 플러그인으로 WooCommerce Shop 페이지 사용자 정의

이 섹션에서는 플러그인을 사용하여 WooCommerce의 쇼핑 페이지를 사용자 정의하는 방법을 배웁니다. 최고의 제품은 다음과 같습니다.

WooCustomizer
WooCommerce Product Table by WC Product Table (무료 및 프리미엄)
Barn2(프리미엄)의 WooCommerce 제품 테이블

이 섹션에서는 무료 및 프리미엄 도구를 모두 사용하여 상점 페이지를 편집하는 방법을 보여줍니다.

3.1) 우커스터마이저

WooCustomizer 는 WooCommerce 쇼핑 페이지를 사용자 정의하는 훌륭한 플러그인입니다. 몇 번의 클릭으로 제품, 장바구니, 사용자 계정 및 결제 페이지를 편집할 수 있습니다. 이 플러그인에는 많은 기능이 있으며 전체 WooCommerce 스토어를 개인화할 수 있습니다. WooCustomizer를 사용하면 상점 페이지 사용자 정의 옵션에 중점을 두고 다음을 수행할 수 있습니다.

선택할 수 있는 20개 이상의 설정으로 상점 페이지 편집
WooCommerce Shop, 아카이브 및 제품 페이지에서 요소 제거 또는 편집
상점 및 제품 페이지에서 WooCommerce 이동 경로 삭제
장바구니 페이지의 쿠폰 섹션 또는 장바구니 쿠폰 드롭다운 텍스트와 같은 쇼핑 페이지 요소를 제거하거나 편집합니다.
상점 페이지에 AJAX 제품 검색 창 및 제품 빠른 보기 팝업 추가
쇼핑 페이지의 행 및 페이지당 제품 수 사용자 정의
상점 및 아카이브 페이지에 표시되는 열 수 변경
고객이 쇼핑 페이지에서 제품을 볼 수 있도록 제품 빠른 보기 추가
상점 페이지 편집 및 판매 배너 보관
그리고 훨씬 더

WooCommerce Shop 페이지 사용자 정의 - WooCustomizer WooCustomizer는 WooCommerce 페이지 또는 템플릿을 무시하지 않습니다. 편집하기로 선택한 요소의 테마에 추가 스타일 옵션을 추가하기만 하면 됩니다. WooCustomizer에는 WooCommerce 쇼핑 페이지를 편집할 수 있는 많은 기능이 있지만 사용하기도 매우 쉽습니다. 이 도구는 다재다능하며 코드를 작성하지 않고도 상점을 더 잘 제어할 수 있습니다.

마지막으로 WoooCustomizer는 프리미엄 도구입니다. 기본 기능이 포함된 무료 버전과 연간 29달러부터 시작하는 고급 기능이 포함된 3개의 프리미엄 플랜이 있습니다.

3.2) WC Product Table의 WooCommerce Product Table Lite

WooCommerce 제품 테이블(WCPT)은 제품 테이블 레이아웃을 쉽게 생성할 수 있는 우수한 플러그인입니다. 5점 만점에 4.9점과 5,000개 이상의 활성 설치로 WooCommerce에서 쇼핑 페이지를 편집하는 최고의 도구 중 하나입니다.

WC 제품 테이블은 프리미엄 도구입니다. 기본 기능이 포함된 무료 버전과 더 강력한 기능이 포함된 프로 플랜이 있으며 비용은 연간 49달러입니다. 여기에서는 라이트 버전을 사용하는 방법을 보여주고 프로 플랜에 대한 몇 가지 팁을 제공합니다.

1단계: 모든 페이지에서 WCPT 만들기

먼저 플러그인을 다운로드하고 활성화해야 합니다. 그런 다음 대시보드 사이드바에 제품 테이블 이 표시됩니다. 그것을 클릭하고 새 테이블 추가 를 누르면 테이블을 생성할 수 있는 페이지로 이동합니다.

플러그인으로 WooCommerce Shop 페이지 사용자 지정

보시다시피 다음을 지정해야 합니다.

테이블 이름: 이 예에서는 Product Table 01 이라고 했습니다.
제품 카테고리 : 쿼리 탭에서 귀하가 보유한 카테고리를 볼 수 있습니다. 테이블에 하나를 선택하십시오

열 정보: 다음으로 열 탭으로 이동합니다. 여기서 원하는 테이블을 그려야 합니다. 원하는 열의 수를 결정한 다음 각 열을 디자인해야 합니다. WC 제품 테이블은 노트북뿐만 아니라 전화 및 태블릿 컬럼에 대한 옵션을 제공합니다. 따라서 제목, 셀 템플릿 및 디자인(글꼴, 정렬, 글꼴 색상, 배경색 등)을 포함하여 각 유형의 장치에 대해 원하는 모든 옵션을 지정할 수 있습니다.

원하는 열을 만든 후 설정 저장 을 클릭하면 모든 설정이 완료됩니다.

2단계: 새 페이지에 표 붙여넣기

숏코드를 사용하여 1단계에서 생성한 테이블을 원하는 위치에 표시할 수 있습니다. 단축 코드를 복사하기만 하면 됩니다.

플러그인 및 단축 코드로 WooCommerce Shop 페이지 사용자 정의

이제 단축 코드를 사용하여 새 페이지에 테이블을 표시해 보겠습니다. 이 시점에서 새 페이지를 만드는 데 익숙하다고 가정할 수 있습니다. 따라서 페이지 빌더를 사용하여 페이지 > 새로 추가 를 클릭하고 이름을 지정하십시오. 예를 들어 My Shop Page 2 . Elementor를 사용하는 경우 다음과 같이 표시됩니다.

텍스트 편집기를 아래로 끌어 방금 복사한 단축 코드를 붙여넣습니다.

이제 제품 테이블 스타일이 있는 페이지가 생성됩니다.

3단계: 고객을 새 쇼핑 페이지로 리디렉션

고객을 새 쇼핑 페이지로 리디렉션하려면 리디렉션 플러그인이 필요합니다. 이 도구는 기본 WooCommerce 쇼핑 페이지에서 2단계에서 만든 새 페이지로 고객을 리디렉션합니다. 이러한 플러그인의 대부분은 단일 목적이며 사용하기 매우 쉽습니다. 여기서는 가장 널리 사용되는 리디렉션 플러그인 중 하나인 리디렉션을 사용하지만 유사한 도구를 사용하면 됩니다.

플러그인 및 리디렉션으로 WooCommerce Shop 페이지를 사용자 정의하는 방법

플러그인을 활성화한 후 도구 > 리디렉션 으로 이동하면 다음 메시지가 표시됩니다.

소스 URL에 기본 쇼핑 페이지의 링크를 붙여넣습니다.
대상 URL에 새로 구축한 쇼핑 페이지의 링크를 붙여넣습니다.
그런 다음 설정 시작을 클릭합니다.
그게 다야! 이것이 무료 플러그인으로 WooCommerce 쇼핑 페이지를 사용자 정의하는 방법입니다!

참고 : 검색 엔진은 일반적으로 리디렉션 원칙을 선호하지 않으므로 이 방법을 사용하면 SEO 결과에 영향을 미칠 수 있습니다.

프로팁

SEO에 영향을 주지 않으려면 WooCommerce Product Table 플러그인의 프로 버전을 사용할 수 있습니다. 고급 기능 외에도 아카이브 재정의 기능도 제공됩니다.

이 기능을 사용하면 쇼핑 페이지뿐만 아니라 속성, 카테고리, 태그 및 검색과 같은 아카이브 페이지에서도 기본 WooCommerce 그리드를 제품 테이블로 교체할 수 있습니다. 이 기능을 활성화하려면 WP 대시보드 > 제품 테이블 > 설정 > 아카이브 재정의로 이동하십시오.

3.3) Barn2의 WooCommerce 제품 표

상점 페이지를 편집하는 또 다른 훌륭한 옵션은 Barn2의 WooCommerce Product Table 플러그인입니다. 연간 89달러부터 시작하는 프리미엄 도구이며 사용하기 매우 쉽습니다. 이 추가 기능은 테이블 레이아웃에 제품을 나열한 다음 쇼핑 페이지에 삽입하는 데 도움이 됩니다. 이 방법을 사용하면 상점 페이지의 기본 디자인을 테이블로 변환할 수 있습니다.

1 단계

먼저 WooCommerce Product Table 플러그인을 설치하고 활성화합니다. 그런 다음 WooCommerce 탭으로 이동하여 설정 > 제품 을 클릭합니다. 제품 탭 아래에 제품 테이블 섹션이 표시됩니다. 여기에 플러그인 구매 시 받은 플러그인의 라이선스 키를 입력합니다.

2 단계

먼저 지정된 쇼핑 페이지 및 카테고리 페이지에 제품 테이블을 추가합니다.
플러그인 > 테이블 표시 의 설정 페이지로 돌아가서 제품 테이블 레이아웃의 위치를 선택합니다.

틱샵 페이지
그런 다음 모든 제품 카테고리 페이지, 제품 세금 아카이브 및 검색 결과에 제품 테이블을 표시하려면 제품 카테고리 아카이브 를 선택하십시오.
변경 사항 저장

3단계

원하는 대로 테이블을 변경합니다. WooCommerce 제품 테이블의 설정 페이지는 매우 직관적입니다. WC Product Table의 WC Product Table과 달리 Barn2 도구는 각 열을 생성하고 구성하도록 요구하지 않으므로 사용하기 쉽습니다.

보너스: WooCommerce 쇼핑 페이지 빈 문제를 해결하는 방법

빈 상점 페이지 는 WooCommerce에서 가장 일반적인 문제 중 하나입니다. 상점 페이지에 제품이 표시되지 않는 데는 여러 가지 이유가 있지만 여기서는 가장 일반적인 문제를 해결하는 방법을 보여 드리겠습니다.

Shop 페이지 구성 : WooCommerce > 설정 > 제품 으로 이동하여 Shop 페이지 에서 올바른 페이지를 사용하고 있는지 확인하십시오.
플러그인 호환성 : 플러그인이 충돌을 일으켜 쇼핑 페이지가 공백으로 표시될 수 있습니다. 문제를 해결하려면 모든 플러그인을 비활성화하고 어떤 플러그인이 문제를 일으키는지 확인하세요.
퍼머링크: 설정 > 퍼머링크 로 이동하고 퍼머링크를 업데이트하려면 저장하세요.
카탈로그 가시성 : 카탈로그 가시성이 올바르게 설정되어 있는지 확인하십시오. WooCommerce > 제품 으로 이동하여 제품이 숨김으로 설정되어 있지 않은지 확인합니다.

이러한 문제에 대한 자세한 내용은 WooCommerce 쇼핑 페이지 빈 문제를 해결하는 방법에 대한 가이드를 확인하세요.

보너스 2: 상점 페이지에 카테고리 표시

쇼핑 페이지에 카테고리를 표시하면 제품을 더 잘 구성할 수 있고 사용자가 원하는 것을 쉽게 찾을 수 있습니다. 쇼핑 페이지에 카테고리를 표시하는 방법에는 세 가지가 있습니다. 이 섹션에서는 WooCommerce의 기본 옵션을 사용하여 이를 수행하는 방법을 보여줍니다.

먼저 대시보드에서 모양 > 사용자 정의 로 이동한 다음 사용자 정의 사이드바에서 WooCommerce > 제품 카탈로그 로 이동하십시오. 그런 다음 쇼핑 페이지 표시 를 사용하여 카테고리 표시 또는 카테고리 및 제품 표시 여부를 선택하십시오.

또한 카테고리 표시 옵션을 사용하여 제품 카테고리 페이지에서 제품 하위 카테고리 및 제품을 표시하거나 숨길 수 있습니다. 변경 사항을 실시간으로 미리 볼 수 있으며 완료되면 게시 를 클릭하여 변경 사항을 저장합니다.

이 방법은 적용하기 위한 것이지만 많은 제어를 제공하지는 않습니다. 더 많은 유연성을 제공하는 다른 방법은 WooCommerce Shop 페이지에 카테고리를 표시하는 방법에 대한 가이드를 확인하세요.

첫걸음

세 가지 사용자 지정 방법 중 하나를 수행하기 전에 하위 테마를 사용하는 것이 좋습니다 . 플러그인을 사용하거나 프로그래밍 방식으로 만들 수 있습니다. 자식 테마는 부모 테마의 모든 디자인 요소를 상속하므로 해당 테마의 복사본이 있어 더 안전합니다. 왜요? 상위 테마의 파일을 직접 편집하면 테마를 업데이트할 때 모든 변경 사항이 무시되기 때문입니다.

하위 테마를 사용하면 업데이트 후 데이터 손실 없이 파일을 변경할 수 있습니다. 또한 현명한 사이트 소유자는 원본 테마 파일을 절대로 엉망으로 만들지 않습니다. 그 외에도 상점 페이지는 WooCommerce의 사전 설정 페이지이므로 모든 WordPress 테마와 호환됩니다. 단, 3가지 방법 중 2가지 방법으로 자식 테마를 사용하는 것을 권장하므로 호환성 문제가 있을 수 있습니다. 이 경우 타사 문제에 대한 WooCommerce 문서를 볼 수 있습니다.

결론

대체로 상점 페이지의 디자인과 제품을 표시하는 방법은 전환에 큰 영향을 줄 수 있습니다. WooCommerce에서 상점 페이지는 미리 구축되어 있으며 레이아웃을 편집할 수 있는 몇 가지 옵션이 있지만 매우 제한적입니다.

따라서 이 가이드에 설명된 세 가지 방법 중 하나를 사용하여 사용자 지정하면 군중에서 눈에 띄게 됩니다. 또한 귀하의 비즈니스를 더 잘 대표하고 고객에게 전문성을 보여줄 것입니다. 세 가지 다른 방법을 사용하여 쇼핑 페이지를 사용자 정의하는 방법을 보여 주었습니다.

수동으로
페이지 빌더와 함께
플러그인 사용

모두 장단점이 있지만 모두 작업을 수행하므로 필요와 기술에 가장 적합한 것을 사용하십시오. 코딩 기술이 없는 경우 페이지 빌더 또는 플러그인을 사용하여 상점 페이지를 편집할 수 있습니다. WooCustomizer는 사용하기 쉽고 상점을 최적화할 수 있는 많은 기능을 제공하며 무료 버전이 있기 때문에 추천합니다.

마지막으로 소셜 미디어에서 강력한 영향력을 행사하고 있다면 Facebook Shop을 WooCommerce에 연결하는 것을 고려해야 합니다. 이렇게 하면 사용자가 제품을 보고 사이트의 체크아웃 페이지로 직접 이동하여 구매를 완료할 수 있도록 제품 카탈로그를 Facebook에 업로드할 수 있습니다. 상점의 다른 섹션을 사용자 정의하려면 다음 가이드 중 일부를 확인하십시오.

WooCommerce에서 내 계정 페이지를 사용자 정의하는 방법
WooCommerce에서 장바구니에 추가 버튼 사용자 지정
WooCommerce Checkout을 편집하는 방법(코딩 및 플러그인)
WooCommerce에서 내 계정 페이지 편집
Divi에서 WooCommerce 제품 페이지를 사용자 정의하는 방법

이제 이를 최대한 활용하고 WooCoommerce 쇼핑 페이지를 최적화할 때 입니다. 이러한 방법을 시도해 보셨습니까? 어느 것이 가장 좋아합니까? 당신이 그들에 대해 어떻게 생각하는지 알려주고 질문이 있으면 알려주십시오!