Из коробки WooCommerce показывает вариации продукта как простые раскрывающиеся меню. Выберите размер, выберите цвет, все из серого поля выбора, которое скрывает, как на самом деле выглядят опции. А Плагин WooCommerce variance Swatches исправляет, что. Он меняет эти раскрывающиеся данные на кликабельные цветовые круги, миниатюры изображений и маркированные кнопки, поэтому покупатель видит красную рубашку или XL с первого взгляда вместо декодирования текстового меню.
Это небольшое изменение перемещает иглу, потому что люди покупают то, что они могут видеть. это руководство сравнивает 8 лучших плагинов образцов, и каждый из них может быть свободно установлен из официального каталога WordPress.org, поэтому вы можете попробовать их в своем собственном магазине, прежде чем зафиксировать. Во-первых, хотя, один плагин, который принадлежит каждому магазину Elementor, прежде чем вы даже подумаете о образцах: Главные аддоны для Elementor. Это не плагин образцов, но он создает страницу продукта, на которой будут жить ваши образцы, поэтому он зарабатывает верхнее место.
Что такое коммутаторы вариантов WooCommerce?
Вариационные свотчи заменяют выпадающие атрибуты на переменном произведении визуальными селекторами Вместо выпадающего “Color” вы получаете ряд цветных квадратов Вместо выпадающего списка “Size” вы получаете кликабельные кнопки: S, M, L, XL.
Обычно вы увидите четыре типа пакетов:
- Цветовые образцы для таких атрибутов, как красный, темно-синий или оливковый
- Образцы изображений на них изображена небольшая фотография каждого варианта, будь то узор, текстура или продукт этого цвета
- Образцы кнопок или этикеток для размеров, материалов или любого текстового атрибута
- Радиоперехваты для более опрятной версии стандарта выберите
Лучшие плагины также нажимают образцы на страницы магазинов и категорий, а не только на одну страницу продукта, поэтому покупатели видят свои варианты, пока они еще просматривают.
Как добавить цветовые коммутаторы в WooCommerce
Настройка близка к одинаковой для каждого плагина здесь:
- Установите и активируйте WooCommerce и выбранный вами плагин образцов.
- Перейти к Продукты > Атрибуты и создайте атрибут типа Цвет, затем добавьте его термины (Красный, Синий, Зеленый).
- Установите тип swatch каждого термина.Для цвета выберите значение hex; для изображения загрузите миниатюру.
- Откройте переменный продукт, добавьте атрибут на вкладке "Атрибуты" и создайте изменения.
- Сохранить и предварительный просмотр. выпадающий теперь ряд образцов.
Нигде в этом списке нет кода. Если ваши переменные продукты еще не настроены, сначала отсортируйте это с официальным лицом Документация по переменным продуктам WooCommerce, который проходит через атрибуты и вариации. Для дизайна страницы вокруг образцов, наш обзор лучшие дополнения Elementor для WooCommerce показывает, как создать индивидуальный шаблон одного продукта.
Быстрое сравнение: лучшие плагины WooCommerce Swatches
| Плагин | Активные установки | Рейтинг | Обмен страницами магазина (бесплатно) | Лучший Для |
|---|---|---|---|---|
| Мастер-аддоны для Elementor | 30 000+ | 4,5 ★ | н/д (инструментарий) | Создание самой страницы продукта |
| Вариационные коммутаторы для WooCommerce (Эмран Ахмед) | 300 000+ | 4,8 ★ | Про | Безопасный выбор по умолчанию |
| Вариационные коммутаторы для WooCommerce (CartFlows) | 200 000+ | 4,6 ★ | Про | Магазины Astra/CartFlows |
| Обмены вариантов WCBoost | 50 000+ | 4,8 ★ | Да | Быстрый вариант без кляча |
| Вариации продукта. Образцы (тема виллы) | 10 000+ | 4,7 ★ | Да | Своты + обмен изображениями в галерее |
| Вариационные образцы (RadiusTheme) | 10 000+ | 4,7 ★ | Да | Многосторонний с каталожными образцами |
| Вариационные коммутаторы WPC | 7000+ | 4,3 ★ | Да | Пользователи экосистемы WPClever |
| Изображения и образцы умных вариаций | 1000+ | 4,7 ★ | Частичный | Изменение замены изображений |
| Вариационные коммутаторы для WooCommerce (Woosuite) | 50 000+ | 3,7 ★ | Да | Давние бесплатные образцы каталогов |
1. Основные дополнения к Элементору (основанию)
Позвольте мне быть откровенным: Мастер-аддоны для Elementor не является вариацией swatches плагин, и он по-прежнему находится на первом месте. вот логика.Swatches только заработать свое удержание на странице продукта, которая фактически создана для продажи, и эта страница является где Мастер Аддоны приходит в. Это легкий инструментарий Elementor, который проектирует шаблон, то любой swatch плагин ниже опускает его цвета и изображения селекторы в него.
Используется на более чем 30 000 сайтов и перестроен для работы примерно в 3 раза быстрее в версии 3, Master Addons дает вам полную версию Тема Строитель для пользовательских шаблонов отдельных продуктов, магазинов и архивов. Таким образом, вместо того, чтобы принимать любой макет ваших тематических кораблей, вы проектируете страницу продукта, добавляете образцы и точно контролируете, где они приземляются.
Почему это идет первым для магазина Elementor:
- Тема Строитель чтобы создать единый продукт и шаблоны магазинов, на которых отображаются ваши образцы
- Избранный виджет продукта чтобы опустить любой товар, цену и кнопку добавления в корзину на целевую страницу
- Попап Строитель на продажу, купон и предложения на выход, которые поднимают стоимость тележки
- Мега Меню для навигации по магазинам с категориями продуктов
- 80+ виджетов и расширений в одном легком пакете вы не собираете пять плагинов для создания одной страницы
Установите это сначала, чтобы построить магазин, затем выберите один из плагинов образцов ниже, чтобы обработать дисплей вариации. Просмотрите полную версию виджеты и расширения перечислите или проверьте ценообразование, и возьмите бесплатную версию из Страница плагина WordPress.org.
2. Вариационные коммутаторы для WooCommerce (Эмран Ахмед)
Это самый установленный плагин для образцов на WordPress.org, он содержит более 300 000 активных установок и рейтинг 4,8 по более чем 900 отзывам. Хотите вариант, которому уже доверяют большинство магазинов? Начните здесь.
Лучшие характеристики:
- Типы цвета, изображения и переходов кнопок/этикеток
- Атрибут всплывающие подсказки на ховере
- Переопределяется соотношение по атрибутам и по продуктам
- Контроль за тем, как ведут себя, щелкаются или размываются имеющиеся в наличии варианты
- Широкая совместимость тем, поэтому он работает над большинством тем WooCommerce без суеты
Бесплатная версия хорошо обрабатывает одну страницу продукта. Каталог и образцы страниц магазинов, а также галереи изображений вариаций являются частью обновления Pro. Возьмите его из Страница плагина WordPress.org.
3. Вариационные коммутаторы для WooCommerce (от CartFlows)
Этот приходит от команды, стоящей за Astra и CartFlows, и он набрал 200 000+ установок с рейтингом 4.6. Это легко, чисто и легко позвонить, если вы уже запускаете другие продукты Brainstorm Force.
Лучшие характеристики:
- Тип цвета, изображения, кнопки/этикетки и радиопереключателя
- Советы по атрибутам
- Глобальный стиль с переопределениями для каждого атрибута
- Легкий код, который держится подальше от вашей темы
- Поддерживается известным поставщиком WordPress
Если ваш магазин работает на Astra или вы строите воронки с CartFlows, это держит все в одном доме. Установите его от Страница плагина WordPress.org.
4. Вариационные коммутаторы WCBoost
WCBoost - это серьезный выбор, и он делает то, за что вам платят два больших плагина: показывает образцы на страницах магазинов и архивов в бесплатной версии. Добавьте рейтинг 4,8 и более 50 000 установок, и он заработает свое место.
Лучшие характеристики:
- Цвет, изображение, кнопка и радиоперехватчики
- Советы по работе с атрибутами hover
- Регулируемая форма валика (закругленная или квадратная) и размер
- Отображение страниц магазина и архива бесплатно
- Никаких постоянных ошибок в продажах администратора
Для быстрого, чистого плагина, который передает вам каталогизировать образцы без платного доступа, WCBoost является одним из лучших вариантов в этом списке. Загрузите его из Страница плагина WordPress.org.
5. Вариации продукта. Образцы для WooCommerce (от VillaTheme)
VillaTheme давно находится в пространстве WooCommerce, и ее плагин swatches объединяет визуальные селекторы с вариационной сменой изображений. щелкните цвет, и основная галерея перейдет на фотографии этой вариации.
Лучшие характеристики:
- Тип цвета, изображения, кнопки, радио и раскрывающегося списка
- Советы по каждому атрибуту
- Образцы каталогов и страниц магазинов
- Вариационный обмен изображениями в галерее продуктов
- Управление стилем по атрибутам
Если вы продаете вещи, где фотографии галереи имеют такое же значение, как и образец (мода, мебель, художественные принты), этот обмен изображениями является причиной выбора. Получите это от Страница плагина WordPress.org.
6. Вариационные коммутаторы для WooCommerce (от RadiusTheme)
От RadiusTheme, людей, стоящих за The Post Grid и ShopBuilder, это устойчивый универсал с более чем 10 000 установок и рейтингом 4,7. Он охватывает основные типы свотчей и выталкивает их на страницы каталога.
Лучшие характеристики:
- Цвет, изображение, кнопка и радиоперехватчики
- Советы по атрибутам
- Образцы страниц магазина и архива
- Настройки по атрибутам и по продуктам
- Поддерживается активным поставщиком плагинов WooCommerce
Это надежный выбор среднего уровня, и настройки каждого продукта сохраняются, когда горстке продуктов нужны образцы, стилизованные иначе, чем у остальных. Установите его из Страница плагина WordPress.org.
7. Переменные коммутаторы WPC для WooCommerce
WPClever запускает большое семейство плагинов WooCommerce, и это меняет местами плагин. Если вы уже используете продукты WPC, такие как Smart Compare или Linked Variation, это будет похоже на дом.
Лучшие характеристики:
- Тип цвета, изображения, кнопки и обмена метками
- Поддержка подсказок
- Назначение замены на уровне термина
- Маленький след
- Работает с более широким набором WPClever
Рейтинг на оттенок ниже, а количество отзывов тонкое, поэтому проверьте его на стадии, прежде чем отправлять. Однако для пользователей WPClever это очевидное соответствие. Загрузите его из Страница плагина WordPress.org.
8. Изображения и образцы интеллектуальных вариаций для WooCommerce
Этот сильно опирается на изображения. Он автоматически показывает, скрывает и меняет местами фотографии из галереи продуктов на основе вариаций, которые выбирает покупатель, что идеально, когда визуальная разница между вариациями равна всей высоте.
Лучшие характеристики:
- Образцы изображений привязаны к вариационным фотографиям
- Автоматическое отображение галереи, скрытие и замена в зависимости от варианта
- Умное изображение, связывающее атрибуты
- Хорошо воспроизводится вместе с другим плагином-перехватчиком, если вы его уже запустили
- 142 отзыва с рейтингом 4,7, большая вовлеченность для своего размера
Речь идет не столько о стилистике кнопок, сколько о реакции галереи на щелчок. Если обмен изображениями является вашим приоритетом, это специалист. Получите это от Страница плагина WordPress.org.
9. Вариационные коммутаторы для WooCommerce (от Woosuite)
Это один из старейших плагинов swatches в репозитории, перечисленный еще в 2017 году, и он до сих пор работает в более чем 50 000 магазинов. розыгрыш представляет собой бесплатные образцы страниц каталога и полный набор типов swatch без стены upsell.
Лучшие характеристики:
- Цвет, изображение, метка/текст и радиоперехваты
- Советы по атрибутам
- Образцы страниц архива и каталога в бесплатной версии
- Конфигурация по атрибутам
- Длинный послужной список в магазинах WooCommerce
Одно честное предостережение: его рейтинг 3,7 здесь самый слабый, поэтому берите недавние обзоры и проверяйте их на соответствие своей теме, прежде чем опираться на нее. Установите его из Страница плагина WordPress.org.
Также стоит посмотреть
Еще пара есть на WordPress.org и может подойти для конкретной установки, даже если они не взломали основной список. Вариации цвета и этикеток YITH бесплатно предоставляет вам образцы цвета и этикеток и сохраняет образцы изображений для Pro. Обмены вариантов QODE это более новый и легкий вариант, который все еще вызывает отзывы.
Как выбрать правильный плагин Swatches
Сопоставьте плагин с тем, что действительно нужно вашему магазину:
- Вам нужен самый безопасный и наиболее проверенный вариант: Вариации "Смотры для WooCommerce" Эмрана Ахмеда.
- Вам нужны образцы страниц магазинов без оплаты: WCBoost или плагин Woosuite.
- Изображения вашей галереи сильно меняются между вариациями: Изображения VillaTheme или Smart Variations.
- Вы живете в экосистеме Astra/CartFlows или WPClever: выберите соответствующий плагин (CartFlows или WPC).
На что бы вы ни приземлились, следите за производительностью. сценарии Swatch добавляют веса страницам вашего продукта, поэтому сочетайте их с советами в нашем руководстве как ускорить сайты Elementor. И если вашим продуктам нужно больше, чем просто образцы, подумайте об индивидуальных полях, дополнениях или гравировке, посмотрите на них дополнительные параметры продукта для WooCommerce чтобы поймать тех, кто на кассе.
Строим магазин вокруг этих образцов? Мастер Аддоны остаются легкими 80+ виджетов и расширенийи это Тема Строитель позволяет вам разработать единый шаблон продукта, на котором сидят ваши образцы. Проверьте ценообразование если вам нужен весь набор инструментов.
Часто задаваемые вопросы
Какой плагин для бесплатных образцов вариаций WooCommerce лучше всего?
Вариации Swatches для WooCommerce от Emran Ahmed является самым безопасным бесплатным выбором, с 300 000+ установками и рейтингом 4.8. если вам нужны образцы страниц магазинов бесплатно, WCBoost Variation Swatches является сильной альтернативой, которая не поддерживает образцы каталогов за воротами Pro.
Как добавить образцы цветов в WooCommerce?
Установите плагин swatches, перейдите в раздел Продукты > Атрибуты, создайте атрибут Color и установите шестнадцатеричное значение для каждого термина. Затем добавьте атрибут к переменному продукту и сгенерируйте вариации. раскрывающийся список превращается в ряд кликабельных цветовых образцов, код не требуется.
Могу ли я добавить вариационные образцы без плагина?
Не легко. WooCommerce не имеет встроенной опции swatch, поэтому вам понадобится пользовательский код и CSS, чтобы конвертировать раскрывающиеся данные самостоятельно. выделенный плагин swatches делает это в несколько кликов и остается совместимым через обновления WooCommerce, поэтому почти каждый магазин использует один.
Показывают ли вариационные образцы на страницах магазинов и категорий?
Это зависит от плагина Многие показывают образцы только на одной странице продукта в их бесплатной версии. WCBoost, VillaTheme, RadiusTheme, и плагин Woosuite отображают их на страницах магазинов и архивов бесплатно, в то время как другие сохраняют это для Pro.
Затормозит ли плагин с образцами мой магазин?
Хорошо построенный добавляет только немного CSS и JavaScript. легкие параметры, как WCBoost держать влияние низким. не запускать два swatch плагинов одновременно, и проверить скорость вашей страницы до и после установки, чтобы вы знаете, где вы стоите.
Завернуть
Лучший плагин WooCommerce для обмена вариациями для вашего магазина на самом деле сводится к двум вопросам: нужны ли вам бесплатные образцы страниц магазинов и насколько изображения вашей галереи меняются между вариациями? Для большинства магазинов вариации для WooCommerce от Emran Ahmed - безопасный старт, WCBoost - лучший бесплатный маршрут для каталогизации образцов, а изображения VillaTheme или Smart Variations выигрывают, когда фотографии продаются.
Установите пару бесплатных версий, протестируйте их на соответствие своей теме и сохраните ту, которая выглядит правильно. Затем постройте магазин вокруг них: изучите все Виджеты и расширения Master Addgets или начинать быстрее с готового наборы шаблонов.
Связанное чтение: Лучшие дополнения Elementor для WooCommerce, Дополнительные возможности продукта для WooCommerceи 100 лучших дополнений Elementor.
