WooCommerce 제품 목록 보기를 만드는 방법

웹사이트에 WooCommerce 제품 목록 보기를 생성 하시겠습니까? 그들은 상점 페이지 자체에서 고객에게 제품에 대한 더 많은 정보를 표시하기 위해 매우 인기가 있습니다. 따라서 이 자습서에서는 제품 목록 보기로 전환하는 단계별 자습서를 제공합니다.

그러나 프로세스를 진행하기 전에 제품 목록 보기를 만드는 데 필요한 사항을 살펴보겠습니다.

WooCommerce에서 제품 목록 보기를 만드는 이유는 무엇입니까?

기본적으로 쇼핑 페이지의 제품은 그리드 스타일로 표시됩니다. 예, 웹 사이트의 활성 테마에도 전적으로 의존합니다. 그러나 대부분의 테마의 경우 타일과 같이 제품이 하나씩 그리드로 표시됩니다.

그러나 목록 보기에서는 제품이 훨씬 더 세부적으로 표시됩니다. 각 제품은 배송 세부 정보, 제품 설명 등과 같은 추가 정보와 함께 수직 목록 에 차례로 표시됩니다. 예를 들어 온라인 스토어 Best Buy의 그리드 보기와 목록 보기를 비교해 보겠습니다.

웹 사이트에 있는 제품의 기본 그리드 보기 는 다음과 같이 표시됩니다.

그러나 웹 사이트의 목록 보기로 직접 전환할 수는 없습니다. 그러나 더 많은 제품을 보려면 제품이 다음 레이아웃으로 목록 보기 에 표시됩니다.

그리드 보기보다 목록 보기에 더 많은 제품 세부 정보 가 표시된다는 것을 분명히 알 수 있습니다. 고객은 목록 보기에서 배송 세부 정보, 제품 모델 및 SKU 번호, 비교 및 ​​위시리스트 옵션 등을 쉽게 볼 수 있습니다. 반면 그리드 보기에서는 웹사이트가 혼잡해 보이기 때문에 이 정보를 추가할 수 없습니다.

실제로 도매 제품, 제품 카탈로그 또는 레스토랑 주문 시스템이 있는 온라인 상점을 운영하는 경우 목록 보기가 고객에게 더 편리합니다. 필요한 모든 세부 정보는 단일 페이지에서 고객에게 제공될 수 있습니다. 따라서 추가 정보를 보기 위해 개별 제품 페이지를 클릭할 필요가 없습니다.

WooCommerce 제품 목록 보기를 만드는 방법은 무엇입니까?

WooCommerce 제품 목록 보기를 만드는 가장 쉬운 방법 은 플러그인을 사용하는 것 입니다. WordPress 플러그인은 웹 사이트의 기능을 향상하고 유연성을 높이는 데 도움이 됩니다. 마찬가지로 목록에서 제품을 보는 데에도 사용할 수 있습니다.

제품 목록 보기를 생성할 수 있는 많은 플러그인이 있지만 다음은 가장 좋은 플러그인입니다.

WooCommerce용 그리드/목록 보기

WooCommerce용 그리드/목록 보기 는 제품 목록 보기를 생성하는 최고의 무료 플러그인 중 하나입니다. 사용이 매우 간단하며 WooCommerce 쇼핑 페이지에서 목록 또는 그리드 보기를 활성화하는 토글을 추가하기만 하면 됩니다.

플러그인은 또한 다양한 목록 및 그리드 제품 스타일 사용자 정의 옵션을 제공합니다. 위치를 변경할 수 있는 그리드/목록 스위처 버튼을 수정할 수 있는 고급 옵션을 제공합니다. 마찬가지로 페이지당 제품도 이 플러그인을 사용하여 원하는 대로 변경할 수 있습니다.

주요 특징들:

• 목록 및 그리드 스위처 버튼
• 스위처 버튼에 대한 고급 사용자 정의
• 페이지당 제품 옵션
• 단축 코드 친화적
• 주요 WooCommerce 플러그인과의 호환성

