WooCommerce에서 제품을 더 잘 추가하고 사용자 정의하는 방법은 무엇입니까? 예제가 포함된 종합 안내서

게시 됨: 2018-06-22

상향 판매로 컴퓨터를 판매하고 수익을 극대화하는 것은 어려울 수 있습니다. 이 가이드에서는 WooCommerce에 제품을 추가하는 방법을 배웁니다. 그런 다음 무료 플러그인을 사용하여 WooCommerce 제품 페이지를 사용자 지정하는 방법을 보여 드리겠습니다. MacBook Pro를 예로 들어 WooCommerce 컴퓨터 빌더를 볼 수 있습니다. 결국 WooCommerce 상점에서 맞춤형 제품을 판매하고 더 많은 수익을 올릴 준비가 된 것입니다.

️ 제품을 추가할 때 WooCommerce 의 옵션이 부족하거나 너무 복잡하다고 생각하십니까?

오늘은 무료 플러그인으로 WooCommerce에서 제품을 추가하고 사용자 지정하는 방법을 보여드리겠습니다!

목차

  • WooCommerce 제품 추가 방법 - 빠른 가이드
  • WooCommerce 제품 사용자 정의 - 컴퓨터 빌더 예
  • WooCommerce 컴퓨터 빌더 제품 페이지 사용자 지정
  • 사용자 지정 필드가 있는 WooCommerce 제품
  • 플러그인에 대한 요약 및 추가 정보

WooCommerce 제품 추가 방법 - 빠른 가이드

몇 단계로 제품을 만드는 방법을 살펴보겠습니다.

  1. WooCommerce의 제품

    제품 사용자 지정 WooCommerce
    WooCommerce 제품 목록

    먼저 제품 메뉴로 이동하여 항목을 추가, 제거 및 관리합니다.

  2. 제품 추가 또는 수정

    그런 다음 새로 추가 버튼을 클릭하거나 기존 제품을 편집합니다.

    WooCommerce 맞춤형 제품
    WooCommerce 제품 편집
  3. WooCommerce 제품 설정

    이제 제품 이름, 설명 및 이미지를 선택합니다. 또한 제품 데이터 섹션으로 이동하여 가격, 재고, 속성, 세금 등을 결정합니다.

    제품 사용자 지정 WooCommerce
    몇 단계로 WooCommerce 제품을 추가하는 방법

    그런 다음 새 제품을 게시하거나 기존 제품을 업데이트합니다. 그게 다야!

  4. 제품 유형을 선택하세요

    제품 유형을 선택할 수도 있습니다.

    WooCommerce에 제품을 추가하는 방법입니다.
    WooCommerce 제품 유형
  5. 제품 카테고리 및 태그

    물론 항목을 더 잘 구성하기 위해 제품 범주 또는 태그와 같이 설정할 수 있는 추가 항목이 많이 있습니다. 기본 제품 화면의 편집 옵션을 사용하여 일부 제품 데이터를 더 빠르게 편집할 수도 있다는 점을 지적하고 싶습니다.

    WooCommerce 맞춤형 제품
    WooCommerce 제품 편집
  6. WooCommerce에서 제품을 사용자 정의하는 방법은 무엇입니까?

    ️ 제품을 추가할 준비가 된 것 같습니다 . WooCommerce 제품 빌더 덕분에 제품을 준비하고 추가 데이터(예: 속성, 태그 및 제품 갤러리)를 사용할 수 있습니다.

    다음 부분에서는 훨씬 더 많은 것을 제공하기 위해 사용자 지정 필드로 WooCommerce 제품을 사용자 지정하는 방법을 보여드리겠습니다!

심층 가이드에서 WooCommerce 제품 추가 및 관리 에 대해 자세히 알아보세요.

WooCommerce 제품 사용자 정의 - 컴퓨터 빌더 예

Apple 웹 사이트에 가본 적이 있습니까? 일반적으로 구입하려는 컴퓨터 구성 요소를 선택할 수 있습니다 .

