WooCommerce 단축 코드: 초보자를 위한 완벽한 가이드
게시 됨: 2023-04-07WooCommerce를 처음 사용하는 경우 카트 페이지에서 다음 이미지를 보았을 수 있습니다.
카트 페이지의 WooCommerce 단축 코드 입니다. 카트 및 체크아웃 페이지와 같은 기본 페이지는 단축 코드를 사용하여 페이지에 기능을 제공합니다.
WooCommerce는 빈 캔버스를 제공하며 페이지를 디자인하고 위젯 또는 버튼을 추가하는 것은 귀하에게 달려 있습니다. 그러나 온라인 상점을 만들고 사용자 정의하는 것은 특히 초보자에게 어려울 수 있습니다. 단축 코드는 당신이 찾고 있는 구원의 은총입니다. 콘텐츠를 삽입하거나 콘텐츠가 표시되는 방식을 변경하는 간단한 방법을 사용자에게 제공합니다.
이 기사에서는 다음에 대해 이야기합니다.
- WooCommerce 단축 코드는 무엇입니까?
- 숏코드는 어떻게 사용하나요?
- 몇 가지 중요한 단축 코드는 무엇입니까?
이 기사가 끝나면 단축 코드와 사용 방법에 대한 모든 것을 알게 될 것입니다.
요약 : WooCommerce 단축 코드는 페이지 또는 게시물의 모양을 변경하는 데 도움이 되는 간단한 코드 스니펫입니다. 단축 코드는 제품 목록, 결제 양식 등과 같은 정보가 표시되는 방식을 제어합니다. 복잡한 코딩의 필요성을 줄이고 페이지의 기능을 쉽게 변경할 수 있습니다.
단축 코드는 처음에는 초보자에게 혼란스러워 보일 수 있습니다. 핸들러 함수로 알려진 코드만 볼 수 있기 때문에 목적을 말하기는 어렵습니다. 그들이 추가하는 기능을 보려면 페이지를 미리 봐야 합니다. 다음은 쇼트코드와 그들이 하는 일의 이미지입니다.
WooCommerce 단축 코드는 제품 목록, 장바구니, 결제 양식, 계정 정보 및 기타 전자상거래 관련 요소를 사이트의 페이지 및 게시물에 추가하는 데 사용됩니다.
시작하기 전에 이러한 변화가 큰 변화가 될 수 있다는 점에 유의해야 합니다. 먼저 BlogVault로 백업하는 것이 좋습니다. 백업은 변경 사항이 잘못된 경우 작업을 보호하는 안전망입니다.
사이트 구축을 진행하면서 BlogVault에는 주요 변경 사항을 안전하게 테스트하는 데 도움이 되는 스테이징 사이트 기능도 있습니다. 사이트에서 이미 수행한 작업에 영향을 주지 않고 사이트의 핵심 페이지 레이아웃을 변경할 수 있는 좋은 방법입니다. 이제 WooCommerce 단축 코드에 대해 알아야 할 모든 것을 살펴보겠습니다.
WooCommerce 단축 코드는 무엇입니까?
WooCommerce 단축 코드는 특정 기능을 수행하는 코드 스니펫입니다. 대괄호로 묶여 있으며 모양이나 작동 방식을 변경하기 위해 게시물이나 페이지에 추가됩니다. 동적 콘텐츠를 삽입하는 데도 도움이 됩니다. 누군가가 페이지와 상호 작용하는 방식에 따라 변경되는 콘텐츠입니다.
플러그인에 익숙하다면 단축 코드와 플러그인이 비슷하게 들릴 수 있습니다. 그러나 그들은 다른 목적을 가지고 있습니다. 단축 코드는 게시물이나 페이지에 특정 기능이나 콘텐츠를 추가합니다. 사이트에 이미 존재하는 콘텐츠의 표시를 사용자 지정합니다. 전체 사이트에 영향을 미치는 새로운 기능을 추가하기 위해 플러그인이 설치되고 활성화됩니다. 관리 또는 디자인과 같은 사이트의 다양한 측면에 도움이 되며 기능 면에서 훨씬 더 정교합니다.
WooCommerce 단축 코드는 어떻게 사용합니까?
WooCommerce 쇼트코드를 사용하려면 콘텐츠나 기능을 표시하려는 페이지나 게시물에 쇼트코드를 삽입한 다음 페이지를 저장하거나 게시하면 됩니다. 페이지를 볼 때 단축 코드는 그것이 나타내는 실제 콘텐츠 또는 기능으로 대체됩니다.
앞서 쇼트코드는 미리 정의된 코드 조각이라고 언급했습니다. 이것은 그들의 목표가 사이트 파일 내에 이미 설정되어 있음을 의미합니다. 숏코드의 핸들러 기능만 알면 추가할 수 있습니다. 핸들러 기능은 대괄호 사이에 작성하는 텍스트 조각입니다. 이 문서의 뒷부분에서 가장 유용한 핸들러 함수를 나열했습니다. WooCommerce 문서에서 자세한 내용을 확인하거나 특정 작업에 대한 단축 코드가 있는지 WordPress 커뮤니티에 문의할 수도 있습니다.
핸들을 알고 나면 페이지 또는 게시물에 단축 코드를 추가하는 단계는 다음과 같습니다.
- 페이지 또는 게시물 편집: 대시보드에서 편집하려는 항목에 따라 게시물 또는 페이지를 클릭합니다. 그런 다음 오른쪽 페이지나 게시물 위로 마우스를 이동하고 수정을 클릭합니다. 그러면 페이지 편집기가 열립니다.
- 숏코드 핸들러 기능 추가: 숏코드를 추가하고자 하는 지점에서 좌측 상단의 +를 클릭하여 숏코드를 검색합니다. 이렇게 하면 단축 코드 블록이 추가됩니다. 이제 핸들러 기능을 추가합니다. 예를 들어 계정 페이지의 WooCommerce 단축 코드는 [woocommerce_my account]입니다. 다음은 내가 추가한 방법을 보여주는 이미지입니다.
일부 단축 코드에는 제품 단축 코드와 같은 속성도 있습니다. 구체적인 예를 들어 그것들도 다룰 것입니다.
- 게시물 게시 또는 업데이트: 완료되면 페이지 또는 게시물을 미리 본 다음 게시 또는 업데이트를 클릭합니다. 축하합니다. 페이지에 단축 코드를 추가했습니다.
참고: 단축 코드를 제거하면 기능도 사라집니다. 예를 들어 [woocommerce_cart] 단축 코드를 삭제하면 페이지에 더 이상 장바구니 기능이 없습니다. 따라서 조심하고 스테이징 사이트를 사용하여 페이지 또는 게시물의 변경 사항을 테스트하십시오.
가장 유용한 WooCommerce 단축 코드 목록
다양한 용도로 사용되는 많은 WooCommerce 단축 코드가 있으며 다음은 WooCommerce 사이트의 필수 요소입니다.
WooCommerce 카트 단축 코드:
카트
[우커머스_장바구니]
이 단축 코드는 제품 섬네일, 이름, 가격, 수량 및 소계를 포함하여 장바구니의 내용을 표시합니다. 열, show_shipping, show_coupon, show_totals 및 button_text와 같은 출력을 사용자 지정할 수 있는 다양한 매개 변수가 있습니다.
예: [woocommerce_cart columns=”2″ show_shipping=”true” show_coupon=”true” button_text=”Proceed to Checkout”]
그러면 2개의 열, 배송 옵션, 쿠폰 코드 필드 및 "Proceed to Checkout" 텍스트가 있는 체크아웃 버튼이 있는 장바구니가 표시됩니다.
장바구니 합계
[woocommerce_cart_total]
이 단축 코드는 장바구니의 총 가격을 표시합니다. class 및 before와 같은 매개 변수가 있습니다.
예: [woocommerce_cart_total class="my-cart-total" before="Total: "]
이렇게 하면 사용자 지정 클래스와 접두사 "Total: "이 있는 장바구니의 총 가격이 표시됩니다.
장바구니 쿠폰
[woocommerce_장바구니_쿠폰
이 단축 코드는 장바구니 페이지의 쿠폰 코드 필드를 표시합니다. 클래스 및 자리 표시자와 같은 매개 변수가 있습니다.
예: [woocommerce_cart_coupon class="my-cart-coupon" 자리 표시자="쿠폰 코드 입력"]
이렇게 하면 사용자 지정 클래스 및 사용자 지정 자리 표시자 텍스트와 함께 장바구니 페이지에 쿠폰 코드 필드가 표시됩니다.
장바구니 배송
[우커머스_장바구니_배송]
이 단축 코드는 장바구니 페이지에 배송 옵션을 표시합니다. class 및 before와 같은 매개 변수가 있습니다.
예: [woocommerce_cart_shipping class="my-cart-shipping" before="배송: "]
이렇게 하면 사용자 지정 클래스와 접두사 "배송: "이 있는 배송 옵션이 장바구니 페이지에 표시됩니다.
카트 내용
[우커머스_장바구니_콘텐츠]
이 단축 코드는 장바구니의 내용을 표로 표시합니다. 클래스, 이전 및 이후와 같은 매개 변수가 있습니다.
예: [woocommerce_cart_contents class=”my-cart-contents” before=”<table>” after=”</table>”]
이렇게 하면 장바구니의 내용이 사용자 지정 클래스와 HTML 태그 앞/뒤에 있는 사용자 지정 테이블로 표시됩니다.
WooCommerce 결제 단축 코드
점검
[woocommerce_체크아웃]
이 단축 코드는 고객이 구매를 완료하는 데 필요한 모든 필드가 포함된 체크아웃 양식을 표시합니다. order_review, terms, privacy_policy 및 login_form과 같은 매개변수가 있습니다.
예: [woocommerce_checkout order_review=”false” terms=”true” privacy_policy=”true” login_form=”false”]
이렇게 하면 주문 검토 섹션이 없는 체크아웃 양식이 표시되지만 약관 및 개인 정보 보호 정책 확인란이 있습니다.
결제 페이지를 사용자 지정하는 다른 단축 코드는 다음과 같습니다.
결제 및 장바구니
[woocommerce_checkout_cart]
이 단축 코드는 결제 페이지에 장바구니의 내용을 표시합니다. show_shipping, show_coupon 및 show_cart와 같은 매개 변수가 있습니다.
예: [woocommerce_checkout_cart show_shipping=”true” show_coupon=”false” show_cart=”false”]
이렇게 하면 배송 옵션이 있는 체크아웃 페이지의 장바구니 내용이 표시되지만 쿠폰 코드 필드나 장바구니 합계는 표시되지 않습니다.
결제 주문 검토
[woocommerce_체크아웃_주문_리뷰]
이 단축 코드는 제품 목록, 배송 정보 및 총 가격을 포함하여 결제 페이지의 주문 검토 섹션을 표시합니다. show_shipping, show_coupon 및 show_cart와 같은 매개 변수가 있습니다.
예: [woocommerce_checkout_order_review show_shipping=”false” show_coupon=”false” show_cart=”false”]
이렇게 하면 배송, 쿠폰 또는 카트 섹션 없이 결제 페이지의 주문 검토 섹션만 표시됩니다.
결제 필드
[woocommerce_checkout_fields]
이 단축 코드는 청구 및 배송 주소, 결제 방법 및 주문 메모와 같은 특정 결제 필드를 표시합니다. 주문, 필드 및 필수와 같은 매개변수가 있습니다.
예: [woocommerce_checkout_fields order=”billing,shipping” fields=”first_name,last_name,email,phone” required=”first_name,last_name,email”]
이렇게 하면 이름, 성, 이메일 및 전화번호에 대한 청구 및 배송 필드가 표시되며 이름, 성 및 이메일 필드를 작성해야 합니다.
WooCommerce 주문 추적 양식 단축 코드
주문 추적 양식
[woocommerce_주문 추적]
고객이 주문을 추적할 수 있는 기능을 추가합니다.
WooCommerce 사용자 계정 단축 코드
사용자 계정
[woocommerce_my_account]
고객이 개인 계정 정보를 변경할 수 있습니다.
WooCommerce 제품 단축 코드
제품
[제품]
이 단축 코드는 페이지 매기기 및 정렬 옵션이 있는 제품 그리드를 표시합니다. 범주, 태그, 제한, 열, orderby 및 order와 같은 출력을 사용자 지정할 수 있는 다양한 매개 변수가 있습니다.
예: [products limit=”4″ columns=”2″ orderby=”price” order=”asc”]
그러면 2열에 4개의 제품이 표시되며 가격별로 오름차순으로 정렬됩니다.
제품 카테고리
[제품 카테고리]
이 단축 코드는 특정 제품 범주의 제품 그리드를 표시합니다. limit, columns, orderby 및 order와 같은 [products] 단축 코드와 유사한 매개 변수가 있습니다.
예: [product_category category=”의류” limit=”6″ columns=”3″]
이렇게 하면 "의류" 카테고리의 6개 제품이 3개의 열에 표시됩니다.
SKU
[products_by_sku]
이 단축 코드는 SKU(Stock Keeping Units)를 기반으로 제품 그리드를 표시합니다. 여기에는 sku 및 한도와 같은 매개변수가 있습니다.
예: [products_by_sku skus=”ABC123, DEF456, GHI789″ 한도=”3″
그러면 SKU가 "ABC123", "DEF456" 및 "GHI789"인 3개의 제품이 표시됩니다.
최근 제품
[최근_제품]
이 단축 코드는 최근에 추가된 제품의 그리드를 표시합니다. 제한 및 열과 같은 매개 변수가 있습니다.
예: [recent_products limit=”8″ columns=”4″]
이렇게 하면 최근에 추가된 8개의 제품이 4개의 열에 표시됩니다.
베스트 셀러
[베스트_셀링_제품]
이 단축 코드는 베스트셀러 제품의 그리드를 표시합니다. 한계 및 열과 같은 매개 변수가 있습니다.
예: [best_selling_products limit=”10″ columns=”5″]
그러면 5개의 열에 10개의 베스트 셀러 제품이 표시됩니다.
단일 제품
[제품]
이 단축 코드는 ID별로 단일 제품을 표시합니다. id 및 sku와 같은 매개 변수가 있습니다.
예: [제품 ID=”123″]
이렇게 하면 ID 123의 제품이 표시됩니다.
제품 속성
[제품_속성]
이 단축 코드는 특정 제품 속성을 기반으로 제품 목록을 표시합니다. 속성, 용어, 연산자, 제한 및 열과 같은 매개 변수가 있습니다.
예: [product_attribute 속성=”색상” 용어=”빨간색” 연산자=”OR” 제한=”6″ 열=”3″
이렇게 하면 3개의 열에 "빨간색" 색상 속성이 있는 최대 6개의 제품이 표시됩니다.
특별 상품
[특별 상품]
이 단축 코드는 주요 제품의 그리드를 표시합니다. 한계 및 열과 같은 매개 변수가 있습니다.
예: [featured_products limit=”8″ columns=”4″]
이렇게 하면 4개의 열에 최대 8개의 추천 제품이 표시됩니다.
제품 태그
[제품_태그]
이 단축 코드는 해당 제품 아카이브에 대한 링크와 함께 제품 태그 목록을 표시합니다. exclude, orderby 및 order와 같은 매개변수가 있습니다.
예: [product_tags exclude=”15,20″ orderby=”count” order=”DESC”]
이렇게 하면 ID가 15 및 20인 태그를 제외하고 각 태그와 연결된 제품 수별로 주문한 제품 태그 목록이 표시됩니다.
제품 페이지
[제품_페이지]
이 단축 코드는 특정 제품에 대한 제품 페이지를 표시합니다. id와 같은 매개 변수가 있습니다.
예: [product_page id=”123″]
이렇게 하면 ID가 123인 제품의 제품 페이지가 표시됩니다.
제품 리뷰
[제품_리뷰]
이 단축 코드는 특정 제품에 대한 리뷰 목록을 표시합니다. id 및 limit와 같은 매개 변수가 있습니다.
예: [product_reviews id=”123″ 한도=”5″]
ID가 123인 제품에 대해 최대 5개의 리뷰가 표시됩니다.
제품 설명
[우커머스_제품_설명]
이 단축 코드는 제품 설명을 표시합니다.
가격
[우커머스_제품_가격]
이 단축 코드는 제품 가격을 표시합니다.
제품 재고
[우커머스_제품_재고]
이 단축 코드는 "재고 있음" 또는 "재고 없음"과 같은 제품의 재고 상태를 표시합니다.
최근 제품
[최근_제품]
신제품 출시 표시
최고 등급
[상위_등급_제품]
귀하의 사이트에서 최고 등급의 제품을 표시합니다.
제품 카테고리
[제품 카테고리]
설정한 제품의 모든 범주를 표시합니다.
제품 필터
[우커머스_제품_필터]
이렇게 하면 고객이 목록을 정렬하는 데 사용할 수 있는 제품에 대한 필터를 추가할 수 있습니다.
WooCommerce 단축 코드 문제를 해결하는 방법은 무엇입니까?
WooCommerce 단축 코드에 문제가 있는 경우 걱정하지 마십시오. 다음은 문제 해결을 위해 수행할 수 있는 몇 가지 단계입니다.
- WooCommerce 플러그인 다시 확인: WooCommerce 플러그인이 설치되고 활성화되었는지 확인합니다. WooCommerce가 없으면 단축 코드가 작동하지 않습니다.
- 단축 코드 구문 확인: WooCommerce 설명서에서 올바른 구문을 확인하십시오. 밑줄이 올바른 위치에 있습니까? 대괄호를 사용하고 있습니까? 이것은 매우 중요합니다.
- 충돌하는 플러그인 확인: 경우에 따라 다른 플러그인일 수 있습니다 . 웹사이트의 다른 플러그인이 단축 코드 작동 방식을 방해할 수 있습니다. 다른 플러그인을 하나씩 비활성화하여 문제가 해결되는지 확인하십시오. 플러그인 리뷰를 확인하여 충돌에 대해 불평하는 사람이 있는지 확인할 수도 있습니다.
- 기본 테마로 전환: 플러그인과 마찬가지로 테마가 충돌할 수도 있습니다. 문제가 해결되었는지 확인하려면 기본 WordPress 테마로 전환하십시오.
- WooCommerce 지원팀에 문의: 이러한 단계로 문제가 해결되지 않으면 WooCommerce 지원팀에 문의하여 추가 지원을 받으세요. 그들은 당신이 문제를 더 자세히 해결하도록 도울 수 있을 것입니다.
단축 코드가 유용한 이유는 무엇입니까?
우리는 단축 코드를 좋아하며 다음은 단축 코드를 권장하는 몇 가지 이유입니다.
- 시간 절약: 상점 페이지를 사용자 지정하기 위해 고유한 코드를 추가하는 시간과 노력을 절약할 수 있습니다. 페이지 레이아웃을 변경하는 코드를 작성하는 대신 [woocommerce_cart]를 추가하는 것이 훨씬 쉽습니다.
- 사용하기 쉬움: 초보자에게 매우 친숙합니다. 단축 코드를 복사하기만 하면 됩니다. 필요한 플러그인을 설치하는 것보다 훨씬 쉽습니다.
- 코딩 없음: 코딩 지식이 필요하지 않습니다. 핸들러 함수의 구문만 알면 됩니다.
- 초보자를 위한 전체 제어: 단축 코드를 사용하여 페이지 디자인을 완전히 제어할 수 있습니다. 장바구니, 제품 및 결제와 같은 모든 주요 전자 상거래 페이지의 모든 측면을 사용자 정의할 수 있습니다.
WooCommerce 단축 코드의 대안
필요에 맞는 단축 코드를 찾지 못한 경우 다음과 같은 몇 가지 대안이 있습니다.
- WooCommerce 위젯 : WooCommerce에는 블록 편집기를 사용하는 자체 위젯이 있습니다. 이를 사용하려면 대시보드로 이동하여 사이드바에서 모양을 클릭하고 위젯을 클릭하십시오. 왼쪽 상단의 +를 클릭한 후 원하는 위젯을 드래그 앤 드롭하여 원하는 위젯을 검색할 수 있습니다.
- WooCommerce 블록: 무료로 설치할 수 있는 플러그인입니다. 추천 제품 및 필터 제품에 대해 20개 이상의 새로운 블록을 제공합니다.
- 페이지 빌더 플러그인: 우리가 가장 좋아하는 것은 방대한 리소스, 템플릿 및 테마 라이브러리를 제공하는 Elementor입니다. Elementor가 차 한잔이 아닌 경우 Gutenberg, Divi, WPBakery 및 Beaver Builder도 있습니다.
- 사용자 정의 코드: 코딩 지식이 있다면 사용자 정의 코드는 당연히 옵션입니다. 사용자 지정 클린 코드를 작성할 수 있습니다. 클린 코드가 커스텀 코드보다 나은지에 대해 WordPress 커뮤니티에서 대화가 있었습니다. 우리 의견으로는 하나가 다른 것보다 낫지 않습니다. 그들은 단지 다른 목적을 수행합니다. 단축 코드는 코딩 지식 없이 사이트를 사용자 지정하려는 초보자를 위해 설계되었습니다. 클린 코드는 개발자가 자신의 사이트가 확장 가능하고 유지 관리 가능하며 협업하기 쉬운지 확인하는 방법입니다.
마지막 생각들
초보자를 위한 WooCommerce 단축 코드가 얼마나 훌륭한지 보여드렸기를 바랍니다. 브랜드에 맞는 전자 상거래 상점을 구축할 수 있는 훌륭한 도구입니다. 그러나 WooCommerce 상점에 대한 다른 변경 사항과 마찬가지로 준비 사이트에서 먼저 변경 사항을 테스트하는 것이 좋습니다. 이렇게 하면 레이아웃과 페이지 디자인을 최종적으로 만들기 전에 테스트할 수 있습니다. BlogVault에는 초보자에게 친숙하고 빠르게 설정할 수 있는 놀라운 스테이징 사이트 기능이 있습니다.
FAQ
WooCommerce 단축 코드는 어떻게 사용합니까?
단축 코드를 사용하려면 페이지 또는 게시물을 편집한 다음 올바른 위치에 단축 코드 핸들러 기능을 추가하고 업데이트 또는 게시를 클릭하십시오. 예를 들어 페이지에 WooCommerce Cart 단축 코드를 추가하려면 페이지를 편집하고 다음을 작성하십시오. [woocommerce_cart]. 그런 다음 게시 또는 업데이트를 클릭합니다.
Woocommerce 단축 코드는 어떻게 얻습니까?
WooCommerce 단축 코드는 사전 정의된 기능이 있는 코드 조각입니다. 핸들러 기능을 알고 페이지에 추가하기만 하면 됩니다. 페이지 또는 게시물 위로 마우스를 이동하고 편집을 클릭한 다음 단축 코드를 추가합니다. 예를 들어 [woocommerce_checkout]을 추가하여 결제 양식을 페이지에 추가할 수 있습니다. 그런 다음 게시 또는 업데이트를 클릭합니다.
WooCommerce 단축 코드는 무엇입니까?
WooCommerce 단축 코드는 사용자가 WooCommerce 스토어의 기능을 변경할 수 있도록 도와줍니다. 페이지가 표시될 때 동적 콘텐츠로 대체되는 자리 표시자입니다. 제품, 가격 및 기타 정보를 표시하는 데 사용할 수 있으므로 WooCommerce 사이트 소유자에게 유용한 도구가 됩니다.
단축 코드를 사용하여 WooCommerce 페이지를 디자인하려면 어떻게 해야 합니까?
단축 코드를 사용하려면 원하는 단축 코드를 페이지 편집기에 삽입하십시오. 단축 코드는 페이지를 볼 때 원하는 콘텐츠를 자동으로 생성합니다.