WooCommerce Shortcode 101: 알아야 할 모든 것

WooCommerce는 웹사이트에서 콘텐츠와 완전한 작업을 생성하는 수많은 내장 단축 코드 또는 약간의 코드를 제공합니다. 바로 사용할 수 있는 이러한 단축 코드의 대부분은 게시물이나 페이지에 장바구니에 추가 버튼 및 제품 세부 정보와 같은 요소를 추가할 수 있는 놀라운 능력을 가지고 있습니다.

이 WooCommerce 단축 코드 가이드에서는 온라인 상점에서 사용할 수 있는 모든 단축 코드와 추가 방법에 대한 지침을 다룹니다.

목차:

• WordPress/WooCommerce 단축 코드는 무엇입니까?
• WooCommerce 단축 코드를 사용하는 방법
• WooCommerce와 함께 제공되는 단축 코드는 무엇입니까?
• WooCommerce 확장은 추가 단축 코드를 제공할 수 있습니다.
• WooCommerce 단축 코드의 대안

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

단축 코드는 다음과 같습니다.

 [this_is_a_shortcode]

단, 해당 괄호 안의 텍스트를 변경하여 단축 코드로 수행할 작업을 지정합니다.

그러나 단순히 원하는 것을 입력할 수는 없습니다. WordPress와 WooCommerce 플러그인에서 작동하는 특정 단축 코드가 있습니다.

예를 들어 WooCommerce와 함께 제공되는 기본 단축 코드는 다음과 같습니다.

 [products]

이 단축 코드는 상점에서 제품 갤러리를 가져와 단축 코드를 배치한 페이지나 게시물에 표시합니다.

WooCommerce 단축 코드:

• 고객을 체크아웃 페이지로 보내는 것과 같이 전자 상거래 상점에서 필수 작업/콘텐츠 생성

또는…

• 블로그 게시물에 지금 구매 버튼이 있는 제품 갤러리 삽입과 같이 상점 소유자가 사이트의 모든 위치에 전자 상거래 콘텐츠를 배치할 수 있습니다.

스토어를 설정하고 콘텐츠에 제품을 삽입하려면 WooCommerce 단축 코드를 이해하는 것이 중요합니다.

WooCommerce는 단축 코드에서 멀어지고 있지만 여전히 중요합니다.

WooCommerce 단축 코드를 이해하는 것은 상점을 최대한 활용하는 데 여전히 중요하지만 WooCommerce 팀이 블록을 위해 단축 코드에서 벗어나려고 한다는 점은 주목할 가치가 있습니다.

WordPress 5.0에서 블록 편집기(일명 Gutenberg)가 출시된 이후 WooCommerce는 이전에 단축 코드를 통해서만 액세스할 수 있었던 많은 기능을 위한 전용 블록을 느리지만 확실하게 생성해 왔습니다.

이러한 블록 중 상당수는 이제 핵심 WooCommerce 플러그인에서 사용할 수 있습니다. 더 많은 옵션을 원한다면 공식 WooCommerce Blocks 플러그인을 통해 WooCommerce가 실험 중인 모든 블록에 액세스할 수 있습니다.

WooCommerce 차단

작성자: 자동

현재 버전: 7.9.0

최종 업데이트: 2022년 6월 21일

woo-gutenberg-products-block.7.9.0.zip

50% 등급 200,000+ 설치 WP 6.0+ 필요

더 자세히 알고 싶다면 WooCommerce 블록 튜토리얼을 확인하십시오.

그러나 WooCommerce 블록 시스템은 여전히 ​​기존 단축 코드만큼 포괄적이지 않으므로 WooCommerce 단축 코드를 이해하는 것이 여전히 중요합니다.

또한 사이트에서 여전히 Classic TinyMCE 편집기를 사용하는 경우 WooCommerce 블록이 Classic 편집기에서 작동하지 않으므로 단축 코드에 의존해야 합니다.

WooCommerce 단축 코드를 사용하는 방법

WooCommerce는 일반적으로 장바구니 및 결제와 같은 주요 페이지에 대해 상점을 설정할 때 일부 단축 코드를 자동으로 추가합니다.

사이트에 다른 단축 코드를 추가하려면 수동으로 복사하여 붙여넣거나 직접 입력할 수 있습니다.

