워드프레스의 우커머스에서 옵션 상품을 구성하여 고객이 옵션(예: 색상, 크기 등)을 선택하여 구매할 수 있도록 할 수 있습니다. 보통 옵션 상품이라고 하면 영어로 Option으로 생각하기 쉽지만, "Variable Product"(옵션 상품)와 "Variation"(옵션)이라는 용어가 사용되므로 구글 검색 시 이 용어를 사용하면 원하는 정보를 얻을 수 있을 것입니다.

이 글에서는 우커머스 옵션 상품을 구성하는 방법을 설명하겠습니다. UI는 테마별/우커머스 버전별로 조금 차이가 있을 수 있으니 이점을 고려하여 참고하시기 바랍니다. (Flatsome 테마에서 테스트했습니다.)

[ 이 글은 2017년 9월에 최초 작성되었지만 최신 우커머스 WooCommerce 버전에 맞게 수정되어 재발행되었습니다. ]

속성 (Attribute) 지정

먼저 우커머스 속성(Attribute)을 정의하도록 합니다. 상품 > 속성 (Attributes)을 클릭합니다.

이 글을 작성할 때에는 속성이 Attributes로 영어로 표시되었지만 최신 버전에서는 한글화되어 '속성'으로 표시되고 있습니다. 상품 > 속성을 클릭하면 새 속성을 추가할 수 있는 화면이 표시됩니다.

우커머스 옵션 상품 속성 추가하기

적절한 속성을 추가합니다. 예를 들어, 컬러를 추가하고 맨 아래의 "속성 추가하기 (Add Attribute)"를 클릭합니다.

우커머스 컬러 속성 추가하기

그러면 위의 그림과 같이 오른쪽 상단에 추가된 속성이 표시됩니다. 맨 오른쪽에 있는 "용어 환경 설정 (Configure Terms)" 아이콘을 클릭합니다.

우커머스 옵션 상품 구성

그러면 위의 그림과 같이 선택한 속성 내에 추가될 세부 옵션을 추가할 수 있습니다. 원하는 색상을 추가하고 "새 컬러 추가하기" 버튼을 클릭합니다. 저는 "파랑"과 "빨강"을 추가해보았습니다.

우커머스 옵션 속성 파랑 빨강

위의 과정을 반복하여 다른 속성(예: 크기)을 정의하도록 합니다.

옵션 상품 설정하기

이제 새로운 상품을 추가하거나 기존 상품을 편집하여 "옵션 상품"을 구성하도록 합니다. 상품 > 추가하기를 눌러 적절한 상품을 생성합니다. 상품 설명 아래의 "상품 데이터 (Product Data)"에서 "옵션 상품"을 선택합니다.

우커머스 옵션 상품 추가하기

그런 다음 "상품 데이터" 아래에서 속성(Attributes)을 선택하고 지정할 속성을 선택합니다.

우커머스 옵션 상품 구성하는 방법

먼저 '컬러' 속성을 클릭하겠습니다. 그러면 '컬러'속성 중에서 이 상품에서 선택 가능한 옵션 값을 선택할 수 있습니다.

워드프레스 우커머스 상품 속성 지정

"전체 선택"을 하면 전체 속성 값이 추가됩니다(예: '파랑', '빨강'). 옵션에 사용하려는 경우 "옵션에 사용됨" 체크박스를 체크하도록 합니다. 그리고 "사용자 정의 상품 속성" 드롭다운을 클릭하면 다른 속성을 추가할 수 있습니다.

우커머스 사용자 정의 속성 추가

추가 속성을 "추가"하고 속성 값을 선택합니다. 마찬가지로 옵션으로 지정 가능하게 하려면 '옵션에 사용됨' 체크박스를 선택합니다. 설정이 완료되었으면 "속성 저장하기"를 클릭합니다.

이제 "속성" 바로 아래에 있는 "옵션"을 선택합니다.

상품 옵션 구성하기

