Flatsome 테마의 다양한 제품 변형에 대해 WooCommerce 색상 견본을 활성화하는 방법(전 세계적으로)

제품 변형이 있다는 것은 전자 상거래의 일반적인 사실입니다. 전자 상거래가 있는 경우 다양한 제품에 맞게 상점을 설정해야 합니다. WooCommerce Color Swatch는 그렇게 하는 데 도움이 될 수 있습니다.

WooCommerce에서는 기본적으로 제품 변형을 처리하기 위한 드롭다운이 제공됩니다.

당신이 지금 무슨 생각을 하고 있는지 알아요! 당신은 생각하고 있습니다, "그래서! 이 놈들이 왜 소란을 피우는 거지?”

관점을 분명히 합시다. 우리는 모든 전자 상거래 소유자의 목표가 매출을 늘리고 방문자를 사이트로 유지하는 것이라고 믿습니다. 더 오래 유지하려면 사용자가 사이트에 오랫동안 머물면서 편안함을 느낄 수 있도록 원활한 경험을 제공해야 합니다.

제품의 변형을 보기 위한 드롭다운은 구식 프로세스이며 변형을 보려면 더 많은 클릭이 필요합니다. 이것은 방문자에게 위안이 되는 경험이 아니므로 다양한 변형을 보는 경험을 부드럽게 할 수 있는 것을 사용해야 합니다. 쉽고 원활한 작업을 위해 변형 견본 이 제공됩니다 . 변형 견본은 색상, 이미지 및 버튼 견본을 제공하지만 이 기사에서는 색상 견본에만 초점을 맞출 것입니다.

제품 변형에 WooCommerce 색상 견본을 사용하면 몇 가지 직간접적인 이점이 있습니다. 좀 알아보자!

1. 방문자에게 원활한 경험을 제공합니다.
2. 색상 변형을 탐색하면 매출이 증가할 수 있습니다.
3. 방문자는 제품의 변형을 보기 위해 더 적은 수의 클릭이 필요합니다.
4. 더 나은 사용자 경험은 검색 엔진이 이 콘텐츠를 홍보할 수 있도록 긍정적인 신호를 보냅니다.

상점에서 WooCommerce 색상 견본을 활성화하게 되어 기쁩니다. 맞습니까? 전체 프로세스를 시작합시다!

eStore에서 WooCommerce 색상 견본 플러그인을 활성화하는 방법

시작하기 전에 몇 가지 전제 조건에 대해 알려드리고자 합니다. 첫 번째는 WooCommerce 테마입니다. 변형 견본을 시작하려면 WooCommerce 테마가 필요합니다. 스토어에 대한 무료 또는 프리미엄 테마를 선택할 수 있습니다. Flatsome, storefront 등과 같은 고품질 테마를 사용하는 것이 좋습니다. 그런 다음 Variation Swatches 플러그인을 설치해야 합니다 .

1단계: 대시보드로 이동합니다.

2단계: 플러그인에 커서를 놓고 새로 추가를 클릭합니다.

3단계: 검색 페이지가 나타납니다. 오른쪽 상단에 검색창이 있습니다. WooCommerce 변형 견본을 입력한 다음 플러그인을 설치하고 활성화합니다.

그래서 전제 조건이 준비되었습니다. 이제 Variation Swatches를 사용하여 다양한 제품 변형에 대한 색상 견본을 활성화할 수 있습니다.

WooCommerce Variation Swatches 플러그인을 성공적으로 설치하고 활성화한 후 색상 견본을 만들 차례입니다.

프로세스를 시작합시다!

01단계: 가변 제품 속성 생성

먼저 색상 속성과 변형을 전역적으로 생성해야 합니다. 이를 생성하려면 대시보드 로 이동하여 제품 을 클릭한 다음 속성 으로 이동하십시오. 속성 상자 를 찾을 수 있습니다. 요구 사항으로 필수 필드를 채우십시오. 데모를 위해 속성 이름을 Color 로 지정합니다. 속성에 대한 슬러그를 자동으로 생성하기 때문에 슬러그를 비워 둡니다. Type 을 Color 로 선택합니다.

옵션을 선택하고 원하는 대로 이름을 지정할 수 있습니다. 없으시다면 저희를 따라오세요. 필수 필드를 완료한 후 속성 추가 버튼을 클릭합니다.

그러면 다음 스크린샷과 같이 오른쪽에 목록이 생성됩니다.

02단계: 속성 변형 생성

동일한 프로세스를 사용하여 목록에 더 많은 속성을 추가할 수 있습니다. 속성을 생성한 후 속성 변형을 생성해야 합니다. 속성에 대한 제품 변형을 생성하려면 목록을 살펴보고 속성의 용어 구성 을 클릭하십시오.

예를 들어 Color 속성을 만들었습니다. 색상 속성 내에서 속성 내 변형으로 색상을 추가할 수 있습니다. 원하는 색상을 선택할 수도 있지만 데모용으로 Red , Green 및 Blue 를 추가합니다. 간단히 말해서 변형을 만들려면 이름 필드를 채우고 슬러그를 비워 두고 색상을 선택합니다.