언급했듯이 이 가이드의 예로 MacBook Pro를 사용하기로 결정했습니다. 우리는 이 시점에서 실제 예제를 다룰 것입니다.

기본적으로 마법사의 모습은 다음과 같습니다.

WooCommerce에서 제품 페이지를 사용자 지정하는 방법
MacBook Pro 사용자화 - Apple.com

이 가이드에서 마법사 옵션을 동일하게 구성하여 WooCommerce 맞춤형 제품인 컴퓨터 빌더를 만들 것입니다.

구성하면 다음과 같이 표시됩니다.

WooCommerce 제품 페이지 사용자 지정
WooCommerce Computer Builder(확대하려면 클릭). 유연한 제품 필드로 제품 페이지 우커머스를 사용자 정의하십시오.

분명히 Apple 웹 사이트의 것과 정확히 같지는 않습니다. 이것이 어떻게 작동하는지 보여주기 위한 기본 구성입니다.

기본 Storefront 테마를 넘어서는 일부 사용자 정의 스타일을 사용하여 아름다운 것을 만들 수 있습니다. 이 가이드를 쉽게 이해할 수 있도록 이 가이드에서는 이 주제를 다루지 않겠습니다. 컴퓨터 빌더 예제를 사용하여 WooCommerce 제품을 사용자 정의하는 방법을 가르치고 싶을 뿐입니다. 지금은 스타일링이 중요하지 않습니다.

다음으로 넘어가기 전에 보여드리고 싶은 또 다른 것을 살펴보세요.

제품 페이지의 제품 추가 기능
유연한 제품 필드로 얻은 가격 내역

이 계산기는 WooCommerce 컴퓨터 빌더에서 옵션을 선택하면 나타납니다.

실제 사례 보기: 데모 스토어에서 Macbook Pro →

WooCommerce 컴퓨터 빌더 제품 페이지 사용자 지정

먼저, 상점 소유자가 WooCommerce 제품에 사용자 정의 필드 및 추가 기능을 추가하고 선택적으로 비용을 청구할 수 있는 플러그인인 유연한 제품 필드가 필요합니다. 이 가이드에서는 이 플러그인을 사용합니다.

유연한 제품 분야 WooCommerce

각인, 선물 포장, 선물 메시지, 명함, 우표를 판매하고 선택적으로 비용을 청구(고정 또는 백분율)하는 제품 마법사를 만듭니다.

무료로 다운로드 또는 WordPress.org로 이동
10,000+ 활성 설치
마지막 업데이트: 2023-03-13
WooCommerce 7.1 - 7.5.x에서 작동
이 자습서에서는 Flexible Product Fields PRO 에서 사용할 수 있는 가격 책정조건부 논리 기능을 사용합니다. 그러나 먼저 무료 버전을 다운로드하고 자신에게 적합한지 여부를 확인하는 것이 좋습니다!

WordPress.org에서 무료로 다운로드하거나 유연한 제품 필드를 검색하는 상점의 플러그인 섹션에서 바로 설치할 수 있습니다.

WooCommerce 추가 제품 애드온
Flexible Product Fields 무료 버전 설치 및 활성화

️ 여기서 논의하는 모든 사용 사례를 다루려면 플러그인의 PRO 버전이 필요합니다. 요컨대, 무료 버전은 추가 옵션에 대해 고객에게 요금을 부과하지 않습니다. 그러나 추가 필드 방법이 필요에 맞는지 확인할 수 있습니다.

무료 버전을 사용하면 18개의 사용자 지정 제품 필드로 WooCommerce 제품 페이지를 사용자 지정할 수 있습니다 . 따라서 프로세서 업그레이드와 같은 모든 옵션은 무료 버전에서 사용할 수 있습니다. 필요하다고 판단되면 플러그인을 쉽게 업그레이드할 수 있습니다.


️ 플러그인을 설치했으면 구성해 봅시다. WordPress 메뉴(1)에서 제품 → 제품 필드를 선택합니다. 그런 다음 새 필드 그룹(2)을 추가해야 합니다.

