우커머스 – 단축 코드

우커머스 – 단축 코드

우커머스에는 게시물 및 페이지 내부에 콘텐츠를 삽입하는데 사용할 수 있는 몇 가지 단축 코드가 있습니다.

WooCommerce Blocks는 우커머스 사이트의 게시물과 페이지에 제품을 표시하는 가장 쉽고 유연한 방법입니다. 여기에서 사용 가능한 모든 WooCommerce Blocks에 대해 자세히 알아보십시오.

단축 코드 사용 방법

사용 장소

단축 코드는 워드프레스의 페이지 및 게시물에 사용할 수 있습니다. 블록 편집기를 사용하는 경우 단축 코드를 붙여 넣는데 사용할 수 있는 단축 블록이 있습니다.

단축 코드 사용

클래식 편집기를 사용하는 경우 페이지 또는 게시물에 단축 코드를 붙여 넣을 수 있습니다.

인수 (Args / Arguments)

아래의 여러 단축 코드에서 “Args”를 언급합니다. 단축 코드를 보다 구체적으로 만드는 방법입니다. 예를 들어 단축 코드에 id = “99”를 추가하면 ID가 99인 제품에 대해 장바구니에 추가 버튼이 생성됩니다.

페이지 단축 코드

우커머스의 사이트에 위에 부터 세 개의 기본 단축 코드가 없으면 제대로 작동하지 않습니다.

장바구니 페이지 표시

카트 페이지에서 사용되는 카트 단축 코드는 카트 내용과 쿠폰 코드 등 인터페이스 표시

Args : 없음

[woocommerce_cart]
결제 페이지 표시

결제 페이지에서 사용되는 단축 코드는 결제 프로세스를 표시

Args : 없음

[woocommerce_checkout]
사용자 계정 페이지를 보여줍니다

과거 주문을 보고 정보를 업데이트 할 수 있는 ‘내 계정’ 섹션을 표시합니다. 표시할 주문 수를 지정할 수 있습니다. 기본적으로 15로 설정되어 있습니다 (모든 주문을 표시하려면 -1 사용).

Args :

array(
     'current_user' => ''
 )

현재 사용자 인수는 get_user_by ( ‘id’, get_current_user_id ())를 사용하여 자동으로 설정됩니다.

[woocommerce_my_account]
주문 추적 양식 표시

사용자가 주문 세부 정보를 입력하여 주문 상태를 볼 수 있습니다.

Args : 없음

[woocommerce_order_tracking]

대부분의 경우 이러한 단축 코드는 설정 마법사를 통해 페이지에 자동으로 추가되며 수동으로 사용할 필요가 없습니다.

상품

참고: 버전 3.6부터 WooCommerce Core에는 여러 상품 블록이 포함되어 있습니다. 이들은 단축 코드보다 구성하기가 쉽기 때문에 WordPress 블록 편집기를 사용하는 경우 WooCommerce Blocks(추후 번역)도 참고하세요.

[ product] 단축 코드는 이전 버전의 WooCommerce에서 사용된 다양한 다른 문자열을 대체할 수 있는 가장 강력한 단축 코드 중 하나입니다.

[ products] 단축 코드를 사용하면 페이지 매김, 임의 정렬 및 제품 태그 지원과 함께 게시물 ID, SKU, 카테고리, 속성별로 제품을 표시할 수 있어 이런 단출 코드를 대체할 수 있습니다.

[ featured_products], [ sale_products], [ best_selling_products], [ recent_products], [ product_attribute] 및 [ top_rated_products], 이는 3.2 이하의 WooCommerce 버전에서 필요합니다.

사용 가능한 상품 속성

다음 속성은 상품 단축 코드와 함께 사용할 수 있습니다. 탐색의 용이성을 위해 기본 기능을 위한 섹션으로 분할되었습니다.

