Плагин woocommerce вариативный товар: Вариативные товары в WooCommerce – добавление и настройка

Leave a Comment / Разное / By /

Вариативные товары в WooCommerce – добавление и настройка

Когда я проводил оффлайн-семинары по WooCommerce, у многих возникали трудности при создании вариативных товаров (добавлении вариаций товаров), поэтому сейчас мы подробно с этим разберёмся.

Вариативный товар — это товар, у которого имеется возможность при покупке выбрать определённые параметры, например цвет, размер или материал.

Кстати, хочу порекомендовать вам свой видеокурс по созданию интернет-магазина WooCommerce с нуля, в нём кстати есть урок, как выводить вариации без выпадающего списка, например если выбор цвета товара, то в виде цветных кружочков 🙂

Если вы всё ещё не представляете себе, что это такое, то вот этот скриншот демонстрирует прекрасно:

Шаг 1. Тип товара — Вариативный товар

В первую очередь нужно выбрать соответствующий тип товара. Ничего сложного — скроллим до метабокса Данные товара и выбираем Вариативный товар из выпадающего списка.

Сразу после выбора, у вас там же появится вкладка 

Вариации, но не спешите радоваться, если вы на неё зайдёте, ничего интересного там не будет.

Подытожу, к примеру вы хотите сделать, чтобы при выборе другого материала, у товара менялась картинка и цена — легко, это можно сделать при помощи вариаций. Но Материал ведь по сути является атрибутом товара, ведь так? Да, это так, а значит все вариации товара берутся из атрибутов.

Шаг 2. Всё начинается с атрибутов товара

Для начала вспомните метки (да-да, стандартная таксономия WordPress). Вы же умеете ими пользоваться?

Вы можете заранее насоздавать себе меток, а потом при редактировании записи просто выбирать их из выпадающего списка. У атрибутов есть одно отличие — если вы создаёте их через страницу редактирования товара, то они не будут доступны для всех остальных товаров (не случайно же там пишется — Индивидуальный атрибут).

Не имеет значения, индивидуальный это атрибут или нет, в любом случае его можно будет использовать для вариаций.

Добавляем атрибуты, которые будут использоваться для многих товаров на сайте

Переходим в Товары — Атрибуты и добавляем, всё просто. Под каждой настройкой подробно описано, что она значит, так что у вас не должно возникнуть каких-либо трудностей с этим.

После добавления атрибутов на этой странице их уже можно будет выбирать на вкладке добавления атрибутов на странице редактирования самого товара.

Добавляем атрибуты уже к конкретному товару. Индивидуальные атрибуты.

Я не буду вас напрягать огромным количеством вариаций в этом посту, мы попробуем просто разные цвета, если вам этого мало, то я рассмотрю большее количество сочетаний и комбинаций уже в видео.

Итак, сейчас нам нужно добавить какие-либо атрибуты к товару. Для этого в метабоксе с данными товара отправляемся на вкладку Атрибуты.

И тут, как мы видим, мы можем использовать заранее созданные атрибуты либо добавить индивидуальный атрибут.

На скриншоте ниже я подсветил важные моменты, а сейчас я про них ещё и поговорю:

  • Сначала я выбрал тип товара — Вариативный,
  • потому что иначе я бы не смог отметить галку Используется для вариаций,
  • eсли вы используете заранее созданные атрибуты, то можете выбрать из уже использованных значений, либо кликнуть на кнопку Добавить новое,
  • а если вы добавляете Индивидуальный атрибут товара, то там значения нужно указывать в строку и разделять палками |.

Также покажу вам более серьёзную настройку атрибутов, но в текстовой версии урока (тут) для вариаций я буду использовать только атрибут цвета. Подробнее покопаемся в этом в видео.

Шаг 3. Настраиваем вариации

Наконец-то мы можем переключаться на вкладку Вариации! И сразу же WooCommerce ставит нас перед выбором:

Если вам нужны все комбинации атрибутов для вариаций, то можете смело использовать вторую опцию, если не все, то можете использовать первую и вручную их добавлять, либо также вторую, а потом удалить ненужные.