블록 편집기(Gutenberg)를 사용하든 클래식 TinyMCE 편집기를 사용하든 상관없이 WooCommerce 단축 코드를 사이트의 어느 곳에나 추가할 수 있습니다. 위젯과 같은 다른 영역에 단축 코드를 포함할 수도 있습니다.

일반적으로 WooCommerce 단축 코드를 추가하는 방법에 대해 먼저 이야기한 다음 가장 유용한 단축 코드를 분류해 보겠습니다.

블록 편집기에서 WooCommerce 단축 코드를 추가하는 방법

시작하려면 WordPress에서 새 게시물이나 현재 게시물이나 페이지를 엽니다.

" + " 아이콘 중 하나를 클릭하여 콘텐츠 블록을 검색합니다. 편집기에 삽입되도록 Shortcode 블록을 찾아 선택합니다.

이제 제공된 필드에 붙여넣거나 입력하려면 단축 코드를 가져와야 합니다.

원하는 단축 코드(이 기사에서 모두 다룰 것)를 필드에 넣습니다.

결과를 보려면 게시물 또는 페이지를 저장 하거나 업데이트 해야 합니다.

해당 페이지 또는 게시물의 프런트엔드로 이동하여 단축 코드가 생성하는 내용을 확인합니다. 이 경우 8개의 제품을 표시하고 가격별로 구성하도록 구성된 제품 단축 코드를 추가했습니다.

클래식 편집기에서 WooCommerce 단축 코드를 추가하는 방법

클래식 WordPress 편집기는 약간 다른 방식으로 단축 코드를 처리합니다.

WooCommerce 단축 코드를 삽입하려면 페이지 또는 게시물 편집기를 열고 Visual으로 설정되어 있는지 확인하십시오.

편집기에서 원하는 위치에 단축 코드를 붙여넣습니다.

프론트엔드에서 콘텐츠 내에서 배치한 위치에 따라 작동 중인 단축 코드를 볼 수 있습니다.

단축 코드와 함께 인수 사용

"인수", "속성" 또는 "매개변수"라고도 하는 단축 코드 인수 를 사용하면 개발자와 사이트 소유자가 사용된 단축 코드에서 보다 구체적인 콘텐츠를 렌더링할 수 있습니다.

예를 들어 다음과 같은 "id" 인수를 사용할 수 있습니다.

그리고 그것을 다음 단축 코드에 추가하십시오.

 [add_to_cart]

만들다:

 [add_to_cart]

결과적으로 해당 단축 코드가 있는 페이지에는 ID가 #25인 제품에 대한 Add To Cart 버튼이 표시됩니다.

누군가 해당 버튼을 클릭하면 특정 제품이 장바구니에 추가됩니다.

모든 WooCommerce 단축 코드가 인수를 허용하는 것은 아니지만 일부는 인수를 요구합니다. 다음은 WooCommerce 단축 코드로 시도할 수 있는 인수의 몇 가지 예입니다.

• limit=””: 예를 들어 limit=”5″는 5개의 제품만 표시합니다.
• id=””: id=”10″과 같이 ID를 기반으로 특정 제품을 표시합니다.
• orderby=””: 날짜, ID, 등급, 제목, 인기도, menu_order 또는 rand(무작위)별로 제품 목록을 구성합니다.
• attribute="": 속성 슬러그를 기반으로 항목을 잡기 위해
• columns="": 제품 갤러리에서 특정 수의 열을 설정합니다.

다음과 같이 대괄호 안에 이러한 값을 추가하지만 단축 코드 텍스트의 끝에 등호와 따옴표를 사용하여 값을 저장합니다.

 [products columns="3" orderby="popular"]

WooCommerce와 함께 제공되는 단축 코드는 무엇입니까?

WooCommerce가 제대로 실행되려면 4개의 필수 단축 코드가 있으며 그 중 3개는 WooCommerce를 설치하면 자동으로 추가됩니다.

그들은:

• 장바구니 페이지 단축 코드
• 결제 페이지 단축 코드
• 내 계정 페이지 단축 코드
• 주문 추적 페이지 단축 코드

WooCommerce는 WordPress의 모든 페이지 섹션에 있는 자동 생성 페이지에 이러한 단축 코드 중 3개를 추가합니다.

다음은 모든 WooCommerce 단축 코드, 각 단축 코드가 하는 일, 페이지에 이미 설치되어 있는지 여부입니다.

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

