상자에서 WooCommerce 는 제품 변형을 일반 드롭 다운 메뉴로 보여줍니다. 크기를 선택하고 색상을 선택하고 옵션이 실제로 어떻게 보이는지 숨기는 회색 선택 상자에서 모두 선택하십시오. A WooCommerce 변형은 플러그인을 견본으로 제공합니다 그것을 수정합니다. 그 드롭다운을 클릭 가능한 컬러 서클,이미지 썸네일,라벨이 붙은 버튼으로 바꿔서 쇼핑객이 텍스트 메뉴를 디코딩하는 대신 빨간 셔츠나 XL 을 한눈에 볼 수 있도록 합니다.
그 작은 변화는 바늘을 움직입니다,왜냐하면 사람들은 그들이 볼 수있는 것을 사기 때문입니다. 이 가이드는 최고의 견본 플러그인 중 8 개를 비교하고,모든 사람은 공식 WordPress.org 디렉토리에서 무료로 설치할 수 있으므로 커밋하기 전에 자신의 상점에서 시도 할 수 있습니다. 먼저,하지만 견본에 대해 생각하기 전에 모든 Elementor 상점에 속한 하나의 플러그인: Elementor 용 마스터 애드온. 견본 플러그인은 아니지만 견본이 계속 유지 될 제품 페이지를 구축하므로 최고 자리를 얻습니다.
WooCommerce 변형 견본이란 무엇입니까?
변형 견본은 변수 제품의 속성 드롭다운을 시각적 선택기로 대체합니다. “색상” 드롭다운 대신 색상 사각형 행이 나타납니다. “크기” 드롭다운 대신 클릭 가능한 버튼이 제공됩니다: S,M, L,XL.
보통 네 가지 견본 유형이 표시됩니다:
- 색상 견본 빨간색, 네이비 또는 올리브와 같은 속성의 경우
- 이미지 견본 패턴, 질감, 해당 색상의 제품 등 각 변형의 작은 사진을 보여줍니다
- 버튼 또는 라벨 견본 크기, 재료 또는 텍스트 속성에 사용됩니다
- 라디오 견본 더 깔끔한 버전의 표준을 선택하려면 선택하세요
더 나은 플러그인은 단일 제품 페이지뿐만 아니라 매장 및 카테고리 페이지에도 견본을 푸시하므로 쇼핑객은 계속 탐색하는 동안 옵션을 찾을 수 있습니다.
WooCommerce에서 색상 견본을 추가하는 방법
설정은 여기에 모든 플러그인에 걸쳐 동일에 가깝습니다:
- 설치 및 WooCommerce 및 선택한 견본 플러그인을 활성화.
- 로 이동 제품 > 속성 그리고 Color 와 같은 속성을 만든 다음 해당 용어 (Red,Blue, Green) 를 추가합니다.
- 각 항의 견본 유형을 설정합니다. 색상은 hex 값을 선택하고; 이미지는 썸네일을 업로드합니다.
- 변수 제품을 열고 속성 탭 아래에 속성을 추가하고 변형을 생성합니다.
- 저장 및 미리보기. 드롭다운은 이제 견본 행입니다.
해당 목록의 어느 곳에도 코드가 없습니다. 변수 제품이 아직 설정되지 않은 경우 먼저 공식으로 정렬하십시오 WooCommerce 가변 제품 설명서속성과 변형을 살펴봅니다. 견본 주변의 페이지 디자인을 위해 검거합니다 woocommerce를 위한 최고의 Elementor 애드온 사용자 정의 단일 제품 템플릿을 구축하는 방법을 보여줍니다.
빠른 비교: 최고의 WooCommerce Swatches 플러그인
| 플러그인 | 활성 설치 | 평가 | 페이지 견본 쇼핑(무료) | 위한 최고의 |
|---|---|---|---|---|
| Elementor용 마스터 애드온 | 30,000+ | 4.5 ★ | n/a(툴킷) | 제품 페이지 자체를 구축 |
| WooCommerce용 변형 견본(Emran Ahmed) | 300,000+ | 4.8 ★ | 프로 | 안전한 기본 선택입니다 |
| WooCommerce(CartFlows)용 변형 견본 | 200,000+ | 4.6 ★ | 프로 | Astra / CartFlows 매장 |
| WCBoost 변형 견본 | 50,000+ | 4.8 ★ | 예 | 빠르고, 잔소리하지 않는 옵션 |
| 제품 변형 견본(VillaTheme) | 10,000+ | 4.7 ★ | 예 | 견본 + 갤러리 이미지 스왑 |
| 변형 견본(RadiusTheme) | 10,000+ | 4.7 ★ | 예 | 카탈로그 견본으로 만능 |
| WPC 변형 견본 | 7,000+ | 4.3 ★ | 예 | WPClever 생태계 사용자 |
| 스마트 변형 이미지 및 견본 | 1,000+ | 4.7 ★ | 부분적인 | 변형 이미지 스와핑 |
| WooCommerce(Woosuite)용 변형 견본 | 50,000+ | 3.7 ★ | 예 | 장기 실행 무료 카탈로그 견본 |
1. Elementor (기초) 를 위한 마스터 애드온