Понимаете, да, что означает вторая опция? Это например если у вас 3 размера и 3 цвета, то будет создано 9 вариаций.

Итак, вот что получилось у меня:

Очень прошу обратить внимание на то, что я обвёл красным цветом — эти кнопки появляются при наведении на ту или иную вариацию, соответственно тут вы можете её удалить, передвинуть по порядку либо, самое главное, нажав на стрелку, подробно её настроить!

Например меня интересовала в первую очередь только цена и индивидуальная для вариации картинка товара — это я и настроил.

Иии… вот что у меня получилось:

Видеоурок по созданию вариаций товаров в WooCommerce

Если вам было лень читать всё, что было до этого, а возможно вы прочитали, но не всё поняли, тогда это видео специально для вас 😎

В качестве поддержки моего блога подписывайтесь на мой канал, добавляйтесь в друзья 🙂

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Самые популярные плагины для WooCommerce

Приветствую. Сегодня у нас обзор десяти самых востребованных и популярных плагинов для интернет-магазина на WordPress под управлением WooCommerce. По умолчанию WOO предлагает базовый функционал, который многие наверняка захотят так или иначе расширить под свои нужды. Нет ничего невозможного, учитывая сотни (если уже не тысячи) премиум и бесплатных расширений уже созданных для WooCommerce.

Все описанные ниже плагины сегодня можно приобрести на codecanyon.net. по вполне вменяемым ценам и опираясь на высочайший рейтинг покупателей. Конечно, есть еще огромный набор мощных дополнений от самих разработчиков WooThemes, но цены там на порядок выше, в большинстве случаев.

Содержание

WooCommerce Currency Switcher

Если закупочные и финальные цены в магазине напрямую зависят от зарубежных поставщиков, данный плагин будет отличным подспорьем. WooCommerce Currency Switcher – это плагин, который позволяет вам переключаться между разными валютами и всегда  получать их актуальные курсы.

Важные функции плагина:

  • 2 дополнительных AJAXED-виджета: “курсы валют” и “конвертер валют”
  • 2 дополнительных AJAXED-шорткода
  • Покупатель может платить в выбранной валюте
  • Геолокация по IP с использованием родного WooCommerce PHP-класса WC_Geolocation;
  • Возможность создать валюту, которой не существует в реальности
  • Возможность установить значок и флаг для каждой валюты
  • 4 вида выпадающих списков, показывающих переключатель валют в пользовательской части (плюс флаги)
  • Установка курсов обмена с помощью cron, вручную или с помощью 4-х агрегаторов валют

 

Перейти

WooCommerce Request a Quote

Этот плагин для WordPress, позволяет вашим клиентам добавлять товары в списки своих «хотелок» и посылать запросы на отсутствующие товары администратору или шоп менеджеру интернет-магазина.

Важные функции:

  • Автоматическое создание заказа;
  • Виджет, данные которого постоянно обновляются
  • Можно с легкостью скрыть/показать кнопку «Добавить в «хотелки» или «Добавить в корзину»  в категориях/индивидуальных уровнях товаров
  • Легко добавить кнопку  на желаемые страницы магазина  и полностью ее кастомизировать
  • Просто настроить email’ ы, посылаемые множеству админов и клиентов
  • Можно с легкостью  добавлять или удалять поля в форме запроса
  • Можно отобразить благодарственный текст или редирект на страницу с благодарностью

 

Перейти

WooCommerce Advanced Bulk Edit

Добавляет очень практичную редактуру ваших товаров и их вариаций, поодиночке или группами. Выводит все товары в виде компактного и гибко настраиваемого фильтрами списка. Просто необходим при большом списке товаров и очень удобен в любом случае.

Важный функции и особенности:

  • Фильтруйте товары по названию, категории, атрибутам, типам цен и т. д.;
  • Полная редактура текста в заголовке
  • Увеличение/уменьшение по значению/проценту
  • Создание, добавление, удаление категорий/атрибутов
  • Создание/удаление товаров и вариаций
  • Выбор товаров по поисковым условиям
  • Настраиваемое ограничение количества товаров
  • Экспорт товаров в csv-файле
  • Визуальное маркирование выбранных ячеек