가격:

WooCommerce용 Grid/List View는 무료 플러그인입니다. 공식 WordPress 플러그인 저장소에서 사용할 수 있습니다.

WooCommerce 제품 테이블

WooCommerce Product Table 은 제품 목록 보기를 생성하는 데 도움이 되는 프리미엄 플러그인입니다. 처음에는 웹사이트에서 테이블을 디자인하는 WooCommerce 플러그인 중 하나입니다. 그러나 표 형식의 목록 보기에 제품을 표시하도록 쉽게 수정할 수 있습니다.

플러그인은 설정이 매우 쉽고 사용자가 한 번에 여러 제품을 주문할 수 있습니다. 또한 목록 보기에 대한 기본 제공 검색 및 정렬 옵션을 제공합니다. 이것은 사용자가 원하는 제품을 매우 쉽게 찾을 수 있기 때문에 매우 편리한 기능이 될 수 있습니다.

주요 특징들:

• 제품에 대한 테이블 형식 목록 보기 옵션
• 즉각적인 제품 검색 및 정렬 옵션
• 빠른 한 페이지 주문
• 사용하기 쉬운 인터페이스
• 빠른 "장바구니에 추가" 버튼

가격:

WooCommerce Product Table은 연간 499달러부터 시작하는 프리미엄 플러그인입니다. 여기에는 30일 환불 보장 및 우선 지원이 포함된 20개의 사이트 라이선스가 포함됩니다.

몇 가지 플러그인을 살펴보았으므로 이제 사용 방법도 살펴보겠습니다. 하지만 시작하기 전에 WooCommerce를 어떤 단계도 빠뜨리지 않고 올바르게 설정하고 호환되는 WooCommerce 테마 중 하나를 사용하는지 확인하십시오.

플러그인을 사용하여 WooCommerce 제품 목록 보기 만들기

WooCommerce 제품 목록 보기를 생성하기 위해 이 데모에서는 WooCommerce용 그리드/목록 보기를 사용할 것입니다. 무료이며 사용이 매우 간편하며 제품에 대한 목록 보기를 만드는 간단한 솔루션입니다.

그러나 플러그인을 사용하려면 먼저 플러그인을 설치하고 활성화해야 합니다.

1. 플러그인 설치 및 활성화

플러그인을 설치하려면 WordPress 대시보드에서 플러그인 > 새로 추가 로 이동합니다. 그런 다음 플러그인에 대한 키워드를 검색하고 찾은 후 지금 설치 를 클릭합니다.

잠시 후 설치가 완료됩니다. 마지막으로 플러그인이 설치된 후 활성화 합니다.

프리미엄 플러그인을 사용하려면 수동으로 업로드하여 설치해야 합니다. 자세한 내용은 WordPress 플러그인을 수동으로 설치하는 자세한 가이드를 참조하세요.

2. 플러그인 설정 구성

플러그인을 활성화하면 설정을 구성하여 WooCommerce 제품 목록 보기를 만들 수 있습니다. WordPress 대시보드에서 BeRocket > 그리드/목록 보기 를 엽니다. 여기에서 제품 목록 보기에 대한 모든 사용자 정의 옵션을 사용할 수 있습니다.

세 가지 주요 사용자 정의에는 버튼, 제품 수 및 사용자 정의 CSS가 포함됩니다.

2.1. 버튼 옵션

플러그인은 제품 의 그리드 또는 목록 보기를 토글하는 버튼에 대한 수많은 사용자 정의를 제공합니다.

일반 옵션에는 웹 사이트의 데스크톱 및 모바일 보기에 대한 기본 버튼 스타일이 포함됩니다. 페이지에 고정 버튼 스타일을 추가할 수도 있습니다. 마찬가지로, 페이지에 표시할 버튼 위치를 왼쪽, 오른쪽, 메뉴 또는 페이지 매김 위 또는 메뉴 바로 아래에서 조정할 수도 있습니다.

이러한 옵션과 함께 버튼의 최대 모바일 너비, 사용자 정의 클래스 및 패딩을 편집할 수도 있습니다.

