WooCommerce 제품 쇼트코드 마스터하기: 동적 제품 표시

전자상거래의 세계는 유연성을 기반으로 합니다. 성공적인 온라인 스토어는 상황에 맞춰 즉시 변화하고, 적응하고, 특정 제품을 강조할 수 있어야 합니다. 많은 스토어 운영자들이 이를 위해서는 개발자가 필요하다고 생각하지만, 사실 WooCommerce 제품을 표시하고, 사용자 지정 그리드를 만들고, 동적 페이지를 구축 단 한 줄의 코드도 작성하지 않고

완벽하게 활용하는 방법을 배우게 됩니다 [products] . 이 쇼트코드의 속성을 사용하여 모든 페이지, 게시물 또는 위젯 영역에 멋진 맞춤형 제품 표시를 만드는 방법을 익힐 수 있습니다. 홈페이지에 몇 가지 제품을 추가하려는 초보자부터 복잡한 필터링 기능을 갖춘 랜딩 페이지를 구축해야 하는 고급 사용자까지, 이 가이드는 모든 사용자에게 완벽한 참고 자료가 될 것입니다.

기본 사항: 필수 WooCommerce 단축 코드 목록

대해 자세히 알아보기 전에 [products] , 숏코드가 무엇이며 워드프레스에서 어떤 역할을 하는지 먼저 이해해 보겠습니다. 숏코드는 [shortcode]포함하여 텍스트를 추가할 수 있는 모든 곳에서 사용할 수 있습니다 구텐베르크 블록, Elementor와 같은 페이지 빌더를.

에 초점을 맞추고 있지만 [products] , WooCommerce는 필수적인 스토어 페이지에 사용할 수 있는 다양한 쇼트코드 목록을 제공합니다. 이러한 쇼트코드는 일반적으로 WooCommerce 설정 과정에서 자동으로 생성되는 페이지에 배치됩니다.

• [woocommerce_cart] – 장바구니 페이지 내용을 표시합니다.
• [woocommerce_checkout] – 결제 양식을 표시합니다.
• [woocommerce_my_account] – 고객 계정 대시보드를 표시합니다.
• [woocommerce_order_tracking] – 고객이 주문을 추적할 수 있는 양식을 제공합니다.

. [products] 쇼트코드는 모든 쇼트코드 중에서 가장 활용도가 높습니다. 이 쇼트코드는 메인 쇼핑 페이지 외의 다른 페이지나 게시물에 제품을 표시하는 데 핵심적인 역할을 합니다. 기본 구조는 간단히 [products]입니다 이쇼트코드 자체만으로는 최신 제품들을 그리드 형태로 표시합니다. 하지만 진정한 힘은 이 쇼트코드의 속성에서 나옵니다.

더 알아보기: 원활한 온라인 판매를 위한 워드프레스 쇼핑 카트 설정 방법

의 구조 [products] 쇼트코드

WooCommerce 제품 쇼트코드의 진정한 유연성은 속성에서 비롯됩니다. 속성은 대괄호 안에 추가하여 표시할 제품과 그 모양을 제어하는 ​​매개변수입니다. 속성은 쇼트코드에 특정 명령을 내리는 명령어와 같다고 생각하면 됩니다.

다음은 가장 자주 사용하게 될 속성들을 간단히 살펴본 것입니다. 이는 필수적인 WooCommerce 제품 쇼트코드 목록입니다.

