WooCommerce 단축 코드: 2021년 최고의 가이드

게시 됨: 2020-01-11

WooCommerce 비즈니스를 운영하는 경우 단축 코드에 대해 들어본 적이 있을 것입니다. 긴 코드 줄을 작성하지 않고도 온라인 상점의 다양한 측면을 추가하고 사용자 지정할 수 있는 작은 조각입니다. 이 가이드에서는 WooCommerce 단축 코드가 무엇인지, 왜 사용해야 하는지, 어떻게 활용하는지 살펴보겠습니다 .

WooCommerce 단축 코드: 알아야 할 모든 것

WordPress를 사용하는 경우 WooCommerce에 익숙할 것입니다. 현재 모든 WordPress 전자 상거래 웹 사이트의 93,7%가 유명한 WooCommerce 플러그인을 사용합니다. WooThemes에서 개발한 이 완전 사용자 정의 가능한 오픈 소스 플랫폼은 다른 애드온으로 시작했지만 곧 수백만 개의 다운로드로 시작되어 WordPress 보드의 관심을 끌었습니다. 현재까지 이미 7천만 번 다운로드되었으며 온라인 상점의 총 28%를 지원하는 최고의 전자 상거래 플러그인이 되었습니다.

그 명성과 성공에도 불구하고 WooCommerce 팀은 더 나은 서비스를 만들기 위해 지속적으로 노력하고 있습니다. 개발 경로 전반에 걸쳐 사용자가 사이트를 사용자 정의할 수 있도록 다양한 유형의 여러 단축 코드를 제공했습니다. 이러한 단축 코드를 사용하여 상점을 변형하고 인터페이스, 체크아웃, 기능, 제품 나열 프로세스 등을 사용자 정의할 수 있습니다.

따라서 단축 코드를 최대한 활용하는 데 도움이 되도록 이 가이드에서 다음을 살펴보겠습니다.

단축번호에 대한 간략한 설명
비즈니스에 필요한 이유
WooCommerce 단축 코드 목록
그것들을 최대한 활용하는 방법

WooCommerce 단축 코드는 무엇입니까?

기본부터 시작하겠습니다. WooCommerce 단축 코드는 긴 코드를 작성하지 않고도 전자 상거래 사이트에 기능을 구현하거나 콘텐츠를 표시하는 데 도움이 되는 작은 스니펫입니다 . 즉, 사이트 콘텐츠와 동적으로 상호작용할 수 있는 매크로입니다 .

상점 어디에서나 단축 코드를 사용하여 사용자 정의하거나, 제품을 과시하거나, 클릭 유도문안 버튼만 사용할 수 있습니다. 그리고 가장 좋은 점은 사용을 시작하는 데 코딩 지식이 필요하지 않다는 것입니다. 온라인 비즈니스에 대한 불타는 열정과 매장에서 원하는 것에 대한 깊은 이해만 있으면 됩니다. 나머지는 숏코드가 깔끔하고 깔끔하게 처리해 드립니다.

간단히 말해서 WooCommerce 단축 코드는 세 가지 면에서 유용합니다.

긴 코드 줄을 작성할 필요가 없기 때문에 시간을 절약할 수 있어 다른 작업에 더 많은 시간을 할애할 수 있습니다.
게시물 콘텐츠에 마크업을 추가하지 않기 때문에 상점 소유자는 나중에 페이지 스타일을 편집할 수 있습니다.
더 많은 유연성. 이는 사용자가 설정한 매개변수에 따라 다르지만 상황에 따라 동일한 단축 코드를 적용할 수 있습니다.

WooCommerce 단축 코드가 필요한 이유는 무엇입니까?

아직도 확신이 서지 않습니까? 다시 생각해 보세요. WooCommerce 단축 코드는 당신이 상상하는 것보다 훨씬 더 많은 일을 할 수 있습니다.

첫째, 단축 코드를 사용하면 사이트에 대한 모든 권한이 부여됩니다 . 즉, 개발자의 도움을 요청하지 않고도 매장 어디에서나 제품을 자유롭게 표시하고 클릭 유도문안 버튼 또는 모든 유형의 버튼을 추가할 수 있습니다. 또한 길고 복잡한 코드로 작업할 필요가 없습니다.