또한 플러그인에서 사용할 수 있는 버튼 사전 설정 및 스타일이 몇 가지 더 있습니다. 존재하는 버튼을 선택하고 상세한 사전 설정 옵션으로 더 편집할 수 있습니다. 또한 버튼 너비, 높이, 텍스트 크기, 줄 높이 등으로 버튼 스타일을 변경할 수도 있습니다.

또한 일반 버튼, 마우스 오버 버튼 및 선택한 버튼 스타일을 사용자 지정할 수도 있습니다. 각각에는 배경색, 테두리 너비 및 색상, 그림자 옵션에 대한 조정이 포함됩니다.

필요한 모든 수정을 수행하고 변경 사항 저장 을 클릭합니다.

2.2. 제품 개수 옵션

제품 목록 보기를 생성할 때 WooCommerce 플러그인용 그리드/목록 보기를 사용하여 제품 개수 옵션을 조정할 수도 있습니다. 첫째, 제품 수를 사용하거나 사용하지 않도록 설정할 수 있습니다.

활성화하면 페이지당 제품, 제품 개수 값 및 스플리터 값에 대한 입력을 추가로 추가할 수 있습니다. 제품 개수의 위치는 고유한 버튼 옵션 및 이를 표시할 위치와 함께 여기에서 설정할 수도 있습니다.

2.3. 사용자 정의 CSS/자바스크립트

플러그인을 사용하면 WooCommerce 제품 목록 보기를 만들 때 사용자 정의 CSS 또는 JavaScript를 추가 할 수도 있습니다. 사용자 정의 CSS 및 JavaScript를 추가하기 위한 지정된 스크립트 상자가 있습니다. 자바스크립트는 리스트나 그리드 스타일 설정 전후, 쿠키, 그리드/리스트 선택 버튼 등 다양한 상황에서 추가될 수 있습니다.

여기에서 Font Awesome CSS 파일을 비활성화하거나 Font Awesome 버전을 선택할 수도 있습니다.

필요한 사용자 정의 CSS 또는 JavaScript를 추가한 후 변경 사항을 저장하는 것을 잊지 마십시오.

쇼핑 페이지를 미리 보면 그리드와 목록 보기 사이를 전환하는 토글을 볼 수 있습니다. 제품 개수도 여기에 표시되며 제품 설명도 제품과 함께 포함됩니다.

그리고 아래 데모와 같이 목록 보기 버튼 을 클릭하여 제품 목록 보기로 전환할 수 있습니다.

고객은 필요한 경우 그리드 보기로 다시 전환할 수도 있습니다. 그리드 보기 버튼 을 클릭하기만 하면 됩니다.

그게 다야! 이것이 WooCommerce 제품 목록 보기를 만들고 고객이 그리드와 목록 보기 간에 전환할 수 있도록 하는 방법입니다.

보너스: WooCommerce에서 카탈로그 모드 활성화

우리는 이미 WooCommerce 제품 목록 보기를 만드는 가장 쉬운 방법 중 하나를 제시했습니다. 카탈로그 웹 사이트에서 제품을 선보일 때 매우 유용합니다. 그러나 WooCommerce에서 카탈로그 모드를 활성화 하는 데 도움이 되도록 간단한 가이드도 보너스로 제공합니다.

그렇게 하려면 테마의 핵심 파일 중 하나인 웹사이트의 functions.php 파일에 몇 가지 코드 조각을 추가 해야 합니다. 따라서 다음 단계를 위한 하위 테마를 만들고 WordPress 테마를 업데이트할 때 변경 사항이 저장되도록 웹사이트를 백업하세요. 도움이 필요한 경우 WordPress용 하위 테마 플러그인 중 하나를 사용하여 하위 테마를 만들 수도 있습니다.

하위 테마를 활성화한 후 모양 > 테마 파일 편집기 로 이동하여 테마의 functions.php 파일을 엽니다. 그런 다음 편집기 끝에 코드 스니펫을 추가 하고 파일 업데이트 를 시작할 수 있습니다.