기인하다	기능	가능한 값
한계	표시할 제품 수를 설정합니다.	임의의 양의 정수 (예: 8, 12)
컬럼	그리드의 열 개수를 설정합니다.	1 에게 6
정렬 기준	제품 정렬 방식을 지정합니다.	날짜, 제목, ID, 인기, 평점, 랜드
주문하다	정렬 순서를 설정합니다.	ASC ) 또는 DESC )
아이즈	제품 ID로 특정 제품을 표시합니다.	쉼표로 구분된 제품 ID 목록 (예: "1,2,3")
스쿠스	SKU별로 특정 제품을 표시합니다.	쉼표로 구분된 제품 SKU 목록 (예: "hoodie-01,tee-02")
범주	제품 카테고리 슬러그 또는 ID로 필터링합니다.	카테고리 슬러그를 쉼표로 구분하여 나열합니다(예: "clothing,accessories").
세일 중	현재 할인 중인 제품을 보여줍니다.	진실
시계	제품 노출도별 필터입니다.	표시되는, 카탈로그, 검색, 추천
페이지네이션	제품 목록에 페이지네이션 기능을 활성화합니다.	진실
수업	그리드에 사용자 지정 CSS 클래스를 추가합니다.	임의의 CSS 클래스 이름(예: "my-custom-grid")

를 사용해야 한다는 점을 기억하세요"". 흔히 저지르는 실수 중 하나는 중괄호("")를 사용하는 것인데, 이렇게 하면 숏코드가 작동하지 않습니다.

참고: WooCommerce 상품이 상점 페이지에 표시되지 않는 문제 해결 방법: 빠른 해결책

제품 선택 마스터하기: 실용적이고 고급스러운 단축 코드 사용 사례

이제 실제 WooCommerce 제품 쇼트코드 예시를 살펴보고 효과적으로 사용하는 방법을 알아보세요. 이 예시들을 통해 어떤 페이지에서든 동적이고 맞춤 설정 가능한 제품 섹션을 만들 수 있습니다.

주요 상품 표시

WooCommerce의 추천 상품 쇼트코드는 홈페이지에 베스트셀러 또는 홍보 상품을 효과적으로 보여주는 좋은 방법입니다. 이 쇼트코드를 사용하려면 먼저 WooCommerce 대시보드에서 상품을 "추천" 상품으로 설정해야 합니다. "상품" 메뉴로 이동하여 상품 위에 마우스를 올리고 별 모양 아이콘을 클릭하세요. 별 모양 아이콘이 파란색으로 바뀌면 해당 상품이 추천 상품으로 설정된 것입니다.

단축 코드: [products visibility="featured"]

이 단축 코드는 추천 상품으로 표시한 모든 제품을 보여줍니다. 다른 속성과 조합하여 표시 결과를 세분화할 수 있습니다.

예시: 4열 그리드에 추천 상품 8개를 무작위로 정렬하여 표시합니다. [products visibility="featured" limit="8" columns="4" orderby="rand"]

제품 ID 또는 SKU별 특정 제품

처럼 특정 제품 한두 개만 표시해야 하는 경우가 있습니다 랜딩 페이지. 이때 WooCommerce 제품 ID 숏코드가 유용하게 사용됩니다. ids 속성에 쉼표로 구분된 제품 ID 목록을 입력하면 됩니다.

단축 코드: [products ids="12, 35, 78"]

제품 SKU를 사용하는 것도 좋은 방법인데, 기억하기가 더 쉽습니다.

단축 코드: [products skus="shirt-01, pants-02"]

제품 ID와 SKU를 찾는 방법: WordPress 대시보드에서 WooCommerce → 제품으로 이동합니다. 제품 ID는 제품 이름 옆의 작은 열에 표시됩니다. 제품 제목 위에 마우스를 올리면 URL에서 ID를 확인할 수도 있습니다. SKU는 제품 편집 페이지의 "제품 데이터" 섹션에서 확인할 수 있습니다.

카테고리별 필터링

WooCommerce의 제품 카테고리 숏코드는 가장 강력한 기능 중 하나입니다. 이를 통해 "신상품 티셔츠" 섹션이나 "액세서리" 페이지처럼 특정 제품 유형 전용 섹션을 만들 수 있습니다.

단축 코드: [products category="t-shirts"]

카테고리의 슬러그를 찾으려면 WooCommerce → 제품 → 카테고리. 슬러그는 URL에서 사용하기 편리한 카테고리 이름입니다.