WooCommerce 제품 추가 기능 - 새 필드 그룹 추가
유연한 제품 필드에 새 필드 그룹 추가

사용자 지정 필드로 WooCommerce 제품 사용자 지정

마지막으로 필드 구성 섹션에 도달했습니다. 이 기사가 귀하에게 쉽기를 바라므로 단계별로 안내해 드리겠습니다. 곧 매장에서 직접 MacBook 마법사를 만들 수 있게 될 것입니다.

WooCommerce 컴퓨터 빌더의 전체 구성은 다음과 같습니다.

유연한 제품 필드로 WooCommerce 제품 페이지 사용자 지정
유연한 제품 필드로 추가된 추가 제품 애드온

당신에게 압도적으로 보일 수 있지만 걱정하지 마십시오. 제가 언급한 것처럼 새 필드로 WooCommerce 제품 페이지를 사용자 지정하기 위한 구성을 단계별로 안내해 드리겠습니다. 그럼 시작하겠습니다!

이 자습서에서는 Flexible Product Fields PRO 에서 사용할 수 있는 가격 책정조건부 논리 기능을 사용합니다.

주요 설정

단일 제품 페이지 사용자 지정 WooCommerce
기본 설정 - WooCommerce 제품 페이지 사용자 정의

섹션 설정에서 제품 페이지의 필드를 표시할 위치를 선택할 수 있습니다.

그런 다음 이 그룹을 다음에 할당 할 수 있습니다.

  • 선택한 제품,
  • 매장의 모든 제품,
  • 또는 선택한 카테고리.

이 시점에서 필드를 제품(MacBook Pro)에 할당합니다. 무료 버전에서 사용할 수 있는 유일한 옵션입니다 . 예를 들어 매장에서 컴퓨터와 같은 범주에 대한 할당을 사용할 수 있습니다. 이 경우 PRO 버전이 필요합니다.

마지막으로 주문 옵션을 살펴보십시오. 제품에 2개 이상의 필드 그룹을 추가하는 경우 표시 순서를 설정할 수 있습니다.

필드 추가

다음 단계는 WooCommerce 컴퓨터 빌더에 새 제품 필드를 추가하는 것입니다. 애드온 목록을 이미 알고 계실 것입니다. 하나씩 추가해야 합니다.

Flexible Product Fields PRO에서 추가 애드온 사용 가능
이 WooCommerce 제품 애드온 최종 가이드에서 사용할 필드

크기(전파장)

다양한 크기를 제공하려면 라디오 필드를 구성해야 합니다.

크기 추가 애드온 라디오 필드
제품 페이지의 크기 필드

먼저 레이블 에 필드 이름을 입력합니다. 그런 다음 필드 유형 에서 라디오를 선택합니다. 필수 는 다음 옵션입니다. 이를 사용하지 않으면 고객이 사이즈를 선택하지 않고 주문할 수 있습니다. 그때 필요한 크기를 어떻게 알 수 있습니까?

제품 페이지 사용자 지정 WooCommerce - 라디오 필드
라디오 필드 설정 - 제품 페이지에 애드온을 추가하는 방법입니다.

조만간 원하는 방식으로 필드 스타일을 지정할 수 있습니다. 이 상황에서 사용할 수 있는 CSS 클래스 옵션이 있습니다.

옵션 섹션에서 마지막으로 상점에서 제공할 크기를 구성할 수 있습니다. 이 경우 13인치와 15인치 크기를 사용합니다. 두 번째는 $600 더 비쌉니다. 설정 방법은 다음과 같습니다. 가격 탭으로 이동하여 추가 가격을 추가하세요.

추가 가격 책정(Flexible Product Fields PRO)
가격 탭에서 추가 가격 추가

우리는 마지막 옵션인 조건부 논리를 사용하지 않습니다. 그러나 나중에 WooCommerce 컴퓨터 빌더에서 사용할 것입니다.

이 자습서에서는 Flexible Product Fields PRO 에서 사용할 수 있는 가격 책정조건부 논리 기능을 사용합니다.