이것은 온라인 상점에서 다양한 전략을 시도하려는 사람들에게 적합합니다. 예를 들어, 다른 상점과 마찬가지로 고객에게 표준 판매 프로세스를 안내하는 대신 인기 있는 게시물 중 하나에 장바구니에 추가 버튼을 표시하여 전환을 유도할 수 있습니다. 그리고 가장 좋은 점은 단축 코드를 사용하여 사이트에 배치한 많은 클릭 유도문안 버튼 중에서 선택할 수 있다는 것입니다.

또한 WooCommerce 단축 코드를 사용하면 홈페이지에 제품을 추가하고 판매 중인 품목의 그리드를 만들어 고객에게 보여주고 원하는 곳에 인기 제품을 표시할 수 있습니다. 주문 추적 페이지 생성도 가능합니다! 그리고 이것이 바로 단축 코드의 마법입니다. 단축 코드는 상점을 사용자 정의할 수 있는 끝없는 옵션을 제공합니다 .

어떤 유형의 WooCommerce 단축 코드가 있습니까?

WooCommerce가 제공하는 단축 코드의 수를 말하기는 어렵기 때문에 카테고리별로 나열하겠습니다. 다음은 이 가이드에서 다룰 WooCommerce 단축 코드에 대한 간략한 개요입니다.

페이지 단축 코드
제품 단축 코드(가장 강력한 카테고리임)
제품 페이지 단축 코드
관련 제품 단축 코드
장바구니에 담기 버튼 또는 URL 단축 코드

WooCommerce Shortcodes 를 최대한 활용하는 방법은 무엇입니까?

이제 각 유형의 단축 코드가 수행할 수 있는 작업과 이를 최대한 활용하는 방법을 살펴보겠습니다.

1. 페이지 단축키

일반적으로 WordPress에는 단축 코드가 포함된 4개의 기본 페이지가 제공되므로 수동으로 추가할 필요가 없습니다. 그러나 어떤 이유로 그렇지 않은 경우 단축 코드로 페이지를 다시 만들고 설정에서 명확히 할 수 있습니다.

페이지 단축 코드 내에서 다음을 찾을 수 있습니다.

카트

 [ woocommerce_cart _카트 ]

장바구니 페이지에 사용되며 고객이 장바구니에 제품을 추가하면 장바구니 콘텐츠를 표시하는 데 도움이 됩니다. 또한 쿠폰 코드, 카트 비트 및 조각, 표준 카트 페이지의 기타 요소에 대한 인터페이스도 표시합니다. 이것은 간단한 단축 코드이므로 더 이상 조건이나 매개 변수를 추가하지 않습니다.

점검

 [ woocommerce_checkout _체크아웃 ]

고객이 원하는 모든 제품/서비스를 수집한 후 체크아웃을 클릭하면 체크아웃 단축 코드가 실행됩니다. 결제 방법, 청구 정보, 배송 정보 등과 같이 쇼핑객이 체크아웃 전에 확인해야 하는 모든 필수 정보를 표시합니다. 또한 추가 인수를 허용하지 않는 간단한 단축 코드입니다.

내 계정

 [ woocommerce_my_account ]

고객은 이름, 이메일 주소, 비밀번호와 같은 프로필 세부 정보는 물론 배송 및 청구서 수신 주소와 같은 주문 세부 정보를 보고 수정할 수 있어야 합니다. 이 단축 코드를 사용하여 사용자는 해당 세부 정보를 보고, 편집하고, 업데이트할 수 있습니다. 또한 현재 구매자에 대한 정보를 표시하는 인수가 포함되어 있습니다.

주문 추적 양식

 [ woocommerce_order_tracking _주문_추적 ]

앞의 세 페이지 단축 코드와 달리 이 단축 코드는 기본적으로 자동으로 생성되지 않지만 고객이 진행 중인 주문의 상태를 보고 추적할 수 있도록 추가할 수 있습니다. 주문 상태를 확인하려면 구매자는 주문 추적 양식에 주문 세부 정보를 입력해야 합니다.

개별 페이지에 이 WooCommerce 단축 코드를 사용하거나 다른 단축 코드와 결합하여 추적 양식을 표시할 수 있습니다. 예를 들어 내 계정 페이지에서 이 단축 코드를 사용하여 고객이 추적 양식에 액세스하도록 할 수 있습니다.

2. 제품 단축 코드

제품 단축 코드를 사용하려면 WooCommerce 3.2 이상 버전이 필요합니다. 이 버전을 사용하면 모든 종류의 제품 디스플레이에 제품 단축 코드를 사용할 수 있습니다. 이전 버전이 있는 경우 각 유형의 제품 그룹에 대해 다른 단축 코드를 사용해야 하므로 이 문서를 확인하십시오.

 [ products ]