장바구니 페이지 단축 코드는 다음과 같습니다.

 [woocommerce_cart]

목적

장바구니 페이지 단축 코드는 장바구니에 추가된 제품, 수량, 가격 및 총계와 같은 고객에 대한 세부 정보와 함께 장바구니 페이지에 WooCommerce 장바구니를 표시합니다.

WooCommerce 설치 후 페이지에 자동으로 추가되는 단축 코드 중 하나입니다.

예시

장바구니 페이지 단축 코드가 없으면 고객에게 아래 요소가 표시되지 않습니다.

주장이 있습니까?

아니.

WooCommerce Checkout 단축 코드

Checkout 페이지 단축 코드는 다음과 같습니다.

 [woocommerce_checkout]

목적

Checkout 단축 코드는 웹사이트의 전자상거래 체크아웃 페이지를 렌더링하여 고객이 연락처 및 결제 정보를 입력할 수 있는 필드를 표시하는 동시에 주문을 한 번 더 검토합니다.

이 단축 코드는 WooCommerce를 설치한 후 자체 자동 페이지를 받습니다.

예시

Checkout 단축 코드는 이름 필드에서 주문 정보 및 지불 필드, 주문 버튼에 이르기까지 모든 것을 생성합니다.

주장이 있습니까?

아니.

내 계정 페이지 단축 코드

내 계정 페이지 단축 코드는 다음과 같습니다.

 [woocommerce_my_account]

목적

이 WooCommerce 단축 코드는 고객에게 웹사이트에서 다음 섹션과 함께 계정 정보를 관리할 수 있는 페이지를 제공합니다.

• 연락처 정보 변경
• 비밀번호 조정
• 결제 수단 수정
• 지난 주문 보기
• 계정 로그인/로그아웃

내 계정 단축 코드에는 자체 자동 생성 페이지가 없으므로 직접 만들어야 합니다.

예시

구성에 따라 내 계정 페이지에 구독 및 다운로드 와 같은 다른 탭이 있을 수 있습니다.

주장이 있습니까?

예.

• 현재 사용자

WooCommerce 주문 추적 단축 코드

주문 추적 단축 코드는 다음과 같습니다.

 [woocommerce_order_tracking]

목적

이 단축 코드는 판매자와 고객이 운송업체 코드로 배송을 추적할 수 있는 페이지를 만듭니다.

이것을 온라인 상점에 표시하려면 새 페이지를 만들어야 합니다.

예시

주문 추적 단축 코드가 작동하려면 거래 이메일과 함께 추적 ID를 보내야 합니다.

주장이 있습니까?

아니.

WooCommerce 제품 단축 코드

제품 단축 코드는 다음과 같습니다.

 [products]

목적

아마도 모든 WooCommerce 단축 코드 중 가장 강력한 제품 단축 코드를 사용하면 인벤토리에서 원하는 항목을 표시할 수 있으며 다음을 기반으로 선택에 대해 더 구체적으로 알 수 있습니다.

• SKU
• 범주
• 속성
• 제품 ID

또한 이미지, 제목 및 구매 버튼이 모두 열로 구성된 여러 항목이 있는 제품 갤러리를 표시하는 데 유용합니다.

예시

이 제품 단축 코드는 최대 10개 항목을 5개 열로 표시하고 가장 인기 있는 항목순으로 표시하는 인수가 있는 항목 모음을 제공합니다.

주장이 있습니까?

예, WooCommerce의 다른 어떤 단축 코드보다 많습니다.

제품 단축 코드에 대한 몇 가지 인기 있는 인수는 다음과 같습니다.

• 한계
• 기둥
• 주문
• 스쿠스
• 꼬리표
• 가장 잘 팔리는
• 주문하다
• 수업
• 기인하다
• 아이디
• 범주

WooCommerce의 제품 페이지 단축 코드

제품 페이지 단축 코드는 다음과 같습니다.

 [product_page]

그러나 추가 ID 또는 SKU 정보에 의존하므로 위의 단축 코드는 다음과 같은 것을 포함할 때까지 실제로 작동하지 않습니다.

 [product_page]

또는:

 [product_page sku="F12345"]

목적

제품 페이지 단축 코드는 미리보기 또는 항목 모음 대신 전체 개별 제품 페이지를 표시한다는 점에서 제품 단축 코드와 다릅니다.

