WooCommerce 제품의 전부 또는 일부를 포함하는 정렬 가능하고 필터링 가능한 그리드를 만들고 싶습니까?

WooCommerce 상점을 운영하는 경우 WooCommerce에는 개별 제품을 소개하는 데 도움이되는 전용 아카이브 페이지가 이미 제공되어 있습니다.워드 프레스 woocommerce 제품 그리드를 만드는 방법 1

그러나 판매하는 제품에 따라 이것이 항상 제품을 소개하는 가장 효과적인 방법은 아닙니다.

경우에 따라 WooCommerce 제품을 그리드에 표시하는 것이 더 효율적입니다.

그리고 그것이 당신이 처한 상황처럼 들린다면 WooCommerce 제품의 그리드를 만드는 방법을 보여줄 것이기 때문에 괜찮습니다.

그러나 WordPress를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면 

그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.

WooCommerce 제품 그리드로 무엇을 할 수 있습니까?

전체 목록은 아니지만 다음은 제품 그리드가 방문자에게 일반 아카이브 페이지보다 더 나은 경험을 제공 할 수있는 몇 가지 상황입니다.

발견 WooCommerce 플러그인을 사용하여 WordPress에 온라인 상점을 설치하는 방법

  • 도매 상점 -많은 제품을 도매하는 경우 고객에게 그리드를 쉽게 정렬하거나 필터링 할 수있는 방법을 제공하는 것이 개별 제품 페이지를 탐색하는 것보다 더 사용자 친화적 일 수 있습니다.
  • 제품 카탈로그 -마찬가지로, 검색하기 쉬운 제품 카탈로그 만 표시하려는 경우 AJAX 정렬 / 필터 그리드를 사용하면 고객의 시간 (및 페이지 다시로드)을 절약 할 수 있습니다.
  • 주문 양식 -WooCommerce 제품을 기반으로 주문 양식을 작성하려는 경우 그리드를 사용하면 매우 쉽게 수행 할 수 있습니다. 레스토랑 메뉴를 표시하고 온라인 주문을 수락하는 것도 좋은 방법입니다.

WooCommerce 제품의 그리드를 만드는 방법

우리는 플러그인을 사용할 것입니다. WooCommerce 제품 표플러그인은 제품 그리드 생성에만 집중합니다. 그리고 인터페이스 매개 변수 덕분에 단축 코드, 그리드 작동 방식의 거의 모든 측면을 사용자 지정할 수 있습니다.

다음에 대한 가이드를 읽어보십시오. WordPress 블로그에 소요 된 시간을 늘리는 방법

내 의견으로는 가장 유용한 기능 중 일부는 다음과 같습니다.

  • 쉽게 열 추가 또는 삭제 사용자 지정 필드 또는 사용자 지정 분류가 포함 된 열을 추가 할 수도 있으며 WooCommerce 제품 테이블은 고급 사용자 지정 필드와 완전히 통합됩니다.
  • 4 필터 위젯 포함. 이를 통해 사이드 바에서 필터링 옵션을 제공하여 독자에게 원활한 경험을 제공 할 수 있습니다.
  • 제품 변형 / 속성 지원. 그리드에 제품 변형을 표시하는 3 가지 방법 중에서 선택하십시오.
  • 다중 선택 상자. 고객이 장바구니에 제품을 추가하기 전에 여러 제품을 선택할 수 있도록하여 주문 양식 작성을 용이하게합니다.
  • 빠른 검색, 정렬 및 필터링 . 고객은 페이지를 다시로드하지 않고도 그리드 데이터를 조작 할 수 있습니다.
  • 장바구니에 추가 . 마찬가지로 고객은 페이지를 다시로드하지 않고도 장바구니에 제품을 추가 할 수 있습니다.
  • 지연로드 지원. 대형 그리드의 성능을 향상시키는 데 유용합니다 ( 이는 즉각적인 정렬 또는 필터링을 제공하는 기능에 영향을 주지만 )

이 플러그인을 사용하는 방법은 다음과 같습니다.