2.1 제품 단축 코드 속성

제품 단축 코드를 사용하는 경우 게시물 ID, SKU, 카테고리, 속성 등으로 제품을 필터링할 수 있는 다양한 조건에 따라 표시할 제품을 지정해야 합니다. 또한 페이지 매김, 무작위 정렬 및 제품 태그를 지원합니다.

몇 가지 제품 단축 코드를 살펴보겠습니다.

제품 수량 제한

limit 속성을 사용하여 표시되는 제품 수에 대한 제한을 설정할 수 있습니다. 예를 들어 다음을 사용하여 표시할 제품 수를 8개 항목으로 제한할 수 있습니다.

 [ products limit="12" ]

. 기본적으로 제한은 "-1"이며 이는 모든 제품이 표시됨을 의미합니다.

제품 레이아웃 변경

WooCommerce 단축 코드를 사용하면 레이아웃을 변경하여 제품 디스플레이를 다양화할 수도 있습니다. 고객의 선호도에 따라 다음 속성 중에서 선택하기만 하면 됩니다: 열, 페이지 매김 또는 순서 지정.

ㅏ. 열

특정 수의 열을 설정하려면 'columns' 속성을 추가하고 원하는 수를 명확히 해야 합니다. 따라서 각 열에 다른 제품이 포함된 6개의 열이 필요한 경우 단축 코드를 사용할 수 있습니다.

 [ products limit="12" columns="4" ]

비. 페이지 매김

또 다른 예는 제품을 다른 페이지로 나누는 paginate 속성입니다. 이 단축 코드를 사용하여 각 페이지에 표시되는 항목 수를 지정할 수 있습니다.

이를 사용하려면 paginate = "true"로 설정하고 다음 단축 코드를 입력합니다.

 [ products limit="12" columns="4" paginate="true" ]

씨. "orderby"로 제품 정렬

orderby 속성을 사용하면 조건을 추가하여 원하는 대로 표시하기 위해 여러 기준에 따라 제품을 정렬할 수 있으므로 광범위한 옵션이 열립니다. 여기에는 다음이 포함됩니다.

- id: 제품 id별로 제품을 표시합니다.
- 인기도 : 이 속성을 사용하면 가장 많이 구매한 제품이 먼저 표시됩니다.
- 제목 : 제목별로 제품을 정렬합니다. 이것이 orderby의 기본 순서입니다.
- 등급 : 제품을 분류하는 또 다른 흥미로운 방법은 평균 등급 값을 기반으로 하는 것입니다.
- date : 게시된 날짜를 기준으로 항목을 정렬합니다. 기본적으로 가장 오래된 제품이 먼저 표시됩니다. 그러나 날짜 속성을 사용하여 이를 변경할 수 있습니다.
- rand : 이 속성을 사용하면 페이지를 다시 로드할 때 제품의 순서를 변경할 수 있습니다. 그럼에도 불구하고 캐싱이 활성화되고 제품이 고정된 순서로 저장되는 사이트에서는 이 속성이 작동하지 않을 수 있습니다.
- menu_order : 메뉴 주문을 설정한 경우에만 작동하며 해당 주문에 따라 제품을 표시합니다. 가장 낮은 숫자가 먼저 표시됩니다.

더 많은 사용자 정의를 원하면 한 단계 더 나아가 옵션 사이에 공백을 추가하여 이러한 옵션을 결합할 수 있습니다. 예를 들어 다음과 같이 인기도에 따라 6개의 제품 열이 순서대로 표시되도록 단축 코드를 혼합할 수 있습니다.

 [ products limit="12" columns="4" orderby="popularity" ]

더 많은 제품 속성

WooCommerce에는 " products" 단축 코드와 결합하여 사용할 수 있는 몇 가지 제품 속성이 더 있습니다. 주요 기능 중 일부는 다음과 같습니다.

- SKU: SKU(재고 보관 단위)를 기준으로 제품을 표시할 수 있습니다. 여러 SKU를 추가하려면 쉼표로 구분하면 됩니다.
- on_sale : 이름에서 알 수 있듯이 이 속성은 상점의 모든 세일 제품을 표시합니다.
- 카테고리 : 카테고리별로 상품을 표시하는 것도 좋은 방법입니다. 슬러그를 쉼표로 구분하는 여러 범주를 가질 수 있습니다.
- best_sale : 가장 인기 있고 가장 많이 팔린 제품을 먼저 보여주고 싶을 때 좋은 옵션입니다.
- top_rated : 동일한 논리에 따라 최고 평점 항목을 표시할 수도 있습니다.
- class : 이 속성은 HTML 래퍼 클래스를 추가하여 사용자 정의 CSS를 사용하여 순서를 변경하는 데 도움이 됩니다.