테마 파일은 웹사이트의 활성 테마에 따라 다릅니다. 편집기가 약간 다르게 보일 수 있도록 여기에서 Divi 테마를 사용했습니다.

먼저 장바구니에 추가 버튼을 제거한 다음 제품 가격을 숨겨야 합니다. 따라서 편집기에서 다음 코드 스니펫을 추가해야 합니다.

1. 장바구니에 담기 버튼 제거

다음 스크립트를 사용하여 쇼핑 페이지 및 제품 페이지의 장바구니에 추가 버튼을 숨길 수 있습니다. 따라서 테마의 functions.php 파일에 붙여넣기만 하면 됩니다.

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

이 기능은 WooCommerce 제품 페이지와 쇼핑 페이지 모두에서 장바구니에 추가 페이지를 제거합니다.

제품을 구매할 수 없도록 하려면 다음 코드 스니펫도 추가할 수 있습니다.

 add_filter( 'woocommerce_is_purchasable', '__return_false');

또한 장바구니에 추가 버튼을 "자세히 알아보기" 버튼으로 대체합니다.

2. 제품 가격 숨기기

WooCommerce에서 다양한 방법으로 제품 가격을 숨길 수 있습니다. 모든 사용자 또는 관리자를 제외한 모든 사람에게 숨길 수 있습니다.

모든 사용자의 제품 가격을 숨기려면 다음 스크립트를 사용하십시오.

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
기능 QuadLayers_remove_price($price){
반품 ;
}

또는 admin 을 제외한 모든 사람의 가격을 숨기려면 다음 스니펫을 사용하세요.

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
기능 QuadLayers_remove_price($price){
if ( is_admin() ) 반환 $price;
반품 ;
} 

또한 필요한 경우 상점 페이지에서만 제품을 숨길 수도 있습니다. functions.php 파일에 다음 코드 스니펫을 붙여넣기만 하면 됩니다.

 add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );
기능 remove_woocommerce_loop_price() {
if( ! is_shop() ) 반환; // 상점 페이지에서만 가격 숨기기
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}

잘했어요! 이제 WooCommerce 제품 목록 보기를 만들고 웹사이트에서 카탈로그 모드를 적절하게 활성화할 수 있습니다. 카탈로그 모드를 표시하는 다른 방법을 원하는 경우 WooCommerce에서 카탈로그 모드를 활성화하는 자세한 가이드가 있습니다. 마찬가지로 장바구니에 추가 버튼을 제거하거나 WooCommerce에서 가격을 숨기기 위해 추가 정보가 필요한 경우 해당 정보도 다루었습니다.

결론

지금 온라인 상점에 대한 WooCommerce 제품 목록을 만들 수 있기를 바랍니다. 고객이 제품 목록 보기로 전환할 수 있도록 전용 플러그인을 쉽게 사용할 수 있습니다. 플러그인을 사용하면 다른 많은 사용자 정의 옵션과 함께 필요한 경우 그리드 보기로 다시 전환할 수도 있습니다.

또한 제품 목록 보기도 표시할 수 있는 웹사이트에서 쇼핑 페이지 활성화 카탈로그 모드를 사용자 정의하는 몇 가지 기본 단계를 제공했습니다. WooCommerce 페이지를 더 변경하려면 WooCommerce Checkout Manager와 같은 플러그인을 사용하여 장바구니 페이지, 카테고리 페이지 또는 체크아웃 페이지를 사용자 정의할 수도 있습니다.

그렇다면 문제 없이 온라인 스토어에 제품 목록 보기를 추가할 수 있습니까? 당신은 그것을 시도한 적이 있습니까? 의견에 알려주십시오.

한편, 다음은 귀하가 관심을 가질 만한 몇 가지 추가 기사입니다.

• WooCommerce 제품 갤러리를 사용자 정의하는 방법
• 장바구니 메시지에 제품 변경 없음
• WooCommerce Checkout에 제품 이미지를 추가하는 방법