솔직하게 말씀드리겠습니다: Elementor용 마스터 애드온 는 변형 견본 플러그인이 아니며 여전히 1 위에 자리 잡고 있습니다. 여기에 논리가 있습니다. 견본은 실제로 판매하기 위해 제작 된 제품 페이지에서만 보관을 획득하며 해당 페이지는 Master Addons 가 템플릿을 디자인하는 경량 Elementor 툴킷이며,그 다음에 아래의 견본 플러그인은 색상 및 이미지 선택기를 떨어 뜨립니다.
30,000 + 사이트에서 사용 하 고 버전 3 에서 약 3 배 더 빠르게 실행 되도록 다시 작성 된 마스터 애드온은 전체 테마 빌더 사용자 정의 단일 제품,쇼핑 및 아카이브 템플릿의 경우. 따라서 테마가 배송하는 레이아웃을 수락하는 대신 제품 페이지를 디자인하고 견본을 추가하고 착륙 위치를 정확하게 제어합니다.
Elementor 스토어가 먼저 사용되는 이유:
- 테마 빌더 단일 제품 및 매장 템플릿을 구축하려면 견본이 표시됩니다
- 주요 제품 위젯 제품, 가격, 장바구니 추가 버튼을 랜딩 페이지에 놓습니다
- 팝업 빌더 장바구니 가치를 높이는 판매, 쿠폰 및 출구 의도 제안
- 메가 메뉴 제품 카테고리를 통해 쇼핑 가능한 탐색을 위해
- 80+ 위젯 및 확장 하나의 가벼운 패키지에, 그래서 당신은 하나의 페이지를 구축하기 위해 다섯 플러그인을 쌓아하지 않습니다
먼저 이것을 설치하여 스토어를 구축한 다음,변형 표시를 처리하기 위해 아래의 견본 플러그인 중 하나를 선택합니다. 전체 찾아보기 위젯 및 확장 목록을 작성하거나 확인하세요 가격그리고 무료 버전을 선택하세요 WordPress.org 플러그인 페이지.
2. WooCommerce 를 위한 변주 스와치 (Emran Ahmed 저)

이것은 WordPress.org 에서 가장 많이 설치된 견본 플러그인으로 300,000 + 활성 설치 및 900 개 이상의 리뷰에서 4,8 등급을 받았습니다. 대부분의 상점이 이미 신뢰하는 옵션을 원하십니까? 여기에서 시작하십시오.
최고의 기능:
- 색상, 이미지 및 버튼/라벨 견본 유형
- 호버링에 속성 툴팁
- 속성별 및 제품별 견본 재정의
- 재고가 없는 변형이 어떻게 작동하는지, 클릭 가능하거나 흐릿하게 작동하는지 제어합니다
- 넓은 테마 호환성, 그래서 그것은 소란없이 대부분의 WooCommerce 테마에서 작동합니다
무료 버전은 단일 제품 페이지를 잘 처리합니다. 카탈로그 및 상점 페이지 견본과 변형 이미지 갤러리는 Pro 업그레이드의 일부입니다. 에서 잡아 WordPress.org 플러그인 페이지.
3. WooCommerce 를 위한 변이 견본 (CartFlows 에 의하여)