제품 속성 표시
  • limit – 표시할 제품 수입니다. 제품을 나열할 때 기본값은 및 -1(모두 표시)이고 카테고리의 경우 -1(모두 표시)입니다.
  • columns – 표시할 열 수입니다. 기본값은 4입니다.
  • paginate – 페이지 매김을 켭니다. limit과 함께 사용하십시오. 페이지를 매기려면 기본값은 false로 설정하면 true로 설정됩니다.
  • orderby – 입력한 옵션별로 표시되는 제품을 정렬합니다. 두 슬러그 사이에 공백이 있는 두 개의 슬러그를 추가하여 하나 이상의 옵션을 전달할 수 있습니다. 사용 가능한 옵션은 다음과 같습니다.
    • date – 제품이 게시된 날짜입니다.
    • id – 제품의 게시물 ID입니다.
    • menu_order – 설정된 경우 메뉴 순서 (낮은 숫자가 먼저 표시됨).
    • popularity – 구매 횟수입니다.
    • rand – 페이지로드시 제품을 무작위로 주문합니다 (특정 주문을 저장할 수 있으므로 캐싱을 사용하는 사이트에서는 작동하지 않을 수 있음).
    • rating – 평균 제품 등급입니다.
    • title – 제품 제목입니다. 이것은 기본 orderby 모드입니다.
  • skus – 쉼표로 구분된 제품 SKU 목록입니다.
  • category – 쉼표로 구분된 카테고리 슬러그 목록입니다.
  • tag – 쉼표로 구분된 태그 슬러그 목록입니다.
  • order orderby에 설정된 방법을 사용하여 제품 주문이 오름차순(ASC)인지 내림차순(DESC)인지 표시합니다. 기본값은 ASC입니다.
  • class – 사용자 정의 CSS를 사용하여 특정 출력을 수정할 수 있도록 HTML 래퍼 클래스를 추가합니다.
  • on_sale – 판매중인 제품을 검색합니다. best_selling 또는 top_rated와 함께 사용할 수 없습니다.
  • best_selling – 베스트셀러 제품을 검색합니다. on_sale 또는 top_rated와 함께 사용할 수 없습니다.
  • top_rated – 최고 등급 제품을 검색합니다. on_sale 또는 best_selling과 함께 사용할 수 없습니다.

콘텐츠 상품 속성
  • attribute – 지정된 속성 슬러그를 사용하여 제품을 검색합니다.
  • terms attribute와 함께 사용할 속성 용어의 쉼표로 구분된 목록입니다.
  • terms_operator – 속성 용어를 비교할 연산자입니다. 사용 가능한 옵션은 다음과 같습니다.
    • AND – 선택한 모든 속성의 제품을 표시합니다.
    • IN – 선택한 속성을 가진 제품을 표시합니다. 이것은 기본 terms_operator 값입니다.
    • NOT IN – 선택한 속성에없는 제품을 표시합니다.
  • tag_operator – 태그를 비교할 연산자. 사용 가능한 옵션은 다음과 같습니다.
    • AND – 선택한 모든 태그의 제품을 표시합니다.
    • IN – 선택한 태그와 함께 제품을 표시합니다. 이것은 기본 tag_operator 값입니다.
    • NOT IN – 선택한 태그에 없는 제품을 표시합니다.
  • visibility – 선택한 가시성을 기반으로 제품을 표시합니다. 사용 가능한 옵션은 다음과 같습니다.
    • visible – 상점 및 검색 결과에 표시되는 제품입니다. 이것이 기본 가시성 옵션입니다.
    • catalog – 상품은 상점에서만 볼 수 있지만 검색 결과는 볼 수 없습니다.
    • search – 검색 결과에만 표시되지만 상점에는 표시되지 않는 제품입니다.
    • hidden – 상점과 검색 모두에서 숨겨져 있으며 직접 URL로만 액세스 할 수 있는 제품입니다.
    • Featured – Featured Products로 표시된 제품.
  • category – 지정된 카테고리 슬러그를 사용하여 제품을 검색합니다.
  • tag – 지정된 태그 슬러그를 사용하여 제품을 검색합니다.
  • cat_operator – 범주 용어를 비교할 연산자입니다. 사용 가능한 옵션은 다음과 같습니다.
    • AND – 선택한 모든 범주에 속하는 제품을 표시합니다.
    • IN – 선택한 카테고리 내의 제품을 표시합니다. 이것이 기본 cat_operator 값입니다.
    • NOT IN – 선택한 카테고리에 없는 제품을 표시합니다.
  • ids – 쉼표로 구분된 게시물 ID 목록을 기반으로 제품을 표시합니다.
  • skus – 쉼표로 구분된 SKU 목록을 기반으로 제품을 표시합니다.

제품이 표시되지 않으면 “Catalog Visibility”에서 “Hidden”으로 설정되어 있지 않은지 확인하십시오.

상품 ID를 찾으려면 상품 화면으로 이동하여 상품위로 마우스를 가져 가면 아래와 같이 ID가 나타납니다.

Finding the WooCommerce product ID by hovering over a product
상품 ID 찾기
특수 제품 속성