예시

보시다시피, 이 단축 코드는 이미지, 제목 및 장바구니 에 추가 버튼(제품 단축 코드에서 가져오는 것)뿐만 아니라 선택한 하나의 제품 페이지 전체를 나타냅니다.

주장이 있습니까?

예, 필수 ID 또는 SKU 인수입니다.

WooCommerce의 관련 제품 단축 코드

관련 제품 단축 코드는 다음과 같습니다.

 [related_products]

목적

기존 제품 페이지의 아무 곳에나 관련 제품 갤러리를 배치하거나 일종의 제품 정보가 있는 페이지에 배치하기 위한 것입니다.

참조할 제품이 없으면 단축 코드가 관련 항목을 찾을 수 없습니다.

예시

제품 페이지 설명 안에 관련 제품 단축 코드를 배치하고 5개의 제한 인수를 포함했습니다.

그러면 설명 바로 아래에 관련 제품 갤러리가 배치됩니다.

주장이 있습니까?

예:

• 한계
• 기둥
• 주문

WooCommerce의 제품 카테고리 단축 코드

제품 카테고리 단축 코드는 다음과 같습니다(특정 카테고리의 항목 표시용).

 [product_category]

다른 버전의 단축 코드는 제품 카테고리 목록을 표시합니다.

 [product_categories]

목적

이러한 단축 코드는 지정된 범주 또는 단순히 범주 목록을 기반으로 제품을 가져옵니다.

이 작업을 수행하려면 실제로 범주가 구성되어 있어야 합니다.

예

이 예에서는 category="clothing"이라는 간단한 인수와 함께 Product Category 단축 코드를 사용합니다.

제품 카테고리 단축 코드는 카테고리, 사진 및 제품 수 목록과 함께 다른 결과를 제공합니다.

주장이 있습니까?

예, 꽤 많습니다.

• 주문하다
• 주문
• hide_empty
• 범주
• 아이디
• 한계
• 기둥
• 부모의

장바구니에 추가

WooCommerce에는 두 개의 "장바구니에 추가" 단축 코드가 있으며 그 중 하나는 다음과 같습니다.

 [add_to_cart]

다른 하나는 다음과 같습니다.

 [add_to_cart_url]

둘 다 작동하려면 sku 또는 id 인수가 필요합니다.

목적

일반 장바구니에 추가 단축 코드는 제품 가격을 가져와 장바구니에 추가 버튼 옆에 표시합니다.

장바구니에 추가 URL 단축 코드는 선택한 항목의 제품 페이지 URL을 표시하고 장바구니에 추가 버튼에 배치합니다.

장바구니에 추가 버튼이 어딘가에 나타나거나 지금 구매 버튼과 같은 다른 버튼을 교체하는 데 문제가 있는 경우 이 두 가지 단축 코드가 필요할 수 있습니다. 단축 코드에는 버튼만 표시되므로 제품 이미지와 함께 사용할 가능성이 큽니다.

예시

 [add_to_cart]

제품 ID 인수가 있는 이 단축 코드는 다음을 생성합니다.

보시다시피 가격과 버튼이 표시됩니다.

반면에 Add To Cart URL 단축 코드는 단순히 해당 제품의 URL을 생성합니다.

주장이 있습니까?

예:

• ID
• 스쿠
• 스타일
• show_price
• 수업
• 수량

장바구니에 추가 URL 단축 코드가 더 적습니다.

• ID
• 스쿠

WooCommerce용 쇼핑 메시지 단축 코드

Shop Messages 단축 코드는 다음과 같습니다.

 [shop_messages]

목적

WooCommerce가 아닌 페이지에 내장된 WooCommerce 메시지를 표시하기 위한 편리한 단축 코드입니다.

일반적으로 WooCommerce가 아닌 페이지에 장바구니 에 추가 버튼을 추가했지만 여전히 "이 제품이 장바구니에 추가되었습니다."라는 메시지를 원하는 경우와 같이 다른 단축 코드와 페어링할 때만 유용합니다.

예시

Shop Messages 단축 코드에는 일반적으로 파트너 단축 코드가 트리거로 필요합니다. 장바구니에 담기 단축 코드가 좋은 예입니다.

그런 다음 메시지를 트리거하기 위해 사용자가 조치를 취해야 합니다.