이것은 Astra 와 CartFlows 뒤에있는 팀에서 왔으며 4,6 등급으로 200,000 + 설치를 선택했습니다. 이미 다른 Brainstorm Force 제품을 실행하면 가볍고 깨끗하며 쉬운 전화입니다.
최고의 기능:
- 색상, 이미지, 버튼/라벨, 라디오 견본 유형
- 속성에 대한 도구 설명
- 속성별 재정의를 통한 글로벌 스타일링
- 테마를 벗어나는 가벼운 코드
- 잘 알려진 워드 프레스 공급 업체에 의해 지원
매장이 Astra 에서 운영되거나 CartFlows 로 깔때기를 구축하면 모든 것이 한 집에 보관됩니다. 에서 설치하십시오 WordPress.org 플러그인 페이지.
4. WCBoost 변주 견본

WCBoost는 말도 안되는 선택이며, 두 개의 더 큰 플러그인이 비용을 지불하게하는 일을합니다: 무료 버전의 상점 및 아카이브 페이지에 견본을 보여줍니다. 4.8 등급과 50,000 + 설치를 추가하면 그 자리를 얻습니다.
최고의 기능:
- 색상, 이미지, 버튼 및 라디오 견본
- 속성 호버에 대한 도구 설명
- 조정 가능한 견본 모양(둥근 모양 또는 정사각형) 및 크기
- 쇼핑 및 아카이브 페이지 디스플레이, 무료
- 관리자에서 지속적인 상향 판매 잔소리가 없습니다
페이월 없이 카탈로그 견본을 전달하는 빠르고 깨끗한 플러그인의 경우 WCBoost는 이 목록에서 가장 가치 있는 선택 중 하나입니다. 다운로드하세요 WordPress.org 플러그인 페이지.
5. WooCommerce 를 위한 제품 변이 견본 (VillaTheme 에 의하여)

VillaTheme 는 WooCommerce 공간에 오래 있었고,그것의 견본 플러그인은 변형 이미지 스와핑과 시각적 선택기를 쌍으로 연결했습니다. 색상을 클릭하면 메인 갤러리가 해당 변형의 사진으로 뒤집어집니다.
최고의 기능:
- 색상, 이미지, 버튼, 라디오, 드롭다운 견본 유형
- 각 속성에 대한 도구 설명
- 카탈로그 및 상점 페이지 견본
- 제품 갤러리에서 변형 이미지 스와핑
- 속성별 스타일링 컨트롤
갤러리 사진이 견본만큼 중요한 물건 (패션,가구, 아트 프린트) 을 판매한다면,그 이미지 스와핑이 그것을 선택하는 이유입니다. 에서 가져 오기 WordPress.org 플러그인 페이지.
6. WooCommerce 를 위한 변이 견본 (RadiusTheme 에 의하여)

RadiusTheme 에서,포스트 그리드와 ShopBuilder 뒤에 사람들,이 10,000 + 설치와 4,7 등급 꾸준한 만능입니다. 그것은 핵심 견본 유형을 커버하고 카탈로그 페이지에도 밖으로 밀어.
최고의 기능:
- 색상, 이미지, 버튼 및 라디오 견본
- 속성 툴팁
- 페이지 견본을 쇼핑하고 보관하세요
- 속성별 및 제품별 설정
- 활성 WooCommerce 플러그인 공급 업체에 의해 백업
신뢰할 수 있는 중간 선택 이며,제품 당 설정은 제품의 소수 나머지와 다르게 스타일된 견본을 필요로 할 때 그들의 유지를 적립 됩니다. 에서 설치 WordPress.org 플러그인 페이지.
7. WooCommerce 를 위한 WPC 변이 견본