위의 그림과 같이 두 가지 옵션 중에서 선택할 수 있습니다.

  1. 상품 옵션 추가 (Add variation)
  2. 모든 속성에 대한 상품 옵션 생성 (Create variations from all attributes)

"상품 옵션 추가"를 클릭하여 개별적으로 옵션을 추가하거나, "모든 속성에 대한 상품 옵션 생성"을 선택하여 모든 조합의 옵션을 추가할 수 있습니다. "모든 속성에 대한 상품 옵션 생성"을 클릭하면 다음 그림과 같이 모든 속성 값이 조합되어 옵션으로 추가됩니다.

우커머스 상품 옵션 구성

모든 속성에 대한 상품 옵션을 추가하면 위의 그림과 같이 모든 상품 옵션이 추가됩니다. 맨 위에 기본값으로 표시될 옵션을 지정할 수 있습니다.

옵션만 생성하고 가격을 지정하지 않았으므로 "상점에 가격이 지정되지 않은 옵션 상품은 표시되지 않는다"라는 안내 문구가 표시됩니다.

6 variations do not have prices. Variations (and their attributes) that do not have prices will not be shown in your store.

각 옵션을 클릭하여 가격을 설정하도록 합니다.

옵션 상품 가격 설정하기

불필요한 옵션은 마우스 올린 다음 '삭제'를 클릭하여 삭제할 수 있습니다.

우커머스 옵션 제거

변경 사항을 저장하고 상품 페이지를 새로 고침하면 지정한 옵션이 표시됩니다.

우커머스 옵션 상품

YITH WOOCOMMERCE PRODUCT ADD-ONS(우커머스 상품 애드온)

옵션만으로 부족한 경우가 있을 수 있습니다. 고객의 특정 요구 사항에 맞게 옵션을 추가해야 하는 경우 YITH  우커머스 상품 애드온 플러그인을 사용해볼 수 있습니다. 이 플러그인을 사용하면 아래 그림과 같이 상품을 구성할 수 있습니다.

YITH1 compressor - [워드프레스] 우커머스 옵션 상품 설정하기

yith2 compressor - [워드프레스] 우커머스 옵션 상품 설정하기

yith3 compressor - [워드프레스] 우커머스 옵션 상품 설정하기

우커머스 추가 상품 옵션 추가하기

위에서 잠시 설명했지만 "variation"이라는 용어가 한글로 "옵션"으로 번역되어 있습니다. variation을 사전에서 찾아보면 "변화, 변동"의 의미를 가지고 있습니다. 즉, 동일한 상품의 다른 버전 정도로 해석할 수 있습니다.

"옵션"이라는 용어는 조금 다른 뜻을 가질 수 있습니다. 예를 들어, 아래 그림과 같이 상품에 어떤 부가적인 구성품을 추가하는 것에 대하여 "옵션" 추가라는 용어를 사용하기도 합니다.

Added extra product options

위와 같이 추가 상품 옵션(Product Option)을 추가하려는 경우 WooCommerce Extra Product Options라는 플러그인을 사용할 수 있습니다.

Extra Product Option Plugin

WooCommerce Extra Product Options 플러그인은 우커머스 관련 플러그인으로는 드물게 주간 베스트셀링 플러그인 목록에 이름을 올리고 있습니다. 그만큼 이와 같은 기능을 원하는 사용자가 많은 것 같습니다.

워드프레스 쇼핑몰에서 상품 옵션을 추가하려는 경우 이 플러그인을 사용하면 편리할 것 같습니다. 참고로 이 플러그인은 다음 플러그인과는 호환되지 않는다고 나와 있으니 참고하시기 바랍니다(2016년 4월 기준).

  • AnsPress, Tracking Code Manager, WooCommerce Bookings from Woothemes, Business Hours Pro WordPress Plugin, Woocommerce Add to cart Ajax for variable products (not compatible with the edit options feature in the cart), WooCommerce Wholesale Ordering, WooCommerce Group Pricing, Subscriptio – WooCommerce Subscriptions, VarkTech Pricing Deals for WooCommerce, Woocommerce Prices by User Role (* Woocommerce Prices by User Role 플러그인은 사용자 역할(회원 등급)별로 가격을 설정하는 기능을 제공하네요. 그리고 게스트에게는 장바구니 버튼이나 가격을 숨길 수 있는 기능도 있습니다.)