이것은 WooCommerce가 아닌 페이지이므로 이제 단축 코드가 장바구니에 추가되는 제품에 대한 내장 WooCommerce 메시지를 표시합니다.

참고: 상점 메시지를 보는 데 문제가 있는 경우 WooCommerce > 설정 > 제품 > 일반 으로 이동하여 "AJAX가 아카이브에서 장바구니에 추가 버튼 활성화" 확인란의 선택을 취소합니다.

주장이 있습니까?

아니.

WooCommerce 단축 코드를 사용하지 않는 사전 제작된 페이지

WordPress의 모든 페이지 섹션에 있는 동안 온라인 상점을 운영하기 위한 특수 태그가 포함된 WooCommerce의 자동 생성 페이지가 몇 개 더 있습니다.

여기에는 다음이 포함됩니다.

• 개인정보 보호정책 페이지
• 환불 및 반품 정책 페이지
• 쇼핑 페이지

WooCommerce를 설치한 후 기본적으로 생성되지만 이 페이지는 Checkout 및 My Account 페이지와 같은 단축 코드가 있는 페이지와 동일한 방식으로 작동하지 않습니다.

대신 게시물 템플릿 및 사전 로드된 간단한 텍스트와 같은 콘텐츠를 표시하는 다른 방법을 사용합니다. 그들은 전반적인 디자인 프로세스의 속도를 높이기 위해 존재하지만 해당 페이지에서 단축 코드를 볼 것으로 기대해서는 안됩니다.

WooCommerce 확장은 추가 단축 코드를 제공할 수 있습니다.

WooCommerce에는 이미 삽입 및 관리할 수 있는 강력한 단축 코드 모음이 있지만 타사 플러그인은 일반적으로 WooCommerce를 사용한 개발 경험을 강화하기 위해 더 많은 단축 코드를 제공합니다.

예를 들어 WooCommerce 제품 검색 확장에는 다음을 포함하여 보다 유연한 제품 검색을 위한 단축 코드가 있습니다.

• woocommerce_product_search: 사이트 어디에서나 제품 검색 필드를 표시합니다.
• woocommerce_product_filter_price: 가격에 대한 제품 검색 필터를 표시합니다.
• woocommerce_product_filter_sale: 세일 품목별 필터링
• woocommerce_product_filter_category: 검색 필드에서 제품 카테고리별로 필터링

WooCommerce 단축 코드의 대안

WooCommerce 단축 코드가 혼란스럽다면 스토어 콘텐츠를 제어할 수 있는 두 가지 주요 대안이 있습니다.

WooCommerce 차단

먼저 앞서 언급한 공식 WooCommerce 블록을 사용할 수 있습니다. 이러한 블록은 단축 코드로 얻을 수 있는 것과 동일한 기능을 모방하는 것을 목표로 하지만 시각적 편집기에서 모든 작업을 수행할 수 있기 때문에 콘텐츠 작업에 보다 사용자 친화적인 방법을 제공합니다.

다시 말하지만, 이러한 블록 중 많은 부분이 이제 핵심 WooCommerce 플러그인에 내장되어 있지만 WooCommerce 블록 플러그인을 설치하여 추가 실험 블록에 액세스할 수도 있습니다.

페이지 빌더 플러그인

또는 Elementor 및 Beaver Builder와 같은 인기 있는 페이지 빌더를 사용할 수 있습니다.

Elementor Pro는 WooCommerce 작업과 관련하여 가장 강력한 페이지 빌더 중 하나일 것입니다. 다양한 방식으로 제품을 표시하기 위한 여러 블록 외에도 이제 해당 페이지의 WooCommerce 단축 코드를 대체할 수 있는 전용 장바구니 및 체크아웃 위젯도 사용할 수 있습니다.

단순화하는 것 외에도 Elementor를 사용하여 해당 페이지의 디자인을 완전히 사용자 지정할 수 있습니다. 이는 숏코드만으로는 할 수 없는 작업입니다.

️ 자세한 내용은 Elementor 리뷰를 확인하세요.

WooCommerce 단축 코드 시작하기

오늘 한 번 사용해 보고 스토어 콘텐츠를 더 잘 제어할 수 있습니다.

WooCommerce 단축 코드에 대해 질문이 있습니까? 댓글로 알려주세요!