WPClever 는 WooCommerce 플러그인의 큰 가족을 실행하고,이 스와치 플러그인은 바로에 스냅. 당신은 이미 스마트 비교 또는 연결 변형과 같은 WPC 제품을 사용하는 경우,집처럼 느낄 것이다.
최고의 기능:
- 색상, 이미지, 버튼 및 라벨 견본 유형
- 툴팁 지원
- 용어 수준 견본 할당
- 작은 발자국
- 더 넓은 WPClever 제품군과 함께 작동합니다
등급은 그늘이 낮고 리뷰 수가 얇기 때문에 배송하기 전에 준비 단계에서 테스트하십시오. WPClever 사용자의 경우,하지만 명백한 적합입니다. 에서 다운로드 WordPress.org 플러그인 페이지.
8. WooCommerce 를 위한 똑똑한 변이 이미지 & 견본

이것은 이미지로 열심히 기울어집니다. 쇼핑객이 선택한 변형에 따라 제품 갤러리 사진을 자동으로 표시,숨기기 및 교환합니다. 이는 변형 간의 시각적 차이가 전체 피치일 때 이상적입니다.
최고의 기능:
- 변형 사진에 연결된 이미지 견본
- 변형당 자동 갤러리 표시, 숨기기 및 스왑
- 속성에 스마트 이미지 연결
- 이미 실행 중인 경우 다른 견본 플러그인과 함께 멋지게 재생됩니다
- 4.7 등급의 142 리뷰, 크기에 비해 참여도가 높습니다
버튼 스타일링보다는 갤러리가 클릭에 반응하는 것이 더 중요합니다. 이미지 교환이 우선이라면 전문가입니다. 에서 받으세요 WordPress.org 플러그인 페이지.
9. WooCommerce 를 위한 변이 견본 (Woosuite 에 의하여)