프로세서(라디오 필드)

라디오 추가 애드온 제품 페이지
제품 페이지의 프로세서 필드

프로세서 는 무선 필드이기도 하며 크기 필드와 동일한 방식으로 구성할 수 있습니다. 선택한 옵션에 추가 가격을 추가하는 경우에도 마찬가지입니다.

WooCommerce는 추가 가격으로 라디오 필드로 제품 페이지를 사용자 정의합니다.
Flexible Product Fields PRO로 추가된 라디오 필드에 추가 가격 추가

크기 에서는 값과 레이블이 모두 같았지만 여기서는 다른 값과 레이블을 사용합니다. 값은 상점 관리자만 볼 수 있으며 데이터베이스에 저장됩니다. 레이블은 제품 페이지에서 고객에게 표시됩니다.

메모리(전파장)

무선 필드는 제품 페이지를 풍부하게 합니다.
제품 페이지의 메모리 필드

이번에는 모든 것을 알고 있습니다. WooCommerce 컴퓨터 빌더에 메모리 옵션을 제공하기만 하면 됩니다. 이전 단계와 정확히 동일한 방식으로 진행합니다.

보관(전파장)

라디오 필드로 WooCommerce 제품 페이지 사용자 지정
제품 페이지의 저장 영역

이 라디오 필드를 구성하는 방법을 이미 알고 있습니다. 유일한 차이점은 2개의 추가 가격을 추가해야 한다는 것입니다. 바라보다:

유연한 제품 필드 PRO를 사용하여 WooCommerce 제품 페이지를 사용자 정의하는 방법입니다.
추가 가격 옵션 2개 추가

키보드 언어(필드 선택)

추가 애드온 선택
제품 페이지의 키보드 언어 필드

이번에는 새로운 필드 유형인 select field 를 구성합니다.

구성은 이전 구성과 매우 친숙합니다. 주요 차이점은 필드 유형 에서 선택 입니다.

선택 드롭다운 필드로 WooCommerce 제품 페이지 사용자 지정
컴퓨터 마법사의 키보드 언어 필드

납기(일자란)

상품 페이지의 납기란

여기에서 다른 필드 유형을 볼 수 있습니다. 이것은 날짜 필드입니다. 일반 설정은 이전 설정과 매우 유사하지만 고급 탭 에 몇 가지 추가 기능이 있습니다.

날짜 필드를 사용하여 WooCommerce에서 제품 페이지를 사용자 지정하는 방법
날짜 필드의 고급 설정

️ 일부 기능은 다음과 같습니다.

  • 날짜 형식
  • 일 전
  • 일 후

며칠 전후로 고객 이 선택할 수 있는 날짜의 시간 범위를 설정할 수 있습니다. 제작 시간이 필요하여 제품 각인을 제공할 때 유용할 수 있습니다.

선물 옵션 표시(확인란 필드)

이 자습서에서는 Flexible Product Fields PRO 에서 사용할 수 있는 가격 책정조건부 논리 기능을 사용합니다.

이 제품 필드는 구성에서 매우 중요합니다. 기본적으로 다음과 같이 표시됩니다.

확인란 필드를 추가하여 단일 제품 페이지 woocommerce 사용자 지정
제품 페이지에 선물 옵션 필드 표시

고객이 이 필드를 확인하면 새 필드가 표시됩니다.

유연한 제품 필드(PRO)로 추가된 조건부 논리
제품 페이지에 선물 옵션 필드 표시(표시됨)

이것이 조건부 논리입니다 . 그러나 이 필드에 대한 조건부 논리 옵션을 설정하지 않습니다. 일반적인 방법으로 필드를 추가하고 이 시점에서 조건부 논리 탭 에 대해 걱정해야 합니다.

확인란 필드 일반 설정
컴퓨터 마법사의 선물 옵션 필드 표시
조건부 논리는 Flexible Product Fields PRO 의 중요한 기능입니다. 이 컴퓨터 빌더와 같이 WooCommerce 제품 페이지를 사용자 정의할 때 매우 유용할 수 있습니다. 이 경우 다른 필드에서 이 옵션을 설정해야 합니다.