1 단계 : 기본 그리드 기능 구성

플러그인을 설치하고 활성화 한 후 가장 먼저 할 일은 그리드의 기본 기능을 구성하는 것입니다. WordPress 플러그인 설치 방법에 대한 단계별 가이드를 확인하십시오.

이것은 기본적으로 단축 코드의 기본 동작을 정의합니다. 그러나 짧은 코드에 매개 변수를 추가하여 개별 그리드에 대해이 동작을 변경할 수도 있습니다.

플러그인 설정에 액세스하려면 WooCommerce → 설정. 그런 다음 탭을 클릭하십시오 제품 옵션을 선택하십시오 제품 테이블 :

제품 컬럼 추가 woocommerce wordpress.png

그리드 모양 구성

먼저 섹션에서 그리드 스타일을 선택할 수 있습니다. 테이블 디자인. 당신은 그것을 할 수 있습니다 :

  • 태만 -상상할 수 있듯이이 옵션은 사용자의 추가 개입없이 플러그인의 기본 설정을 사용합니다. 그는 블로그의 현재 테마를 가능한 많이 사용하려고 노력할 것입니다.
  • Personnalisé : 선택하면 스타일링 옵션 목록이 확장되어 필요없이 글꼴 색상과 크기를 사용자 지정할 수 있습니다. 맞춤 CSS.

제품 표 사용자 정의하기 css.png

스타일을 설정 한 후에는 단축 코드 기본값을 구성해야합니다. 다시, 당신은 후자의 매개 변수를 통해 개별 단축 코드에 대해 편집 할 수 있습니다. 그러나 설정하면 시간이 절약되고 나중에 작업이 조금 더 쉬워집니다.

제품 테이블 설정 구성 .png

대부분의 설정은 설명이 필요하지 않으며 WooCommerce 제품 테이블은 각 설정에 대해 자세히 알아볼 수 있도록 툴팁 또는 설명서 링크를 제공하는 것이 좋습니다.

또한 발견 어떻게 페이스 북에 WooCommerce 저장소를 추가합니다

단축 코드 기본값을 설정 한 후 더 스크롤하여 더 고급 레이아웃 및 기능 설정을 구성 할 수 있습니다.

제품 테이블의 고급 구성 .png

다시 말하지만, 플러그인은 훌륭한 일을합니다. 이해하기 어려울 수있는 매개 변수에 대한 추가 정보를 제공하는 것입니다. 

WooCommerce 온라인 상점의 재고 관리 방법 ? 이 링크를 클릭하여 확인하십시오.

주의해야 할 것은 누진 요금의 제한. 온라인 상점의 속도를 높이기 위해 점진적 로딩을 사용하기로 결정한 경우 플러그인의 검색 및 정렬 기능이 제한됩니다.

우리의 선택 참조 온라인 상점을 향상시키는 12 최고의 WooCommerce 플러그인

구성이 완료되면 변경 사항을 저장하십시오.

2 단계 : WooCommerce 그리드 위젯 추가 (선택 사항)

앞서 언급했듯이 WooCommerce Product Table은 사이드 바에 필터링 옵션을 추가하는 데 도움이되는 XNUMX 개의 위젯도 제공합니다 ( 클래식 WooCommerce 상점에서 할 수있는 ).

액세스하려면 모양 → 위젯 평소와 같이 원하는 위젯 위로 스 와이프합니다.

위젯 테이블 woocommerce.png

3 단계 : 제품 그리드를 표시 할 단축 코드 추가

당신은 결승선에 있습니다! 이제해야 할 일은 단축 코드를 추가하는 것입니다. [product_table] 그리드를 표시하려는 모든 곳에.

너무 발견 워드 프레스 로그인 페이지로 연결되는 링크를 찾는 방법

기본적으로 단축 코드는 1 단계에서 선택한 설정에 따라 작동합니다. 그러나 특정 단축 코드의 기능을 사용자 정의하려면 다음을 사용하여 수행 할 수 있습니다. 많은 단축 코드 매개 변수 가능.