워드프레스 우커머스 상품 번들 플러그인

사이트에서 고객이 어떤 상품을 구매할 때 고객이 추가로 구매하기를 원하는 상품이 있는 경우 YITH WooCommerce Product Bundles 플러그인을 사용할 수 있습니다. 자세한 내용은 워드프레스 우커머스 상품 번들 플러그인 – YITH WooCommerce Product Bundles를 참고하세요.

YITH WOOCOMMERCE BULK PRODUCT EDITING(우커머스 대량 상품 일괄 편집)

많은 상품이 있고 상품 설명, 카테고리, 가격 등을 빠르게 수정하고 싶은 경우에 YITH WOOCOMMERCE BULK PRODUCT EDITING 플러그인을 사용해볼 수 있습니다.

참고:

14 개 댓글

  1. 혹시 프리뷰페이지에
    상품이미지가 다양한 옵션에 따라서 부분적으로
    해당 부분만 바뀌는 플러그인이나 테마가 없을까요..?
    봄담아 라는 청첩장 홈페이지인데 링크는 아래와 같습니다..
    https://www.bomdama.com/shop/fr-1/
    이런식으로 주문커스텀 페이지를 만들고 싶은데
    도움요청드립니다...ㅠㅠ

    • 안녕하세요?

      우커머스 상품 디자이너라는 플러그인이 있는데요, 사용자가 직접 문구를 추가하거나 색상 등을 바꿀 수 있는 기능을 제공합니다. 다음 글을 참고해보세요.

      https://www.thewordcracker.com/basic/woocommerce-custom-product-designer/

  2. 돈주고 산 책보다 이 포스트가 더 잘 설명되어 있고 맞습니다. 덕분에 도움이 많이 됩습니다. 감사합니다.

    • 안녕하세요?

      블로그를 방문해주셔서 감사합니다.

      책이란 것이 지면이 한정되어 있기 때문에 아무래도 중요한 부분을 우선적으로 싣게 될 것입니다. 지면상 상세한 것을 설명하기에는 한계가 있을 것 같습니다.

      또, 워드프레스가 빠르게 발전하다 보니 책을 구상한 시점과 실제 출판 시점 사이에 갭이 있다 보니 최신 워드프레스 정보를 담기에는 쉽지 않은 측면이 있을 것입니다.

  3. 안녕하세요.
    제가 우커머스로 홈페이지를 만들다가 하나가 해결이 안되서 너무 답답해서 질문 드립니다. ㅜㅜ
    단일 상품 페이지일때는 장바구니 버튼이 처음부터 활성화되어 제대로 보여집니다.
    옵션 상품일때만 장바구니에 담기 부분의 버튼색과 글씨색이 바뀌었다가 옵션을 선택한 뒤에야 정상적으로 보여지는데요.
    옵션을 선택하기 전에 버튼을 제대로 보여주고 싶은데요.
    초보자라 우커머스의 어디 소스를 손대야 할지를 모르겠습니다.
    도움 좀 주시면 정말 감사하겠습니다. ^^
    http://joonfont.com/상품/nemogothic
    여기서 장바구니 담기를 바로구매처럼 만들고 싶습니다.

    • 안녕하세요?

      단순 상품일 때와 옵션 상품 일때의 페이지를 비교해보시기 바랍니다. 단순 상품에 표시되는 장바구니 버튼의 스타일을 확인하여 옵션 상품일 때에 표시되는 장바구니 버튼의 스타일에 적용하시면 됩니다.

      방법은 CSS를 통해 하시면 됩니다. http://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90-css%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B8%B0%EC%B4%88/ 글을 참고해보세요.

  4. 역시나 좋은 정보가 가득하다는^^ 감사합니다!!
    그런데 궁금한게... 옵션이 아니라 상품 상세페이지에서 메모를 하고 싶은 경우, inpuut 박스를 넣어서 구매자가 내용을 추가하게끔 하고 싶은데 이럴때는 어떻게 해야 할까요??
    단순상품으로 등록하면 옵션내용이 안나와서요. 또 옵션설정(가격을 달리하는것)이 아닌경우 단순히 입력 인풋박스를 넣고 싶을때... ^^;;

    • 안녕하세요?

      사용자가 옵션을 지정하거나 기타 사항을 입력할 수 있는 입력 필드를 넣고 싶다는 의미로 들리네요.

      이와 관련된 플러그인이 하나 있습니다. WooCommerce Extra Product Options( https://1.envato.market/QdoKP )라는 플러그인입니다.

      http://www.thewordcracker.com/wp-content/uploads/2016/11/WooCommerce-Option-input.jpg

      추가: 다시 보니 위에서 이 플러그인이 잠깐 언급되어 있네요...

      • 아넵, 답변감사합니다. 네, 내용에서 해당 플러그인은 이미 보았습니다.
        다만 제가 넣고 싶은건 옵션에 따라 가격이 변하는게 아니라 상품에 대해 속성을 지정하게 하고 싶어서 문의를 드렸습니다.
        ㅎㅎ 감사합니다.

      • 안녕하세요?

        말씀하신 기능을 YITH( https://yithemes.com?refer_id=1046999 )에 문의해보니까 그런 기능을 하는 플러그인이 없다고 하네요.
        코드캐년에서 검색해보아도 없는 것 같고요.
        혹시 원하는 기능의 플러그인을 찾게 되시면 알려주시겠어요? (다른 분들도 알 수 있도록 글을 업데이트해보겠습니다.)

      • 넵!! 그렇군요~ 아!! 문의까지... 넘넘 감사합니다. 일단은 위의 플러그인의 TEXTAREA를 통해서 사용해볼까 생각중입니다. 감사합니닷~~

  5. 안녕하세요
    우커머스를 사용하고 있는데
    Attributes를 매번 똑같이 설정하려니 너무 힘이 드는데
    Attributes 기본 세팅 해두고 항상 기본 적용되게 하는 플러그인이나 관련 기술이 있을까요?
    아무리 찾아도 관련 자료는 없네요 ㅠ

    • 안녕하세요?

      Attribute를 키워드로 플러그인을 검색해보셔야 할 것 같습니다.

      Woocommerce Bulk Attribute Manager ( https://wordpress.org/plugins/woocommerce-attributes-menu-manager/ ) 플러그인이 찾고 있는 기능을 제공할 것도 같지만 업데이트가 잘 안 되고 평가가 좋지 않네요.

      아래 플러그인들을 한 번 체크해보시기 바랍니다. 혹시 원하는 기능을 제공하는 플러그인이 있을 수도 있고, 없을 수도 있을 것 같습니다.

      WooCommerce Attributes Menu Manager ( https://wordpress.org/plugins/woocommerce-attributes-menu-manager/ )

      Improved Variable Product Attributes for WooCommerce ( https://1.envato.market/aGqKW )

      YITH WOOCOMMERCE COLOR AND LABEL VARIATIONS ( https://yithemes.com/themes/plugins/yith-woocommerce-color-and-label-variations/?refer_id=1046999 )

      YITH WOOCOMMERCE PRODUCT ADD-ONS ( https://yithemes.com/themes/plugins/yith-woocommerce-product-add-ons/?refer_id=1046999)

  6. "Configure terms"는 우커머스 한글 파일을 검색해보니 "용어 환경 설정"으로 번역되어 있네요. 참고로 보통 "Configure"는 "구성(하다)"로 번역됩니다.

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요