WooCommerce 가변 제품 속성에 대한 라디오, 레이블, 색상 및 이미지 변형 견본을 만드는 방법

WooCommerce 제품 변형 견본은 사이트 판매 및 전환을 촉진하기 위해 도입된 놀라운 기술입니다.

견본이 믿을 수 없는 이유를 생각해보세요. 맞죠?

제품 변형 견본은 기본 WooCommerce 제품 변형 선택 드롭다운 필드를 대체하고 색상, 이미지, 레이블 및 라디오 견본을 활성화합니다. 결과적으로 고객은 원하는 제품 변형을 쉽게 선택하고 즉시 장바구니에 추가할 수 있습니다.

이 튜토리얼에서는 OceanWP 테마를 사용하여 WooCommerce 가변 제품에서 라디오, 레이블, 색상 및 사진 변형 견본을 활성화하는 방법을 보여 드리겠습니다 .

OceanWP 테마가 설치되어 있다고 가정합니다. 가변 제품에서 견본을 활성화하려면 먼저 WooCommerce 변형 견본 플러그인을 설치하십시오.

라이브 데모 | WooCommerce 변형 견본 플러그인 다운로드

WooCommerce 변형 견본 설치

사이트 백엔드에서도 WooCommerce 변형 견본 플러그인을 다운로드할 수 있습니다. 최상위 관리자 공지에서 플러그인 설치 시작 을 선택합니다.

WooCommerce 변형 견본 및 Ocean Extra 플러그인을 설치하고 활성화합니다.

견본 플러그인을 설치하라는 상단 알림을 받지 못한 경우 플러그인 >> 새로 추가 로 이동하십시오. 검색 필드에서 WooCommerce 변형 견본 을 검색합니다. Emran Ahmed의 WooCommerce 변형 견본 플러그인을 설치하고 활성화하십시오.

플러그인 설치 및 활성화가 성공적으로 끝나면 OceanWP 테마에서 라디오, 레이블, 색상 및 이미지 변형 견본을 만들 차례입니다. 프로세스를 시작하겠습니다.

WooCommerce 변형 견본 설정

OceanWP 테마에 Woocommerce 변형 견본 및 사진 플러그인 을 설치한 후. 가변 제품에 대해 이 플러그인을 구성할 시간입니다. 이 플러그인을 설치하는 방법은 두 가지가 있습니다.

1. 기존 가변 제품에 대한 변형 견본 사용
2. 새로운 가변 제품의 경우 변형 견본 설정

이 자습서에서는 두 가지 방법을 모두 설명합니다.

기존 가변 제품에 대한 변형 견본 활성화

많은 사람들이 이미 상점에서 만든 가변 제품을 가지고 있습니다. 제품 변형 드롭다운 선택을 라디오, 레이블, 색상 및 이미지 견본으로 바꾸려면 여기에서 이 자습서를 따랐습니다. 다음 스크린샷을 확인하세요. 기본 변형 선택 드롭다운은 현재 사이트의 다음 스크린샷과 같습니다. 다음 단계에서는 변형 선택 필드를 아름다운 견본으로 바꾸는 방법을 보여 드리겠습니다.

전에

후에

01단계: 속성 편집

제품 >> 속성 으로 이동하십시오. 기존의 모든 전역 속성은 속성 섹션에 나열됩니다. WooCommerce Variation Swatches 플러그인을 설치한 후 Type 필드를 추가합니다. 기본적으로 유형 제목 아래에 선택 이 표시됩니다.

WooCommerce 견본 플러그인에는 색상, 이미지, 버튼의 세 가지 속성 유형이 있습니다. 원하는 속성에 대한 속성 유형을 설정할 수 있습니다.

데모용으로 Fabrics, Pattern 및 Label 속성이 생성되었습니다. Pattern 속성에 대한 Color 속성 유형, Fabrics 속성에 대한 Image 속성 유형 및 Label 속성에 대한 Button 속성 유형을 추가합니다.

색상 속성 유형을 패턴 속성으로 설정하려면 편집 을 클릭합니다.

유형 드롭다운에서 색상 유형을 선택합니다.

제품 >> 속성 으로 돌아가기 . Pattern 속성과 같은 Fabric 속성을 편집합니다.

제품 >> 속성 을 ​​다시 가져옵니다. Fabric 및 Pattern 속성과 같은 레이블 속성을 편집합니다.

속성 유형 선택이 완료되면 속성 목록 페이지로 돌아갑니다. 속성 목록은 다음 이미지와 같습니다.

제품 속성에 대한 속성 유형을 선택한 후 제품의 프런트엔드는 다음 스크린샷과 같습니다.

Label 속성의 변형은 괜찮아 보이지만 Pattern 속성의 변형은 색상을 정의해야 하고 Fabric 속성의 변형은 이미지를 추가해야 합니다.