Перейти

Display Product – Multi-Layout

Плагин представляет собой настраиваемый мульти-шаблон для WooCommerce, позволяющий по разному (колонками, списком, таблицей, каруселью и т д.) отображать ваши товары в каталоге. Поможет всем, кого не устраивают возможности своей темы по выводу товаров в каталоге.

Особенности и функции:

  • 6 шаблонов: сетка, список, таблица, бокс и карусель
  • 36 вариантов анимации
  • Генератор новых шорткодов
  • Возможность простой фильтрации товаров
  • Кастомизация всех кнопочек и неограниченные цветовые схемы

 

Перейти

WooCommerce Advanced Shipping

Требуется расширить стандартные возможности доставок в WooCommerce? С помощью этого великолепного плагина вы сможете создавать собственные тарифы и варианты доставки, основанные на определенных, гибких  условиях.

Функции:

  • Создайте множество различных методов доставки
  • Доставка на основе страны/штата/города/почтового индекса
  • Формирование стоимости доставки на основании габаритов купленного товара

Перейти

WooCommerce Product Filter

Пожалуй, самый мощный и гибко настраиваемый фильтр товаров для вашего магазина. Имеет обширное меню настроек и удобный внешний вид самих фильтров. Легко встраивается под шапку сайта или в любое другое место шорткодами. Имеет специальные настройки совместимости для самых популярных премиум тем.

Важные особенности:

  • Неограниченное количество создаваемых фильтров.
  • Визуальный анализ работы вывода фильтров, созданных вашими клиентами.
  • Настройка фильтрации по всем возможным параметрам.

Перейти

Fancy Product Designer

Плагин позволяет клиентам добавлять и комбинировать дополнительные визуальные детали к товарам. Например, можно позволить клиентам заказывать определенный рисунок на одежде.

Функции:

  • Продвинутая цветовая система
  • Обзор товара со всех сторон
  • «Умные» цены
  • Добавление  с помощью шорткода или установка для всех товаров

https://youtu.be/OWTfBKZhgs4

Перейти

WooCommerce Dynamic Pricing & Discounts

Требуется гибкое управление скидками? Вот вам полное управление правилами установки цен на товары и скидками. Предоставьте покупателям привлекательные дисконты за большое количество покупок. Запустите специальные промо-акции на Рождество, НГ или «Черную пятницу». Распродайте все разом или устройте быструю распродажу в нужном разделе товаров. Огромные возможности.

Возможности и примеры условий получения скидок:

  • Создавайте и управляйте неограниченным количеством правил для цен, используя мощный редактор
  • Правила можно применять для всех товаров в магазине, определенных категорий или товаров
  • Отображайте таблицу дисконтных предложений на страницах товаров в виде строки или в виде сетки
  • Возможность  установить даты начала и завершения промо-акции.
  • Дисконт за покупки – дисконты растут с ростом цен купленных товаров
  • Специальное предложение – за определенное количество купленных товаров вам дается дисконт на другие товары
  • Исключение парных товаров – отсекайте определенные товары от других предложений
  • Возможность установить правило повторения определенного предложения
  • Возможность  посчитать количество товаров одного набора включений, но применить дисконт к другому включению.
  • Регулировка по процентному дисконту, ценовому дисконту или по фиксированной цене

Перейти

WooCommerce Extra Product Options

Плагин, который добавляет различные дополнительные опции и условия для продажи товаров. Настоящая палочка-выручалочка для тех, кого не устраивают стандартные условия продажи и нужно что-либо добавить, изменить, дополнить при продаже товара.

Важные функции:

  • Чекбоксы, «радио»-кнопки, выбираемые боксы, текстовые области, поля ввода и т. д.
  • Конструктор полей форм
  • Скрыть/показать цены
  • Замена изображениями для чекбоксов, «радио»-кнопок и т. д.
  • Отображение-сетки для чекбоксов и «радио»-кнопок