예시: "후디"와 "티셔츠" 카테고리에서 각각 9개의 제품을 3개의 열로 표시합니다. [products category="hoodies, t-shirts" limit="9" columns="3"]

할인 상품 및 베스트셀러 상품 표시

판매 전용 페이지를 만드는 것은 훌륭한 마케팅 전략입니다. 쇼트코드를 사용하면 쉽게 만들 수 있습니다.

할인 상품 표시를 위한 단축 코드: [products on_sale="true"]

마찬가지로, 실적이 가장 좋은 제품을 선보일 수 있습니다.

베스트셀러 단축 코드: [products best_selling="true"]

사용자 지정 디스플레이를 위한 필터 조합

여러 속성을 조합할 때 진정한 마법이 일어납니다. 이를 통해 정확하고 매력적인 제품 그리드를 만들 수 있습니다.

예시: "의류" 카테고리에서 가장 인기 있는 할인 상품 12개를 4개의 열로 표시합니다. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]

이러한 세밀한 제어를 통해 고객의 관심을 사로잡는 독특한 쇼핑 경험을 만들 수 있습니다.

고급 표시 옵션: 페이지네이션, 정렬 및 사용자 지정 스타일 지정

WooCommerce 제품 쇼트코드는 제품을 선택하고 페이지에서 제품의 모양과 동작을 제어합니다.

대규모 제품 목록을 위한 페이지네이션

방지하기 위해 페이지네이션이 필요합니다 로딩 시간 지연 저하를 사용자 경험. ` paginate` 속성이 이를 완벽하게 처리합니다.

쇼트코드: [products paginate="true" per_page="12"]

속성 `per_page` 와 함께 작동하여 `paginate` 각 페이지에 표시되는 항목 수를 지정합니다. 이는 페이지네이션 기능을 갖춘 WooCommerce 제품 숏코드에서 매우 중요한 요소입니다.

정렬 및 순서 지정

사용하여 제품 순서를 지정할 수 있습니다 orderby 및 order .

• orderby="price": 가격순으로 제품을 정렬합니다.
• orderby="rating": 고객 평균 평점을 기준으로 정렬합니다.
• `orderby="popularity"`: 구매 횟수를 기준으로 정렬합니다.
• orderby="rand": 페이지를 로드할 때마다 제품을 무작위로 섞습니다.

속성 `order` 은 정렬 방향을 지정합니다. ` order="ASC"` 는 오름차순(예: 낮은 가격에서 높은 가격)을, ` order="DESC"` 는 내림차순(예: 높은 가격에서 낮은 가격)을 나타냅니다.

예시: 평점이 높은 제품부터 순서대로 10개의 제품을 표시합니다. [products limit="10" orderby="rating" order="DESC"]

클래스를 사용한 사용자 지정 스타일링

디자이너나 개발자에게 있어 ` class` 속성은 WooCommerce 제품 쇼트코드를 맞춤 설정하는 데 매우 유용한 도구입니다. 이 고유한 CSS 클래스를 . 이를 통해 사이트의 다른 제품 그리드에 영향을 주지 않고 쇼트코드 출력에 사용자 지정 스타일을 적용할 수 있습니다.

단축 코드: [products class="hero-products"]

그런 다음 사용자 지정 CSS에서 이 클래스를 대상으로 지정할 수 있습니다. ` .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }`

호환성 팁

WooCommerce 제품 쇼트코드는 클래식 편집기, 구텐베르크 블록 편집기(전용 "쇼트코드" 블록 사용), 그리고 대부분의 주요 페이지 빌더와 호환됩니다. 또한 반응형 디자인으로 다양한 화면 크기에 맞춰 자동으로 조정됩니다. 하지만 쇼트코드가 올바르게 표시되는지 확인하기 위해 데스크톱과 모바일 환경에서 모두 테스트하는 것이 좋습니다.

전략적 활용 사례: 제품 단축 코드를 사용해야 하는 경우와 이유

구문을 아는 것과 전략적으로 사용하는 것은 별개의 문제입니다. WooCommerce 제품 숏코드를 활용하여 스토어를 개선.