03단계: 가변 제품에서 속성 변형 활성화

이제 전역적으로 생성된 색상 견본을 가변 제품과 연결해야 합니다. 속성 변형 제품을 사용하려면 제품 으로 이동하여 편집하십시오. 제품 데이터 에서 다양한 제품을 선택할 때 주의하십시오.

그런 다음 왼쪽의 속성 을 클릭하십시오. 새 페이지가 열립니다. 전 세계적으로 생성된 모든 속성을 찾을 수 있는 Custom product 속성 이라는 드롭다운이 있습니다. 여기에서는 Color 속성만 생성했기 때문에 Color 속성만 볼 수 있습니다.

선택하려는 속성을 선택하고 데모를 위해 색상 을 선택합니다. 선택하면 이 페이지가 나타납니다.

사용 가능한 모든 변형을 선택하려면 모두 선택 버튼을 클릭합니다. 선택 안 함 을 클릭하여 모두 버튼의 선택을 취소할 수도 있습니다. 그런 다음 변형에 사용을 선택하고 속성 저장 을 클릭합니다.

변형 탭을 클릭하면 새 페이지가 나타납니다. 두 가지 옵션이 있습니다. 하나는 Add Variation 이고 다른 하나는 Create Variations from all attributes 입니다.

이 두 옵션 중에서 아무 옵션이나 선택하십시오. 데모를 위해 모든 속성에서 변형 생성 을 선택하겠습니다.

이제 제품에서 색상 변형을 볼 수 있습니다. 또한 변형 이미지, 변형 가격 및 기타 변형 관련 세부정보를 여기에 추가합니다. 모든 작업을 수행한 후 변경 사항 저장 버튼을 클릭합니다.

추신: 각 변형에 가격을 추가합니다. 그렇지 않으면 변형이 제품 프런트엔드에 표시되지 않습니다.

변형 견본을 성공적으로 추가하면 개별 제품 페이지가 다음과 같이 표시됩니다.

간단한 설정

Variation Swatches는 WooCommerce 사이트의 필수 플러그인입니다. 300,000개 이상의 WooCommerce 사이트에서 이 플러그인을 사용하고 있습니다. 툴팁을 활성화하고, 플러그인 기본 스타일시트를 비활성화하고, 원형과 사각형 모양 사이를 전환하는 데 도움이 됩니다.

모양 스타일을 원형에서 정사각형으로 변경하고 도구 설명을 활성화합니다. 그러면 제품 페이지의 프론트 엔드가 다음과 같이 보일 것입니다.

고급 설정

변형 견본에는 더 많은 것을 제공할 수 있는 몇 가지 고급 기능도 있습니다. 변형 견본의 너비, 높이 및 글꼴 크기를 제어할 수 있습니다. 또한 품절 상태를 스마트하게 표시할 수 있는 기능도 제공합니다.

품절을 표시하려면 속성 동작의 흐림 옵션을 선택해야 합니다. 선택하면 제품은 다음과 같이 응답합니다.

Flatsome 테마의 스토어 페이지에서 색상 견본 활성화

제품 페이지에 색상 견본을 추가하는 것과 함께 제품 아카이브 페이지에 WooCommerce 색상 견본을 추가할 수도 있습니다. 이 기능을 사용하려면 버전을 프로로 업그레이드해야 합니다. 아직 Pro 버전이 없다면 Variation Swatches의 모든 기능을 활용하십시오.

아카이브/샵 페이지에서 색상 견본을 활성화하려면 아카이브에 표시 설정을 선택하여 스토어/아카이브 페이지에 색상 견본을 표시합니다. Flatsome 테마를 사용하는 경우 보관 견본 위치 설정에서 상점의 장바구니 버튼에 추가하기 전과 후에 견본을 활성화할 수 있습니다. 해당 설정에서 색상 변형 견본의 크기를 제어할 수도 있습니다.

상점 페이지에서 견본을 활성화하면 다음과 같이 표시됩니다.

스토어/아카이브 페이지에서 도구 설명 및 견본 사용자 정의

도구 설명 색상을 사용자 지정하고 스토어에서 변형 견본을 활성화하려면 변형 견본의 프리미엄 버전을 사용해야 합니다.

툴팁 활성화

고급 설정을 사용하여 도구 설명 배경 및 텍스트 색상을 사용자 정의할 수 있습니다. 툴팁을 맞춤설정하려면 아래를 확인하세요.

툴팁 프론트엔드의 최종 미리보기입니다.

결론

이 기술은 사이트의 유용성과 전환율을 높일 것입니다. 또한 고객이 사이트를 방문하는 동안 원활한 경험을 얻을 수 있습니다. 또한 간접적으로 매출을 향상시키고 WooCommerece 매장을 성장시키는 데 도움이 될 수 있습니다.

Flatsome 테마에서 이 플러그인을 설치하는 동안 문제가 발생하면 의견 섹션에 알려주십시오. 최대한 빨리 응답하도록 노력하겠습니다!