이것은 저장소에 가장 오래된 견본 플러그인 중 하나이며,2017 년에 다시 나열되었으며,여전히 50,000 + 상점에서 실행됩니다. 추첨은 무료 카탈로그 페이지 견본 및 업셀 벽이없는 견본 유형의 전체 세트입니다.
최고의 기능:
- 색상, 이미지, 라벨/텍스트 및 라디오 견본
- 속성에 대한 도구 설명
- 무료 버전의 아카이브 및 카탈로그 페이지 견본
- 속성별 구성
- WooCommerce 매장의 오랜 실적
하나의 정직한주의: 그것의 3.7 등급은 여기에서 가장 약한, 그래서 당신이 그것에 기대기 전에 최근 리뷰를 훑어보고 당신의 테마에 대해 테스트합니다. 에서 설치 WordPress.org 플러그인 페이지.
또한 볼 가치가 있습니다
몇 가지 더 WordPress.org에 있으며 기본 목록을 해독하지 않았더라도 특정 설정에 적합할 수 있습니다. YITH 색상 및 라벨 변형 컬러 및 라벨 견본을 무료로 제공하고 Pro용 이미지 견본을 다시 보관합니다. QODE 변형 견본 여전히 리뷰를 쌓고 있는 더 새롭고 가벼운 옵션입니다.
올바른 견본 플러그인을 선택하는 방법
귀하의 상점이 실제로 필요로하는 것에 플러그인을 일치 시키십시오:
- 가장 안전하고 가장 많이 테스트된 옵션을 원합니다: Emran Ahmed의 WooCommerce용 변형 견본.
- 비용을 지불하지 않고 쇼핑 페이지 견본을 원합니다: WCBoost 또는 Woosuite 플러그인.
- 갤러리 이미지는 변형마다 많이 변경됩니다: VillaTheme 또는 스마트 변형 이미지.
- 귀하는 Astra/CartFlows 또는 WPClever 생태계에 살고 있습니다: 일치하는 플러그인(CartFlows 또는 WPC)을 선택하세요.
무엇을 시작하든 성능을 주시하세요. Swatch 스크립트는 제품 페이지에 무게를 더하므로 가이드의 팁과 페어링하세요 elementor 웹사이트의 속도를 높이는 방법. 그리고 제품이 견본,생각 주문 분야,추가 기능,또는 조각 보다는 더 많은 것을 필요로 하는 경우에,보십시오 woocommerce 에 대한 추가 제품 옵션 계산대에 있는 사람들을 포착합니다.
이 견본 주위에 상점을 짓고 있습니까? 마스터 애드온은 가볍게 유지됩니다 80+ 위젯 및 확장, 그리고 그것의 테마 빌더 견본이 있는 단일 제품 템플릿을 디자인할 수 있습니다. Check the 가격 전체 툴킷을 원한다면.
자주 묻는 질문
최고의 무료 WooCommerce 변형 견본 플러그인은 무엇입니까?
Emran Ahmed 의 WooCommerce 용 변형 견본은 300,000 + 설치 및 4.8 등급으로 가장 안전한 무료 선택입니다. 무료로 상점 페이지 견본이 필요한 경우 WCBoost Variation Swatches 는 Pro 뒤에 카탈로그 견본을 게이트하지 않는 강력한 대안입니다.
WooCommerce 에서 색상 견본을 추가하려면 어떻게해야합니까?
견본 플러그인을 설치하고 제품 > 속성으로 이동하여 색상 속성을 생성하고 각 용어에 대해 16 진수 값을 설정합니다. 그런 다음 가변 제품에 속성을 추가하고 변형을 생성합니다. 드롭다운은 클릭 가능한 색상 견본 행으로 바뀌며 코드는 필요하지 않습니다.
플러그인 없이 변형 견본을 추가할 수 있나요?
쉽게. WooCommerce 에는 내장 된 견본 옵션이 없으므로 직접 드롭 다운을 변환하려면 사용자 정의 코드와 CSS 가 필요합니다. 전용 견본 플러그인은 몇 번의 클릭으로이를 수행하고 거의 모든 상점이 하나를 사용하는 이유입니다.
변형 견본이 상점 및 카테고리 페이지에 표시됩니까?
플러그인에 따라 다릅니다. 많은 사람들이 무료 버전의 단일 제품 페이지에서만 견본을 보여줍니다. WCBoost,VillaTheme, RadiusTheme 및 Woosuite 플러그인은 무료로 상점 및 아카이브 페이지에 표시하고 다른 사람들은 Pro 용으로 저장합니다.
견본 플러그인이 내 상점의 속도를 늦출까요?
잘 만들어진 것은 약간의 CSS 와 자바스크립트만 추가합니다. WCBoost 와 같은 가벼운 옵션은 영향을 낮게 유지합니다. 두 개의 견본 플러그인을 한 번에 실행하지 말고 설치 전후에 페이지 속도를 확인하여 현재 위치를 알 수 있습니다.
마무리하세요
당신의 상점을위한 최고의 WooCommerce 변형 견본 플러그인은 정말 두 가지 질문으로 내려: 당신은 무료로 상점 페이지 견본이 필요합니까,얼마나 갤러리 이미지는 변형 사이에 변경합니까? 대부분의 상점에 대한,WooCommerce 에 대한 변형 견본 Emran 아흐메드는 안전한 시작,WCBoost 는 카탈로그 견본에 가장 좋은 무료 경로이며,VillaTheme 또는 스마트 변형 이미지는 사진이 판매를 할 때 승리.
무료 버전의 몇 가지를 설치, 테마에 대해 테스트, 그리고 바로 보이는 하나를 유지. 다음 그들 주위에 상점을 구축: 전체를 탐험 마스터 애드온 위젯 및 확장 또는 기성품으로 더 빠르게 시작하세요 템플릿 키트.
관련 읽기: WooCommerce를 위한 최고의 Elementor 애드온, WooCommerce를 위한 추가 제품 옵션, 그리고 100 최고의 Elementor 애드온.
