Приблизительное время чтения: 8 минут
WordPress представляет собой отличную платформу для создания собственного интернет-магазина. Для того, чтобы работать с электронной коммерцией было удобнее, предусмотрены специальные плагины. Одним из наиболее популярных модулей считается WooCommerce. На его основе можно создавать полноценный сайты, а рассматриваемое нами дополнение поможет изменять дизайн каталога, товаров и даст дополнительную галерею.
Полезно: Как работать с медиафайлами WordPress?
Общая информация
Плагин Variation Swatches разработан компанией InnovativeWP. Он представляет собой комплексное решение, объединяющее 3 разных модуля для работы WooCommerce. Все требования, которые выдвигали пользователи, были учтены при создании модули. Он представляет собой идеальное решение, объединяющее все в одним месте:
- дополнительные изображения галереи;
- образцы вариаций;
- дизайнер галереи.
С ним вы можете добавить вертикально-горизонтальную галерею продуктов и настроить дизайн страниц галереи так, как вам этого захочется. Кроме того, вы можете добавлять цвет, изображения, атрибуты, текст, раскрывающиеся списки и образцы кнопок прям на страницу продукта, страницу поиска и страницу архива. Плагин предусматривает более 112 разнообразных настроек.
Дополнительные изображения галереи
Образцы вариантов продуктов WooCommerce и дополнительная галерея – это полноценное решение для страницы товара на вашем сайте. Оно позволяет настроить самые разные элементы страницы. С помощью плагина вы можете добавить дополнительные изображения в галерею продукта.
Основная проблема такого подхода заключалась в том, что в демонстрации отображались все изображения, но они сохранялись для каждого из вариантов. При этом нельзя было присвоить картинки отдельным вариациям товара. Например, если у вашего продукта есть варианты, основанные на цветах, то в галерее все изображения будут отображаться, когда пользователь выбрать один из доступных оттенков.
Для решения проблемы в плагин был включен аддон дополнительных изображений. Он позволит вам добавлять несколько изображения для каждого отдельного варианта. Теперь вы можете увидеть, что полная галерея продуктов меняется, когда клиент будет изменять цвет товара.
Вы можете добавлять к товару неограниченное количество дополнительных изображений. Все их можно будет сложить в стопку, либо же отсортировать и сгруппировать в слайдер.
Этот плагин 3 в 1 для дизайна WooCommerce разработан таким образом, что загрузка не нагружает страницу, а осуществляется с использованием технологии AJAX. При желании, в галерею изображений может быть добавлено видео, собственно размещенное или из сервисов YouTube и vimeo.
Модуль обладает полной адаптивностью и оптимизацией, поэтому хорошо реагирует на все виды устройств. Галерея может состоять из горизонтальных и вертикальных изображений, внешний вид при этом не будет искажен. В параметрах отображения можно выбрать выводить картинки слева или справа. Каждое дополнительное изображение настраивается, если это необходимо, для него задаются размеры.
Плагин способен отображать изображений вариаций не только на странице с товаром, но и на странице архива. В модуле можно найти огромное количество ничем не ограниченных параметров.
Полезно: Универсальные шаблоны для сайта стартапа на WordPress 2020
Образцы вариаций
Следующей возможностью плагина 3 в 1 является подключение образцов вариантов. Эта функция позволяет настроить несколько областей на странице продукта. Модуль заменяет образцы вариантов раскрывающимися списками в образцы вариантов дизайна. По умолчанию WooCommerce не позволяет создавать удобные для пользователя товары с несколькими вариантами. Вы можете заметить проблему с выпадающими списками, которые не раскрывают всей информации о товаре.
Если вы создаете свой сайт с помощью плагина WooCommerce, то вам необходим изучить разные опции страниц продуктов. Благодаря плагину у покупателя может появиться точное представление о продукции, а также он сможет сделать определенный выбор в пользу того или иного варианта товара.
Модуль позволяет генерировать следующие элементы на странице с подробной информацией:
- образцы цвета;
- кнопки;
- образцы изображений;
- двухцветные изображения;
- образцы атрибутов;
- раскрывающиеся образы.
Для любого интернет-магазина очень важно создать такую страницу продукта, которая даст четкое представление о товаре.
Также вы можете смешивать их между собой, подключая разные типы данных. Для одного продукта нет никаких ограничений в данной настройке.
Придать дополнительную изюминку вашему сайту позволят дополнительные возможности, среди которых поддержка архивов, ссылки для общего доступа, всплывающие подсказки и другое.
Актуально: Выбираем яхту мечты
Дизайнер галереи
Третьей опцией плагина является настройка галереи. В данном разделе вы сможете редактировать параметры продуктов для вашего интернет-магазина. Если раньше вы пользовались WooCommerce, то можете знать, как стандартно выглядит дизайн макета страницы продукта. Предыдущие пункты позволили решить ряд проблем, но все же галереи не настроена полностью, так как по умолчанию в плагине не предусмотрены такие настройки для данной области.
Благодаря новому модулю вы сможете управлять следующими характеристиками галереи:
- галерея продуктов;
- размер галереи;
- функции масштабирования изображений;
- значок поверх изображений;
- горизонтальная галерея;
- вертикальная галерея;
- слайдер продуктов;
- размер изображений;
- размер эскизов и другое.
После настройки плагина внешний вид страницы станет гораздо привлекательнее. В первую очередь, вы можете отредактировать расположение значка поиска. Его можно разместить в любом удобном месте, также вы можете изменить значок или вовсе удалить его со страницы.
Полная коллекция изображений галереи группируется в слайдер, что избавляет от ужасной и большой панели с картинками. Вы можете менять цвет галереи, дизайн рамки и множество других параметров отображения.
Размеры галереи продуктов могут быть изменены с полноэкранного до индивидуального уровня. Это позволит удобнее просматривать полную картинку товара, не нагружая при этом сайт дополнительной загрузкой. Изменить можно и размер миниатюры, а также их отображаемое количество. Есть и множество других опций, которые не менее полезны владельцев собственных интернет-магазинов.
Полезно: Рейтинг лучших плагинов WordPress для галерей за 2020 год
Функции
Плагин 3 в 1 для дизайна WooCommerce Variation Swatches обладает кроссбраузерной совместимостью, поэтому в каком бы средстве просмотра страниц вы ни открыли свой сайт, он всегда будет отображаться красиво и полнофункционально. Для использования всех возможностей модуля вам не потребуются навыки кодирования, так как для всех настроек предусмотрен удобный внешний интерфейс. Также плагин полностью соответствует политике конфиденциальности GDPR.
Познакомиться с каждой из опций можно в режиме демонстрации. Это позволит вам убедиться в необходимости функционала для вашего конкретного случая. Среди всех функций плагина:
- образцы кнопок;
- образцы цветов;
- двухцветные изображения;
- образцы изображений;
- поддержка быстрого просмотра;
- выпадающие образцы;
- вертикальная или горизонтальная галереи;
- размер галереи, который может меняться в зависимости от устройства;
- номера миниатюр;
- анимированный предзагрузчик;
- галерея с автоматическим воспроизведением;
- стрелки;
- масштабирование картинок;
- всплывающие кнопки;
- тип продукта;
- изображение в архиве;
- образцы формы;
- информация о запасах;
- образцы размеров;
- видимость одной вариации;
- изображения с одним вариантом;
- смешивание выпадающих списков;
- текстовые подсказки к изображениям;
- архивные страницы;
- фильтры;
- слайдер галереи и многое другое.
Благодаря всем этим функциям ваш сайт электронной коммерции будет выглядеть качественно, современно и уникально. Полезной опцией будет кэширование плагина, что значительно увеличит скорость его работы. За счет наличия AJAX для многих действий не требуется перезагрузка страницы, а значит работать с товарами будет еще проще и удобнее.
С плагином вы можете настраивать внешний вид кнопки «Добавить в корзину», выполнять выравнивание образцов, осуществлять импорт или экспорт образцов вариантов и изображений галереи, а также добавлять видео файлы с информацией о товаре.
Полезно: Подборка 12 лучших шаблонов WP для охранного агентства
Читайте также:
- Как подключить ваш сайт на WordPress к Fediverse
- Общайтесь С Большим Количеством Клиентов: Появился Наш Каталог Партнеров
- Открыта регистрация на сайте WordPress.com: Бесплатные веб-сайты для студентов
Особенности
Есть ряд особенностей модуля, которые зачастую интересуют владельцев интернет-магазинов. Так плагин совместим с многими самыми популярными конструкторами страниц, среди которых:
- Elementor;
- WPBakery;
- Гутенберг;
- Visual Composer;
- DIVI Builder;
- SiteOriginPage Builder и другие.
Для мультиязычных сайтов полезным будет поддержка нескольких языков. Модуль обладает совместимостью с английским, испанским, немецким, французским, китайский, арабским, русским и португальским языками. Тем не менее, если вам необходимо перевести его на другие языки, то можно сделать это с помощью совместимых плагинов WPML, Loco Translate или любого другого для перевода.
Плагин 3 в 1 для дизайна WooCommerce Variation Swatches рассчитан исключительно для ресурсов, разработанных на WordPress. Использовать его на сайте с другой CMS не удастся.
Модуль работает с уже имеющимися на сайте вариациями, автоматически изменяя образцы после активации таблицы стилей. Это позволит сэкономить время, если вы уже начали работу с интернет-магазином или планируете усовершенствовать уже функционирующий ресурс.
Для начала работы с плагином необходимо установить основные настройки, а для создания образцов вариантов вам понадобятся дополнительные параметры и дизайн. Основные настройки могут включать в себя инструменты, план по умолчанию, глобальные варианты формы и стили по умолчанию. В дополнительных параметрах вы найдете отключение вариации при отсутствии на складе, AJAX, обмен URL-адресами, информацию о наличии продукта и другие похожие опции.
Оптимизировать сайт в полной мере с плагином будет легко. Вы сможете давать вашему ресурсу дополнительные преимущества, а SEO настройка будет выполняться автоматически. Модуль не будет влиять на скорость работу сайта, так как его производительность находится на высоком уровне.
Есть несколько распространенных ошибок, с которыми регулярно сталкиваются пользователи:
- отсутствие настройки изображений предполагает назначение медиафайла или оттенка для выбранной копки, важно присвоить значение каждому варианту;
- бесконечная прокрутка и AJAX;
- кэширование предусматривается только одним из вариантов, либо из настроек сайта, либо с помощью специально подключенного модуля (некоторые плагины будут несовместимы с продуктом).
Подробнее об их решении можно прочесть в официальной документации к плагину.
Полезно: WooCommerce – оптимизация размеров одежды в интернет-магазине
Стоимость
$14
Данный плагин 3 в 1 для дизайна WooCommerce можно приобрести за 14$ за обычную лицензию. Она включает в себя сам программный продукт, все будущие обновления и 6 месяцев поддержки от разработчика. Качественный модуль постоянно улучшается, что позволяет ему оставаться уникальным, эффективным и актуальным. Каждая новая версия получает исправление выявленных ошибок и улучшение функционала.
Разработчики пытаются создавать более и более совершенные плагины, поэтому обращают внимание на предложения пользователей. Если у вас есть какие-то конкретные идеи по поводу функционала продукта, то их можно отправить компании, чтобы они рассмотрели возможность добавить такие опции в одной из следующих версий плагина.
Полгода поддержки позволят вам не волноваться, если в процессе эксплуатации возникнут какие-либо трудности. Специалисты оперативно отвечают на запросы, помогая клиентам в решение разнообразных вопросов. Обратиться к команде можно и до приобретения, если вас смущает какой-либо функционал, и вы хотите уточнить по нему некоторые аспекты.
Для полноценного функционирования модуля требуется наличие WordPress 5.0.x и более высокой версии, а также WooCommerce 4.0.x или выше.
Заключение
Плагин 3 в 1 для дизайна интернет-магазина на WooCommerce открывает множество возможностей по модернизации подробной страницы продукта, а также настройке других отдельных параметров товаров. С ним вы сможете создать привлекательную и удобную галерею. Он даст клиентам максимально наглядное представление о вариантах товара, а также поможет совершать покупки в привычном формате.