이러한 속성은 충돌을 일으키고 표시되지 않을 가능성이 있으므로 위에 나열된 “콘텐츠 속성”과 함께 사용할 수 없습니다. 다음 특수 속성 중 하나만 사용해야합니다.

  • best_selling – 베스트셀러 제품을 표시합니다. true로 설정해야 합니다.
  • on_sale – 판매중인 제품을 표시합니다. true로 설정해야 합니다.

상품 단축 코드 예시

다음 시나리오에서는 의류 매장이 있다고 가정합니다.

시나리오 1 – 랜덤 판매 품목

4개의 랜덤 세일 상품을 보여주기

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]

이 단축 코드는 4개의 열(한 행)이 있는 4개의 가장 인기있는 판매 품목을 표시합니다. 또한 CSS 클래스 quick-sale를 추가해서 내 테마에서 수정할 수 있도록 만듭니다.

WooCommerce Shortcode - Sale Products
랜덤 판매 목록

시나리오 2 – 추천 상품

내 추천 사품을 행당 2개씩 최대 4개 항목으로 표시하려고 합니다.

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

이 단축 코드는 최대 4개의 추천 상품이 2개의 열에 나타냅니다. 명시되어 있지는 않지만 제목 별 정렬(A ~ Z)의 기본값을 사용합니다.

WooCommerce Shortcode - Featured Products
추천 상품 보여주기

시나리오 3 – 베스트셀러 제품

베스트셀러 상품 3개를 한 줄에 표시하고 싶습니다.

[products limit="3" columns="3" best_selling="true" ]
WooCommerce Shortcode - Best Selling Products
베스트셀러 보여주기

시나리오 4 – 최신 상품

한 행에 4개의 제품을 표시하고 싶습니다.

이를 위해 order orderby 명령과 함께 상품 페이지가 생성될 때 생성되는 게시물 ID를 사용합니다. 사용자 화면에는 ID를 볼 수 없으므로 ID를 이미지 위에 겹쳐졌습니다.

[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]
WooCommerce Shortcodes - Newest
최신 상품 보여주기

시나리오 5 – 특정 카테고리

4개씩 2개의 행에 후드티와 셔츠만 표시하고 액세서리는 표시하고 싶지 않습니다.

[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"]
WooCommerce Shortcode - Products by Category
특정 카테고리 보여주기

또는 해당 카테고리에 없는 상품만 표시하고 싶습니다. 변경해야 할 것은 cat_operatorNOT IN으로 설정하는 것입니다.

[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="NOT IN"]

제한이 8로 설정되어 있어도 해당 기준에 맞는 상품이 4개만 있으므로 4개만 표시됩니다.

WooCommerce Shortcode - Products by Category
특정 카테고리 표시 2

시나리오 6 – 속성 표시

각 의류 품목에는 적절한 계절에 따라 “봄/여름” 또는 “가을/겨울” 속성을 추가해 놓았으며,  일부 액세서리에는 일년 내내 입을 수 있기 때문에 둘 다 포함됩니다.

이 예에서는 “봄/여름” 항목을 모두 표시하는 행당 3개의 상품을 원합니다. 그 속성 슬러그는 season이고 속성은 warm 그리고 cold 입니다. 또한 최신 제품부터 분류하고 싶습니다.

[products columns="3" attribute="season" terms="warm" orderby="date"]
WooCommerce Shortcode - Products by Attribute
속성 표시

또는 추운 날씨 제품만 표시하려면 NOT INterms_operator로 추가할 수 있습니다.

[products columns="3" attribute="season" terms="warm" terms_operator="NOT IN"]
WooCommerce Shortcode - Products by Attribute
속성 표시 2

NOT IN을 사용하여 “Spring/Summer”와 “Fall/Winter”모두에 해당하는 상품을 제외합니다. 이 공유 액세서리를 포함하여 추운 날씨에 적합한 모든 장비를 보여주고 싶다면 termwarm에서 cold 로 변경합니다.

시나리오 7 – “hoodie” 태그가 있는 상품만 표시
[products tag="hoodie"]
태그 있는 상품 표시

사용자 지정 메타 필드별로 상품 정렬

참고: 지원 정책에 따라 사용자 지정에 대한 지원을 제공할 수 없습니다. 코드/템플릿에 익숙하지 않고 잠재적인 충돌을 해결하는 경우 WooExpert에 문의할 수 있습니다.

상품 단축 코드를 사용할 때 위의 사전 정의된 값으로 제품을 주문하도록 선택할 수 있습니다. 아래 코드를 사용하여 맞춤 메타 필드별로 제품을 정렬할 수도 있습니다 (이 예에서는 가격별로 제품을 주문합니다).

add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );

function woocommerce_shortcode_products_orderby( $args ) {

    $standard_array = array('menu_order','title','date','rand','id');

    if( isset( $args['orderby'] ) && !in_array( $args['orderby'], $standard_array ) ) {
        $args['meta_key'] = $args['orderby'];
        $args['orderby']  = 'meta_value_num'; 
    }

    return $args;
}

이 스니펫을 테마 폴더의 functions.php에 넣은 다음 meta_key를 편집하여 사용자 지정해야 합니다.

상품 카테고리

이 두 개의 단축 코드는 모든 페이지에 상품 카테고리를 표시합니다.

지정된 제품 카테고리의 제품을 표시
[product_category]
모든 제품 카테고리를 표시
[product_categories]

사용 가능한 상품 카테고리 속성
  • ids – 나열할 특정 카테고리 ID를 지정합니다. [ product_categories]에서 사용
  • category – 카테고리 ID, 이름 또는 슬러그 일 수 있습니다. [ product_category]에서 사용
  • limit – 표시할 카테고리 수
  • columns – 표시할 열 수입니다. 기본값은 4입니다.
  • hide_empty – 기본값은 빈 카테고리를 숨기는 “1”입니다. 빈 카테고리를 표시하려면 “0”으로 설정하십시오.
  • parent – 모든 하위 카테고리를 표시하려면 특정 카테고리 ID로 설정하십시오. 또는 “0”(아래 예와 같이)으로 설정하여 최상위 카테고리만 표시합니다.
  • orderby – 기본값은 “이름”으로 주문하는 것이며 “id”, “slug”또는 “menu_order”로 설정할 수 있습니다. 지정한 ID로 주문하려면 orderby = “include”를 사용할 수 있습니다.
  • order orderby에 설정된 방법을 사용하여 카테고리 순서가 오름차순(ASC)인지 내림차순(DESC)인지를 나타냅니다. 기본값은 ASC입니다.

상품 카테고리 단축 코드 예시

시나리오 8 – 최상위 카테고리만 표시

페이지에 최상위 카테고리만 표시하고 하위 카테고리는 제외하고 싶다고 가정해 보겠습니다. 다음 단축 코드를 사용하면 가능합니다.

[product_categories number="0" parent="0"]
최상위 카테고리 보여주기

상품 페이지

ID 또는 SKU별로 전체 단일 상품 페이지를 표시합니다.

[product_page id="99"]
[product_page sku=”FOO”]

관련 상품

관련 상품을 나열합니다.

Args :

array(
     'limit' => '12',
     'columns' => '4',
     'orderby' => 'title'
 )
[related_products limit=”12″]

Limit 인수

참고: ‘limit’ 단축 코드 인수는 페이지에 표시되는 제품 수를 결정합니다. 페이지 번호를 추가하지 않습니다.

장바구니에 담기

ID로 단일 상품의 가격을 표시하고 장바구니에 추가 버튼을 클릭합니다.

Args :

array(
      'id' => '99',
      'style' => 'border:4px solid #ccc; padding: 12px;',
      'sku' => 'FOO'
      'show_price' => 'TRUE'
      'class' => 'CSS-CLASS'
      'quantity' => '1';
 )
[add_to_cart id="99"]

장바구니 URL에 추가

단일 상품의 장바구니에 추가 버튼에 ID로 URL을 표시합니다.

Args :

array(
      'id' => '99',
      'sku' => 'FOO'
 )
[add_to_cart_url id="99"]

우커머스가 아닌 페이지에 우커머스 알림 표시

[ shop_messages]를 사용하면 우커머스가 아닌 페이지에 우커머스 알림 (예시: ‘상품이 장바구니에 추가되었습니다’)을 표시할 수 있습니다. [ add_to_cart]와 같은 다른 단축 코드를 사용하고 사용자가 작업에 대한 피드백을 받기를 원할 때 유용합니다.

단축 코드 작동 안할 때

단축 코드를 올바르게 붙여넣었지만 표시가 되지 않는 경우 <pre> 태그 사이에 단축 코드를 삽입하지 않았는지 확인하세요. 자주 발생하는 문제입니다. 이 태그를 제거하려면 페이지를 편집하고 텍스트 탭을 클릭하십시오.

Remove Pre Tags from Shortcode
pre 태그 제거

또 다른 일반적인 문제는 곧은 따옴표 ( “)가 둥근 따옴표 (“)로 표시된다는 것입니다. 단축 코드가 올바르게 작동하려면 곧은 따옴표가 필요합니다.

원문: https://docs.woocommerce.com/document/woocommerce-shortcodes/

코멘트 제출