02단계: 변형 편집

패턴 속성 내에서 색상을 변형으로 정의합니다. 제품 >> 속성 으로 이동하십시오. 패턴 속성에서 용어 구성 을 선택하십시오.

용어 구성을 선택하면 속성 변형 목록이 나타납니다. 패턴의 경우 파란색 , 녹색 및 빨간색 변형의 세 가지 변형이 여기에 나열됩니다. 변형 색상을 추가하려면 각 변형을 하나씩 편집합니다.

데모를 보려면 녹색 변형에 대한 링크 편집 을 선택하십시오.

변형 편집 패널에서. Colorpicker 에서 원하는 색상을 선택하고 업데이트 버튼을 눌러 변경 사항을 업데이트합니다.

모든 변형 색상이 성공적으로 업데이트되면 프런트엔드는 다음과 같이 표시됩니다.

패턴 속성 변형을 업데이트한 후 패턴 속성과 같은 용어 구성 을 선택하여 패브릭 속성을 편집합니다.

용어 구성 을 누르면 패턴처럼 Fabric 용어 목록이 나타납니다. 변형 이미지를 삽입하려면 각 변형을 편집하세요. 데모용으로 Chambray 속성에 대한 링크 편집 .

변형 편집 패널에서. 이미지에서 원하는 변형 이미지 를 업로드하고 업데이트 버튼을 눌러 변경 사항을 업데이트하십시오.

모든 변형에 대한 이미지를 업데이트한 후 프론트엔드는 다음 스크린샷을 원합니다.

새로운 가변 제품에 대한 설정 변형 견본

자신의 매장을 위해 생성된 가변 제품이 없는 사람들을 위한 단계입니다. 먼저 가변 제품을 만들고 견본을 활성화합니다.

01단계: 전역 속성 및 변형 생성

플러그인 설치 및 활성화를 성공적으로 마친 후 제품 >> 속성 에서 원하는 속성을 전역적으로 생성합니다. 패턴 생성, 직물, 길이 및 크기 변형은 유형 드롭다운에서 속성 제목과 해당 속성 유형을 입력합니다.

color, image 및 label Pattern , Fabrics , Label 및 Size 속성이 성공적으로 생성되면 왼쪽에 속성 목록이 생성됩니다.

전역 속성을 생성한 후 용어 구성을 선택하여 속성 변형을 추가합니다. 패턴 속성에 대한 변형을 생성하려면 용어 링크 구성 을 선택합니다. 이름 필드를 채우고 색상 코드를 선택합니다. 색상 속성에 대한 Green , Blue 및 Red 변형을 만듭니다.

패턴 속성에 대한 변형을 추가하면 속성 변형 목록이 왼쪽 화면에 나타납니다.

제품 >> 속성 으로 다시 이동하십시오. Fabrics 속성에 대한 변형을 작성하고 Fabrics 에서 용어 링크 구성 을 선택하십시오. 이름 필드 를 채우고 미디어 라이브러리에서 변형 이미지를 추가하거나 컴퓨터에서 업로드합니다.

이미지 속성에 대해 Chambray, Corduroy 및 Embossed 변형을 생성하면 왼쪽에 나타납니다.

이미지 및 색상 변형과 같은 라디오 및 레이블 속성에 대한 변형을 만듭니다.

02단계: 가변 제품 페이지에 견본 표시

가변 제품 페이지에서 견본을 활성화합니다. 원하는 제품 편집 모드로 들어가 제품 데이터 에서 가변 제품 을 선택합니다.

속성 탭으로 이동합니다. 맞춤 제품 속성 드롭다운을 클릭합니다. 여기에 전역적으로 생성된 모든 속성이 나타납니다. 모든 속성을 하나씩 추가합니다.

모든 속성을 추가한 후 각 속성 설정에서 모두 선택 버튼을 눌러 사용 가능한 모든 변형을 한 번에 추가합니다. 제품 속성 변형을 추가한 후 속성 저장 버튼을 선택하여 설정을 저장합니다.

이제 변형 탭으로 이동합니다. 변형 추가 드롭다운을 클릭합니다. 여기서 두 가지 옵션이 나타납니다. 첫 번째는 변형 추가 이고 두 번째는 모든 속성에서 변형 만들기입니다.

모든 속성에서 변형 생성을 선택하고 이동 을 누릅니다. 속성에 대해 생성된 사용 가능한 모든 변형 조합을 추가합니다. 개별 바리에이션에 대한 가격 및 바리에이션 이미지 를 추가하고 설정을 저장합니다.

결론

OceanWP 테마에 WooCommerce 변형 견본 플러그인을 설치하는 모든 단계를 다루려고 했습니다. 도움이 더 필요하면 댓글 상자에 알려주십시오.