• 홈페이지: 방문객들이 가장 중요한 제품을 바로 찾을 수 있도록 "신상품", "베스트셀러", "할인 상품" 섹션을 따로 만드세요.

• 블로그 게시물: 블로그 게시물 안에 단일 제품 또는 소규모 제품 그리드를 삽입할 수 있습니다. 예를 들어, 새 재킷 스타일링에 대한 블로그 게시물을 작성하는 경우, 쇼트코드를 사용하여 해당 재킷과 어울리는 다른 제품들을 게시물 바로 아래에 표시할 수 있습니다.

• 카테고리별 랜딩 페이지: 특정 카테고리에 맞는 맞춤 랜딩 페이지를 만들 수 있습니다. 고유한 문구를 추가한 후, 단축 코드를 사용하여 해당 카테고리의 제품만 표시할 수 있습니다.

• 마케팅 랜딩 페이지: 새로운 캠페인을 위해 특정 태그가 있는 제품이나 신규 컬렉션의 제품을 소개하는 랜딩 페이지를 만들 수 있습니다. 맞춤형 WooCommerce 제품 쇼트코드를 활용하면 전환율을 높일 수 있습니다.

자세히 보기: WooCommerce 결제 페이지에 팁 옵션을 추가하는 방법

문제 해결 및 최적화 모범 사례

간단한 도구인 숏코드를 사용하더라도 문제가 발생할 수 있습니다. 일반적인 문제를 해결하고 사이트 성능을 향상시키는 방법을 알아보겠습니다.

• 오타를 확인하세요: 괄호가 누락되었거나, 속성 이름에 오타가 있거나, 따옴표 사용이 잘못된 경우 단축 코드가 일반 텍스트로 표시될 수 있습니다. 코드를 다시 한번 확인하세요.

• 제품 ID 및 카테고리 슬러그 확인: 올바른 제품 ID, SKU 및 카테고리 슬러그를 사용하고 있는지 확인하세요. 가장 쉬운 확인 방법은 워드프레스 대시보드를 이용하는 것입니다.

• 캐싱 및 성능: 하나의 숏코드에 너무 많은 제품을 표시하면 사이트 속도가 느려질 수 있습니다. limit 및 paginate 속성을 사용하여 제품 수를 제어하세요. 페이지 로딩 속도를 높이려면 성능 좋은 캐싱 플러그인을 사용하는 것이 좋습니다.

• 고급 기능 요구 사항: 동적 필터링, AJAX 페이지네이션 또는 기타 복잡한 기능이 필요한 경우 전용 플러그인이 필요할 수 있습니다. WooCommerce Product Table 또는 WooCommerce Product Filters와 같은 도구를 사용하면 숏코드의 기능을 크게 확장할 수 있습니다.

결론: 역동적인 WooCommerce 상품 진열을 위한 툴킷

WooCommerce 제품 쇼트코드는 쇼핑몰 운영자에게 혁신적인 변화를 가져다줍니다. 간단하면서도 강력한 이 기능을 통해 웹사이트 전반에 걸쳐 역동적이고 매력적이며 고도로 맞춤화된 제품 디스플레이를 만들 수 있습니다. [products] 쇼트코드와 그 속성을 숙달하면 정적인 페이지를 매력적인 상품 진열 도구로 탈바꿈시킬 수 있습니다.

홈페이지에 추천 상품 섹션을 만드는 것과 같은 기본부터 시작하여, 더욱 정교한 조합을 시도해 보세요. 독창적인 랜딩 페이지를 구축하고 블로그 콘텐츠에 전략적으로 상품을 삽입할 수 있습니다. 이 쇼트코드를 사용하면 코드를 전혀 작성하지 않고도 전문적이고 사용자 친화적인 온라인 스토어를 만들 수 있습니다. 이 가이드를 북마크해 두고 지금 바로 더 나은 상품 진열을 시작해 보세요!

WooCommerce 제품 단축 코드 관련 FAQ