[워드프레스] 우커머스에서 특정 카테고리의 상품 나열하기

우커머스(WooCommerce)에서는 카테고리 내의 상품을 나열할 수 있는 숏코드를 제공합니다. 우커머스에서 지원하는 숏코드 목록은 아래 글을 참고해보세요.

특정 카테고리의 상품 목록을 표시하는 우커머스 숏코드는 다음과 같습니다.

[product_category category="appliances"]

Enfold에서 우커머스 카테고리 상품 나열하기

이것을 응용하여 원하는 카테고리의 상품을 나열할 수 있습니다. 예를 들어, 인기 워드프레스 테마인 Enfold에서 Avia Layout Builder에 다음과 같은 텍스트 블록(Text Block)을 추가하여 "Men" 카테고리의 상품을 나열할 수 있습니다.

엔폴드에서 우커머스 상품 카테고리 품목 나열하기

위에서는 컬럼 수를 4로 설정했고(기본이 "4"이므로 이 부분은 필요 없을 것 같습니다), 페이지당 항목 수를 "4"로 설정했습니다. 만약 4개씩 2줄로 표시하려면 per_page의 값을 "8"로 설정하면 될 것입니다. "Women" 카테고리에 대해서도 동일하게 만들어서 테스트해 보면 아래와 같이 표시됩니다.

우커머스 카테고리 리스트

"남성복", "여성복" 글자 부분은 적절한 그림으로 대체하거나 CSS를 통해 원하는 스타일로 조정하면 됩니다.

아바다에서 우커머스 카테고리 상품 나열하기

참고로 오랫동안 판매 1위를 달리고 있는 아바다(Avada) 테마에서는 우커머스 숏코드를 매우 쉽게 추가할 수 있도록 "Woo Shortcodes" 요소를 별도로 제공합니다.

아바다 우커머스 숏코드 요소

위의 그림과 같이 Woo Shortcodes 요소에서 Shortcode를 "Prodcuts by category slug"를 선택하면 아래에 쉽게 수정할 수 있도록 숏코드가 자동으로 생성됩니다. 따라서 굳이 우커머스 숏코드를 확인하여 숏코드를 직접 만들 필요가 없도록 배려하고 있습니다.

엘리멘터 페이지 빌더

엘리멘터 프로를 사용하는 경우에는 Products 위젯을 활용하여 전체 상품 또는 특정 카테고리 상품들을 나열할 수 있습니다.

엘리멘터 페이지 빌더 상품 위젯

엘리멘터 무료 버전을 사용하는 경우에는 숏코드 위젯을 사용하여 숏코드로 상품을 나열할 수 있습니다("워드프레스 엘리멘터 페이지 빌더에 숏코드 추가하기" 참고).

다른 방법

만약 위와 같은 방법이 마음에 들지 않으면 Content Slider를 사용하면 됩니다. 문제는 Enfold에서 기본적으로 제공하는 Content Slider는 우커머스 카테고리를 지원하지 않습니다. 이 경우 외부 플러그인을 사용할 수 있습니다. "워드프레스용 콘텐츠 슬라이더 플러그인 소개"에서 Master Slider를 참고해보시기 바랍니다. Master Slider는 우커머스를 지원한다고 하네요.

참고:

댓글 남기기

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드