Woocommerce 제품 테이블을 만드는 방법
게시 됨: 2018-03-28의심할 여지 없이 Woocommerce는 WordPress에서 가장 인기 있는 전자 상거래 솔루션입니다. 그러나 다른 소프트웨어와 마찬가지로 몇 가지 단점이 있습니다. 하나는 제품에 대한 디스플레이 옵션 또는 제품의 부족입니다. 기본 디스플레이는 특정 유형의 제품에 적합한 추천 이미지의 그리드 레이아웃입니다. 그러나 특정 상황에서는 제품의 테이블 레이아웃이 더 사용자 친화적입니다.
이러한 유형의 상황에는 도매점, 제품 카탈로그, 주문 양식 또는 레스토랑 주문이 포함될 수 있습니다.
이런 종류의 상점이 있고 테이블에 제품을 전시하고 싶다면 운이 좋은 것입니다. Barn2Media는 검색 및 정렬 가능한 테이블 보기에 제품을 나열하는 Woocommerce Product Table이라는 플러그인을 개발했으며 사용이 매우 간단합니다.
플러그인 사용 방법
먼저 Woocommerce 지원이 내장된 WordPress 테마를 사용하는 것이 좋습니다. 이렇게 하면 사이트가 모든 전자 상거래 페이지에서 멋진 스타일을 갖게 됩니다. 좋은 다목적 WordPress 테마를 사용한다면 문제가 없을 것입니다.
이 플러그인을 사용하는 것은 아주 쉽습니다. Barn2Media의 개발자는 제품 테이블을 만드는 것을 지나치게 복잡하게 만들지 않으면서 적절한 양의 옵션을 제공하는 놀라운 일을 해냈습니다.
다음은 Woocommerce 제품 테이블을 만들고 사이트에 추가하기 위해 따라야 하는 단계입니다.
1단계. 테이블 디자인 설정
가장 먼저 해야 할 일은 Woocommerce Product Table 플러그인을 받는 것입니다.
플러그인을 설치하고 활성화한 후 제품 테이블의 기본 스타일을 구성하고 싶을 것입니다. 이것은 생성하는 모든 테이블에 사용할 스타일입니다. 그러나 단축 코드 옵션을 통해 이러한 설정을 재정의할 수 있습니다.
기본 스타일을 설정하려면 Woocommerce → 설정 으로 이동하여 제품 탭을 선택하십시오. 그런 다음 제품 테이블 을 클릭합니다.
테이블 스타일 에는 기본 및 사용자 정의의 두 가지 옵션이 있습니다.
Default 를 선택하면 제품 테이블이 WordPress 테마의 테이블 스타일을 사용합니다.
사용자 지정 을 선택하면 테두리, 배경색 및 글꼴에 대한 사용자 지정 스타일을 설정할 수 있는 스타일 옵션 섹션이 나타납니다.
2단계. 기본 옵션 설정
테이블 디자인 섹션 바로 아래에 기본 옵션 이 있습니다. 이러한 설정은 열 수, 필터 드롭다운, 페이지당 행 수 등과 같은 제품 테이블에 대한 다양한 옵션을 구성하는 데 사용됩니다. 스타일과 마찬가지로 이러한 설정은 나중에 보게 되겠지만 개별 단축 코드 내의 매개변수로 재정의할 수 있습니다.
전체적으로 여기에는 23개의 옵션이 있지만 단축 코드 매개변수를 통해 설정할 수 있는 옵션이 훨씬 더 있습니다. Barn2Media 지식 기반에서 전체 단축 코드 옵션 목록을 찾을 수 있습니다. 다른 옵션 위에 있는 페이지 오른쪽에 목록에 대한 편리한 링크도 있습니다.
정말 눈에 띄는 기능 중 하나는 지연 로딩을 활성화하는 기능입니다. 이렇게 하면 한 페이지에 많은 제품을 표시할 때 페이지 로드 시간을 단축하는 데 도움이 됩니다. 그러나 지연 로딩은 제품 변형의 검색, 정렬 및 표시를 제한합니다.
3단계. 사이트에 Woocommerce 제품 표 추가
이제 제품 테이블에 대한 기본 스타일과 설정을 모두 구성했으므로 웹사이트에 추가할 차례입니다. 제품 테이블을 삽입할 페이지를 이미 만든 경우 해당 페이지의 편집 화면으로 이동합니다. 그렇지 않은 경우 계속해서 새 페이지를 만드십시오.
페이지의 콘텐츠 편집기 내에서 다음 단축 코드를 추가합니다.
[product_table]그런 다음 페이지를 게시하거나 업데이트합니다. 간단합니다.
단축 코드는 2단계에서 구성한 설정을 기반으로 제품 테이블을 렌더링합니다. 그러나 앞서 언급했듯이 단축 코드에 매개변수를 추가하여 해당 설정을 재정의하거나 추가 옵션을 추가할 수 있습니다.
사용자 정의 이미지 크기의 단축 코드
Woocommerce 제품 테이블의 기본 이미지 크기는 70×70이지만 세로 공간을 덜 차지하도록 더 작은 이미지가 있는 페이지에 다른 제품 테이블을 갖고 싶다고 가정해 보겠습니다. 다음과 같이 이미지 크기 매개변수를 사용하면 됩니다.
[product_table image_size="40"]사용자 정의 카테고리가 있는 단축 코드
기본적으로 단축 코드에서 생성된 모든 제품 테이블에는 모든 범주의 모든 제품이 나열됩니다. 그러나 특정 범주의 제품만 표시해야 하는 경우가 있을 수 있습니다. 예를 들어, 의류 매장 웹사이트에서 티셔츠 전용 페이지를 만들고 싶습니다. 다음과 같이 할 수 있습니다.
[product_table category="t-shirts"]동일한 단축 코드에서 여러 매개변수를 사용할 수도 있습니다.
[product_table image_size="40" category="t-shirts"]Barn2Media 기술 자료에서 제품 테이블 옵션의 전체 목록을 찾을 수 있습니다.
4단계. Woocommerce 제품 테이블 위젯 추가
Woocommerce를 사용하는 경우 포함된 위젯에 이미 익숙할 것입니다. Woocommerce 제품 테이블에는 유사한 기능을 광고하는 자체 위젯이 4개 있습니다. 제품 테이블 단축 코드를 사용하는 페이지에 이러한 위젯을 추가할 수 있습니다. 이렇게 하려면 모양 → 위젯 으로 이동하여 해당 위치로 끕니다. 그런 다음 원하는 방식으로 구성합니다.
다음 위젯이 포함됩니다.
- 제품 테이블: 활성 제품 필터 – 활성 필터를 표시하여 고객이 이미 사용 중인 필터를 확인할 수 있습니다. 테이블을 원래 제품 목록으로 되돌리는 옵션이 포함되어 있습니다.
- 제품 테이블: 속성별 제품 필터링 – 하나 이상의 속성을 선택하여 테이블의 제품을 필터링합니다.
- 제품 테이블: 가격별로 제품 필터링 – 가격 범위 슬라이더를 추가합니다. 고객은 드래그하여 예산을 설정하고 가격대 내에서 제품을 볼 수 있습니다.
- 제품 테이블: 등급별로 제품 필터링 – 별 등급을 기반으로 제품을 표시하도록 제품 테이블을 세분화합니다.
결론 및 가격
사용 가능한 다른 제품 테이블 플러그인이 있지만 기능 및 사용 편의성 측면에서 Woocommerce 제품 테이블이 제공할 수 있는 플러그인은 없습니다. 나에게 이것은 이 플러그인이 프리미엄 전용이라는 사실을 정당화합니다.
가격을 분류하면 다음과 같습니다.
- 개인(1개 사이트) $75
- 비즈니스(5개 사이트 ) $135
- 대행사(20개 사이트) $275
전환율을 높일 수 있다는 사실은 그만한 가치가 있습니다. 2~3개의 추가 제품을 판매하는 데 도움이 된다면 그 자체로 비용을 지불한 것입니다. 따라서 결론적으로 제품을 표 형식으로 표시해야 하는 경우 더 이상 살펴볼 필요가 없습니다. 이 플러그인이 필요한 것입니다.