예를 들어 베스트 셀러 제품을 행당 4개, 최대 12개 항목으로 표시하려는 경우 다음 단축 코드를 사용할 수 있습니다.

 [ products limit="12" columns="4" best_selling="true" ]

시계

이 속성을 사용하면 가시성 설정을 기반으로 제품을 표시할 수 있습니다. 일부 옵션은 다음과 같습니다.

- - 카탈로그 : 샵페이지에서만 볼 수 있는 상품을 검색합니다.
  - 검색: 검색 페이지에서만 볼 수 있는 상품을 보여줍니다.
  - visible: 쇼핑 페이지 및 검색 결과에 표시되는 제품을 검색할 때 앞의 두 가지를 조합한 것입니다.
  - hidden: 직접 URL로만 접속할 수 있는 상품을 보여줍니다.
  - 추천 : 추천으로 표시된 제품만 검색합니다.

예를 들어, 추천 제품을 행당 4개, 최대 12개 항목으로 표시하려는 경우 다음 단축 코드를 사용할 수 있습니다.

 [ products limit="12" columns="4" visibility="featured" ]

콘텐츠 제품 속성

제품 단축 코드에는 특정 페이지나 게시물에서 제품을 검색하는 데 사용할 수 있는 콘텐츠 제품 속성이 있습니다. 보다 구체적으로, 사용 가능한 속성 또는 속성 용어(이는 해당 속성의 변형임)를 기반으로 항목을 검색할 수 있습니다. 슬러그를 포함하고, 용어를 지정하고, 속성과 결합하여 이를 수행할 수 있습니다. 이것은 약간 혼란스러울 수 있으므로 각각에 대해 자세히 살펴보겠습니다.

- 속성: 슬러그를 둘러싸서 제품을 표시하는 데 도움이됩니다.
- 용어: 쉼표로 구분된 속성 용어를 언급합니다.
- term_operator: 속성을 표시하는 방법에 대한 더 많은 제어를 제공합니다. 세 가지 연산자가 있습니다.
  - AND : 선택한 모든 속성의 제품이 표시됩니다.
  - IN : 선택된 속성을 가진 상품을 보여줍니다.
  - NOT IN : 선택한 속성이 없는 제품을 표시합니다.

카테고리

콘텐츠 제품 속성과 동일한 논리에 따라 카테고리를 기반으로 항목을 표시할 수도 있습니다.

- - 카테고리: 표시할 카테고리를 선택하려면
  - cat_operator: 원하는 항목을 표시하는 조건을 적용할 수 있습니다.
    - AND: 표시된 제품은 선택한 모든 범주에 속해야 합니다.
    - IN: 표시된 제품은 선택한 범주 중 하나 이상에 있어야 합니다.
    - NOT IN: 표시된 제품은 선택한 카테고리에 속할 필요가 없습니다.
  - 쉼표로 구분된 게시물 ID 목록 또는 SKU 목록에 따라 제품을 표시할 수도 있습니다.
  - 제품 단축 코드에 속하는 몇 가지 추가 단축 코드/속성이 있습니다: 특수 속성, 제품 범주 및 제품 범주. 논리는 위에서 읽은 것과 매우 유사하지만 보고 싶은 경우 이를 확인할 수 있습니다.
  - 숏코드에 대해 더 알고 싶다면 이 페이지를 방문하여 8가지 시나리오를 살펴보세요.

예를 들어, 특정 카테고리의 제품을 행당 4개, 최대 12개의 항목으로 표시하려는 경우 다음 단축 코드를 사용할 수 있습니다.

 [ products limit="12" columns="4" category="hoodies, tshirts" ]

3. 제품 페이지 단축 코드

이 유형의 WooCommerce 단축 코드를 사용하면 제품 ID와 SKU의 두 가지 속성을 사용하여 다양한 제품 페이지를 표시할 수 있습니다. 이에 대한 코드는 .

다음 단축 코드를 모두 사용할 수도 있습니다.

 [ product_page ]

또는

 [ product_page sku="hoodie" ]

4. 관련 상품 단축번호