Перейти

Woocommerce Color or Image Variation Swatches

В вашем магазине много вариативных товаров по цвету, размеру и т п? Этот плагин позволит полностью визуализировать выбор товара в зависимости от его атрибутов.

Перейти

Важно! Данная подборка не привязана к определенному месяцу или году и будет мною обновляться время от времени. Предложения, мнения и критика в комментариях очень даже приветствуются и вполне возможно помогут кому-то сделать правильный выбор.

Получить совет и обсудить работу любых плагинов для WooCommerce вы всегда можете на нашем форуме по интернет магазинам.

Статьи по теме:

Как покупать на Theme Forest и СodeСanyon?

Как создать интернет-магазин на WordPress?

Лучшие темы для магазина на WooCommerce

Описание плагина WooCommerce

 

Woocommerce: вариативный товар

Вариативный товар — товар который может иметь разные вариации. Например модель обуви может иметь разные размеры — 39, 40, 41. Одна и та же модель телефона может иметь разные цвета: черный, белый, серебристый и т.д.

Чтобы не плодить разные страницы одного и того же товара, на страницу с товаром можно просто добавить выпадающий список, в котором выбирается необходимый параметр (цвет, размер) для заказа.

Рассмотрим как это делается в интернет магазине Woocommerce — плагине для WordPress.

Как создать вариативный товар

Свойство товара

Сначала нам необходимо создать свойство в котором будут вариации. Например создадим свойство «Размер» с размерами «X, XL, XXL»: переходим Товары — Свойства — в поле «Имя» вписываем название свойства и жмем кнопку «добавить свойство»:

Далее на этой же странице в свойство добавляем варианты «X, XL, XXL»: жмем кнопку «Настроить условия» или «Изменить значение» возле появившегося свойства:

 

Создаем вариативный товар

Теперь можно это свойство добавлять к самому товару. В админке WordPress переходим в «Товары» — далее создаем новый товар или переходим к редактированию старого — на странице с добавлением товара в выпадающем списке «информация о продукте» выбираем пункт «Вариативный товар»:

Далее переходим на вкладку «свойства», жмем кнопку «добавить» и выбираем то свойство, которое нужно добавить товару, в нашем примере это «Размер».

Указываем какие именно размеры есть у этого товара, если в наличии есть все размеры — жмем на кнопку «Выбрать все».

Ставим галочки возле «Отображается на странице товара» и «Используется для вариаций»:

Теперь обязательно жмем на кнопку «сохранить», «опубликовать» или «обновить», после этого должна появится вкладка «Варианты».

Переходим на вкладку «Варианты» и добавляем варианты по порядку, для каждой вариации указываем цену товара, можно указывать изображение, если вид товара отличается в зависимости от варианта.

Можно воспользоваться кнопкой «Обьединить все варианты» — тогда создадутся все варианты. Если свойств несколько, например три цвета и четыре размера, то всего автоматически будет создано 3*4=12 вариантов.

Если цена на все варианты одинакова, то можно воспользоваться выпадающим списком для массового изменения полей: выбираем пункт «цена» и указываем цену. Во всех вариантах автоматически будет присвоена одна и та же цена.

 

 

Понравилось? =) Поделись с друзьями:

Опубликовано в рубрике WordPress

Прямая ссылка на вариацию товара в WooCommerce

WooCommerce по праву считается самой распространенной (около 12% интернет магазинов мира!) и очень мощной платформой электронной торговли. В нем заложено огромное число возможностей по функционалу магазина и еще больше решений реализуются с помощью плагинов WC. Одна из очень полезных функций, изначально реализуемых WooCommerce — вариативные товары, то есть, товары, у которых стоимость, доставка или просто условия покупки зависят от значений атрибутов товара. Например, футболки могут иметь разный размер или цвет, и от этого зависят цена или складские остатки. То есть, комбинации значений атрибутов (цвет, размер) формируют вариацию, которая может рассматриваться как отдельный товар, имея свои складские остатки, свои цены, распродажу и т.п. То есть, не просто «футболка», а «зеленая футболка XXL». Но при этом все вариации всё равно являются одним продуктом с единой товарной карточкой.