예를 들어 특정 카테고리의 제품에만 그리드를 사용하려면 다음과 같은 매개 변수를 추가 할 수 있습니다.

[product_table 범주="모자"]

창의적이고 AND / OR 조건을 사용할 수도 있습니다.

파 exemple :

  • [product_table 범주= "모자 +에서 스타« ] 에 속하는 제품 만 표시 시간 모자 카테고리에 et 별에서.
  • Product_table 범주= "모자 에 별 "] 제품을 표시합니다. soit 모자 ou 별표 카테고리

작은 세부 사항에 대한 이러한 관심은 WooCommerce 제품의 그리드를 매우 훌륭하게 만듭니다. 

우리도 참조하십시오. 기사에 새로운 생명을 불어 넣는 6 가지 WordPress 플러그인

그리고 그것은 WooCommerce의 제품 그리드에 대한 모든 것입니다!

WooCommerce Product Table 플러그인 가격

WooCommerce Product Table은 독점적으로 프리미엄 플러그인입니다. WordPress.org 디렉토리에 몇 가지 무료 옵션이 나열되어 있지만 유연하거나 잘 문서화되어있는 옵션을 찾지 못했기 때문에 WooCommerce Product Table이 그만한 가치가 있다고 생각합니다.

1 웹 사이트 -75 달러

5 사이트의 경우 -135 달러

20 웹 사이트 -275 달러

프리미엄 워드 프레스 플러그인도 만나보세요  

당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트의 처리를 최적화합니다.

우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.

1. HBook

HBook은 워드프레스 플러그인 웹사이트에서 온라인 예약 솔루션을 쉽게 만들 수 있습니다.

에이치북

호텔 부문 (호텔, 홀리데이 아파트, 캠핑 등)에서 비즈니스를하는 모든 사람에게 완벽하게 적합합니다.

또한 우리의 발견 5 WordPress 플러그인은 블로그의 콘텐츠를 공유합니다.

그라스 오 워드 프레스 플러그인 HBook을 사용하면 예약 가능 일정, 가격 목록 및 예약 양식을 몇 초 만에 웹사이트에 추가할 수 있습니다.

다운로드 | 데모 | 웹 호스팅 

2. WooCommerce Tabs Pro : 제품 페이지를위한 추가 탭

Ce 워드 프레스 플러그인 제품 페이지에 무제한 추가 탭을 제공합니다.추가 탭-제품 페이지 워드 프레스 - 플러그인 - 투 - 페이지 빌더

주요 특징은 다음과 같습니다. 탭 제목 변경, 사용자 정의 컨텐츠를 편집하는 편집기, p탭 고정 여부, 선택 탭 아이콘, 손쉬운 제거 탭, p공용 인터페이스에서 탭 위치 사용자 지정, e더 ...

다운로드 | 데모 | 웹 호스팅

이 WooCommerce 플러그인을 사용하면 가입자가 기존 온라인 상점에서 제품을 구매할 경우 제휴사가 크레딧 포인트를 얻을 수 있습니다.

Woocommerce 다단계 추천 플러그인

그 기능은 무엇보다도 개인화 된 신용 및 상환 한도 구성, 등록 된 사용자를위한 완전한 관리 보고서, 글로벌 또는 제품 별 매개 변수 관리, 단축 코드 지원, 그리고 더 많은.

너무 발견 글로벌 헤더에 드롭 다운 연락처 양식을 추가하는 방법

WooCommerce 다단계 제휴 시스템으로 일반적인 제휴 거래 시스템 외부에 있습니다.

다운로드 | 데모 | 웹 호스팅

다른 추천 자료

또한 귀하의 웹 사이트 및 블로그에 대한 이해와 통제를 위해 아래 자료를 참조하십시오.

결론

그게 다야! 이 튜토리얼에서 끝났습니다. WordPress에서 WooCommerce 제품 그리드를 만들 수 있기를 바랍니다.. 주저하지 말라. 소셜 네트워크에서 친구들과 팁을 공유하십시오..

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.

그러나 그 동안 귀하의 commentaires 전용 섹션의 제안.

...