아마존이나 알리바바와 같은 전자 상거래 상점을 사용해 본 적이 있다면 제품을 볼 때 관련된 다른 항목이 표시되는 것을 눈치 챘을 것입니다. 예를 들어 텐트를 검색하면 유사한 다른 텐트와 침낭이 표시됩니다. 텐트가 필요한 경우 침낭에도 관심이 있을 가능성이 높기 때문입니다.

결과적으로 쇼핑객에게 관련 제품을 보여주는 것은 매출을 높이는 좋은 아이디어입니다. WooCommerce에서는 관련 제품 단축 코드로 가능합니다. 사용자에게 표시할 제품의 수를 정확히 지정할 수 있습니다. 예를 들어 4개의 제품을 표시하려는 경우 단축 코드는 다음과 같아야 합니다.

 [ related_products limit="4" ]

5. 장바구니 에 담기 버튼

장바구니에 추가 버튼은 매장에서 고객 경험을 개선하고 전환율을 높이는 또 다른 훌륭한 방법입니다. 그리고 가장 좋은 점은 매우 간단하다는 것입니다.

게시물이나 페이지에 제품의 가격과 장바구니에 추가 버튼을 표시하려는 경우 사용해야 하는 단축 코드는 다음과 같습니다.

 [ add_to_cart sku="hoodie" ]

WooCommerce 단축 코드를 사용하면 장바구니에 항목을 추가하는 대신 쇼핑객을 다른 URL로 리디렉션할 수도 있습니다. 이렇게 하려면 다음을 작성해야 합니다.

 [ add_to_cart_url ]

ID가 219인 제품의 경우.

WooCommerce에 유용한 단축 코드 목록

마지막으로 사이트에서 사용할 수 있는 가장 유용한 WooCommerce 단축 코드 목록입니다.

장바구니 페이지 단축 코드.

 [ woocommerce_cart _카트 ]

체크아웃 페이지

 [ woocommerce_checkout _체크아웃 ]

사용자 계정.

 [ woocommerce_my_account ]

주문 추적 양식.

 [ woocommerce_order_tracking _주문_추적 ]

제품 단축 코드.

 [ products ]

주요 제품.

 [ featured_products ]

판매 제품.

 [ sale_products ]

베스트셀러 제품.

 [ best_selling_products _판매_제품 ]

최근 제품.

 [ recent_products ]

제품 속성.

 [ product_attribute ]

최고 등급의 제품.

 [ top_rated_products ]

상품 카테고리: 특정 카테고리의 상품을 표시합니다.

 [ product_category ]

제품 카테고리: 모든 제품 카테고리를 표시합니다.

 [ product_categories ]

쇼핑 메시지: 메시지를 표시합니다.

 [ shop_messages ]

제품 필터: 제품 검색 필터를 표시합니다.

 [ woocommerce_product_filter ]

필터 속성.

 [ woocommerce_product_filter_attribute _속성 ]

제품 필터 카테고리.

 [ woocommerce_product_filter_category _카테고리 ]

필터 가격.

 [ woocommerce_product_filter_price ]

제품 필터 태그.

 [ woocommerce_product_filter_tag _태그 ]

필터 등급.

 [ woocommerce_product_filter_rating ]

제품 필터 판매: 판매 중인 제품에 대한 라이브 필터를 표시합니다.

 [ woocommerce_product_filter_sale _세일 ]

제품 필터 재설정: 모든 라이브 필터를 지우는 버튼을 표시합니다.

 [ woocommerce_product_filter_reset ]

WooCommerce 단축 코드: 결론

대체로 WooCommerce 단축 코드는 긴 코드 줄을 작성하지 않고도 상점을 사용자 정의하는 데 도움이 됩니다. 이렇게 하면 다양한 레이아웃과 대안을 테스트하여 매장에 적합한 레이아웃을 찾을 수 있습니다. 처음에는 복잡해 보일 수 있지만 조금만 연습하면 삶이 훨씬 쉬워지고 비즈니스를 한 단계 더 발전시키는 데 도움이 될 것입니다.

온라인 상점을 사용자 정의하는 더 많은 대안을 보려면 다음 가이드를 확인하세요.

WooCommerce에서 프로그래밍 방식으로 장바구니에 추가 기능
WooCommerce Ajax 장바구니에 추가

WooCommerce 단축 코드에 대해 어떻게 생각하십니까? 아래 의견에 귀하의 생각을 알려주십시오.