Часто возникает задача сделать прямую ссылку на конкретную вариацию товара. Для этого есть масса готовых плагинов, например WooCommerce Direct Variation Link, однако он не обновлялся уже три года и на последних версиях WooCommerce, прямо скажем, не работает.

Однако есть куда более простой способ сделать прямую ссылку на вариацию продукта средствами самого WooCommerce. Для этого надо четко знать слаги (ярлыки) атрибутов и их значений, которые используются в вариации. Чтобы их узнать переходим в раздел Товары — Атрибуты:

Записываем ярлык нужного атрибута, в нашем случае это tarif:

Открываем список значений атрибута, для этого щелкните по «Установить правила» и записываем слаги (ярлыки) нужных значений:

Всё! Теперь ссылка на варицию выглядит так:

http:// сайт.ru /магазин/товар/?attribute_pa_tarif=econom

То есть, дописываем GET-параметр attribute_pa_слаг-атрибута=слаг-значения. Если используется несколько атрибутов в вариации, разделяйте их символом &. И всё!

Вот пример: Ведение рекламных кампаний в двух системах по тарифу Оптимальный. Откройте эту ссылку и посмотрите внимательно на значения GET-параметров. Попробуйте изменить GET-параметр на attribute_pa_tarif=vip и посмотрите, как переключатся вариации.

Вот так всё просто!

Поделитесь или сохраните себе:

Выбор цвета товара картинкой на WooCommerce с помощью плагина

Содержание
  1. Improved Variable Product Attributes for WooCommerce
  2. Настройка отображения цветов

Наверняка каждому владельцу интернет-магазина хочется представить свой товар перед покупателями в выгодном свете: от изображения и низкой цены до характеристик и отзывов. Еще один немаловажный фактор заключается в том, чтобы один и тот же товар не дублировать, перемежая его только лишь разными цветами, а выводить все его свойства на одной странице.

Improved Variable Product Attributes for WooCommerce

На помощь нам приходит замечательный плагин Improved Variable Product Attributes for WooCommerce, который в настоящий момент является платным, но при желании можно скачать “бесплатную” версию. Нашей задаче он вполне соответствует, объединяя все те возможности, которые необходимы каждому интернет-магазину: выбор цвета по RGB, картинке, тексту со всплывающими подсказками. Каждый цвет может иметь свою цену и изображение товара. Работает без перезагрузки страницы.

Создание вариативного товара на WooCommerce и заполнение нужных нам атрибутов – тема не нова, надеюсь вы уже в курсе. Если нет, то перейдите по ссылке, а потом вернитесь к продолжению данного урока.

Однако, значения в атрибутах должны выглядеть как-то так (см. скриншот 1), а в товаре так (см. скриншот 2).

Настройка отображения цветов

После установки и активации плагина переходим к его настройкам (“WooCommerce” – “Настройки” – вкладка “Improved Variable Product Attributes”). Здесь мы видим кнопку “Add Attribute Customization”, жмем. Появляется окно “Add New Attribute”, где нам и предстоит выбрать основной атрибут, заполнить цвет каждого свойства и вписать текстовое значение для всплывающей подсказки.

С полем “Select Attribute”, надеюсь, все понятно, а на “Select Attribute Style” хотелось бы остановиться подробнее:

  • Plain Text – обычный текст названия цвета, обрамляемый сплошной линией.
  • Color – выбор цвета по визуальному редактору или вставка RGB цвета (например, #0e4d8e).
  • Thumbnail – миниатюра, другими словами картинка.
  • Select Box – выпадающий список.
  • HTML – собственный HTML код.

Не забываем заполнять Tooltip, служащий всплывающей подсказкой при наведении на миниатюру.

В итоге у вас должно получиться примерно следующее:

Чтобы увеличить миниатюры, в пользовательской таблице стилей добавим свойства для класса:

#ivpa-content .ivpa_attribute.ivpa_image .ivpa_term {
  width: 72px;
  height: 72px;
}