각인(텍스트 필드)

이것은 고객이 일부 텍스트 즉 조각을 제공할 수 있는 간단한 필드입니다.

조각 추가 애드온 WooCommerce 제품 페이지
제품 페이지의 각인 필드

이 필드는 고객이 선물 옵션 표시 확인란을 선택한 경우에만 표시되어야 합니다.

이 경우 이 필드에 대한 조건부 논리를 구성해야 합니다.

가격 탭에서 추가 가격을 추가하는 사용자 정의부터 시작하십시오.

이제 이 추가 기능을 추가할 조건부 논리 탭 으로 이동하겠습니다.

WooCommerce 맞춤형 제품
조건부 논리 설정

위에서 볼 수 있듯이 조건부 논리 옵션을 표시했습니다. 규칙 에서 선물 옵션 표시 필드가 선택 되었을 때 이 필드가 표시되도록 설정했습니다.

현재 WooCommerce 조건부 제품 옵션 가이드가 흥미로울 것입니다.

선물 포장(체크박스 필드)

단일 제품 페이지 사용자 지정 WooCommerce
제품 페이지의 선물 포장 필드

위와 같은 방법으로 이 필드에 대한 조건 논리를 설정해야 합니다. 고객이 선물 포장에 대해 추가 비용을 지불하기를 원하는 경우 추가 가격을 추가할 수도 있습니다. 가격을 추가하는 방법을 이미 알고 있습니다.

추가 애드온으로 WooCommerce 제품 페이지를 사용자 지정하는 방법
선물 포장 - Flexible Product Fields PRO로 조건부 논리 설정

선물 메시지(텍스트 필드)

선물 메시지 추가 애드온
제품 페이지의 선물 메시지 필드

마지막으로 마지막입니다. 여기서도 조건 논리를 설정해야 합니다.

고급 탭 에서 글자 수 제한을 설정할 수도 있습니다.
조건 논리 추가
컴퓨터 마법사의 선물 메시지 필드
사전 구성된 플러그인과 제품으로 데모 스토어를 만들 수 있습니다. 플러그인으로 WooCommerce 제품을 추가하고 제품 페이지를 사용자 지정하는 방법을 테스트할 수도 있습니다!

다시 한 번 우리가 달성한 효과를 살펴보겠습니다.

WooCommerce 제품 추가 방법
유연한 제품 필드 PRO로 추가된 추가 애드온

유연한 제품 분야 PRO WooCommerce 59 달러

각인, 선물 포장, 선물 메시지, 명함, 우표를 판매하고 선택적으로 비용을 청구(고정 또는 백분율)하는 제품 마법사를 만듭니다.

장바구니에 담기 또는 세부정보 보기
10,000+ 활성 설치
마지막 업데이트: 2023-03-15
WooCommerce 7.1 - 7.5.x에서 작동

플러그인에 대한 요약 및 추가 정보

이 기사에서는 WooCommerce 제품을 추가한 다음 무료 플러그인으로 사용자 정의하는 방법을 설명했습니다!

또한 이 WooCommerce Computer Builder Guide를 읽음으로써 컴퓨터 빌더를 생성하는 방법을 배웠습니다. 도움이 되었기를 바라며 이제 WooCommerce 스토어에서 맞춤형 제품을 판매 할 준비가 되셨기를 바랍니다. 매장에 컴퓨터 마법사를 설치할 준비가 되셨습니까?

결국 몇 가지 질문이 있을 수 있습니다. 그냥 마음 편하게 물어봐! 아래의 설명 섹션을 사용하십시오.

마지막으로 이 기사에서 플러그인의 모든 기능을 다루지는 않았습니다. WooCommerce 추가 제품 옵션 가이드가 흥미로울 것 같습니다. 또 다른 훌륭한 글입니다. 이 플러그인에 대한 더 많은 사용 사례를 알고 싶다면 읽어보세요.