Ярлык на товар скидка
Товарные лейблы: «Скидка», «Новинка» и любые другие наклейки на фото товаров
Хотя мы сильно торопились, чтобы успеть к новогоднему сезону, товарные лейблы нужны не только для распродаж. Они пригодятся в магазине всегда. И теперь лейблы есть в Эквиде — любые, какие захотите. Например, такие:
Товарные лейблы — это «наклейки» на фотографиях товаров в каталоге. Они нужны, чтобы обратить внимание посетителей на определенные товары: бестселлеры, вещи со скидкой, новинки или любые другие товары, заслуживающие внимания. Рассказываем, как настроить и использовать новый инструмент в
Новый способ привлечь внимание к товарам
Перед Новым годом продажи сильно вырастут (по прогнозу на Люди ещё не готовы возвращаться к активному поэтому будут тратить деньги в интернете.
Итог: больше потенциальных покупателей, но и выше конкуренция. Поэтому стоит использовать максимум возможностей, чтобы обратить внимание на ваш товар. Лейблы — идеальный инструмент для этого:
Цветные надписи на фотографиях товаров в каталоге подскажут покупателям, почему им стоит посмотреть на тот или иной товар. Лейбл виден также на странице товара:
Лейблы в справляются со своей задачей максимально эффективно. И вот почему:
Теперь подробнее, как с помощью лейблов помочь покупателям быстрее найти подходящий товар.
Как использовать лейблы для увеличения продаж
Предлагаем варианты, как настроить лейблы для привлечения внимания к конкретным товарам.
Покажите товары со скидкой
Скидка — главный мотиватор покупки. Если уж снижать цену, то рассказывать об этом громко. Яркий лейбл с указанием процента скидки для этого как раз подойдёт.
Отметьте бестселлеры или товары с отличными отзывами
Покупая в интернете, люди обращают внимание на отзывы. Особенно если товар дорогой. Если в вашем магазине есть отзывы, пометьте товары с самым высоким рейтингом лейблом «Выбор покупателей». А, к примеру, для самых покупаемых товаров подойдёт надпись «Хит» или «Бестселлер».
Презентуйте новинки
Если загружаете в каталог товар, сразу добавляйте к нему лейбл «Новинка», чтобы новый ассортимент не остался незамеченным.
Предложите товары для предзаказа
Замените грустный лейбл «Распродано» на оптимистичный «Предзаказ». Убьёте двух зайцев: вы получаете заказы, а вашим клиентам не придётся снова заходить в магазин и проверять наличие товара. Вот как это может выглядеть:
А ещё с помощью лейблов можно предупреждать клиентов, когда товар будет в наличии. Например, напишите «Поставка 1 декабря» и все вопросы будут сняты.
Распродайте залежавшиеся товары
Если старые коллекции или сезонные вещи никак не уходят и занимают склад, устройте распродажу. Настройте лейблы и начните освобождать место для новых товаров.
Продвигайте дополнительные услуги
Привлекать покупателей можно не только скидками: бесплатная доставка, подарок к покупке, самовывоз, праздничная упаковка, экологически чистая упаковка… Вариантов множество. Используйте лейблы, чтобы сообщить посетителям обо всех выгодных предложениях и опциях в вашем магазине.
Товарные лейблы пригодятся во многих случаях, но не советуем злоупотреблять этим инструментом. Если лейбл будет почти на каждом товаре, то эффект привлечения внимания пропадёт. И наоборот, редкие лейблы сообщают посетителю, что вот этот товар особенный.
Как настроить продуктовые лейблы в магазине
Продуктовые лейблы доступны в на всех платных планах.
Перед настройкой лейблов загляните на страницу Обновления и убедитесь, что в вашем магазине включена новая витрина. Без неё лейблы работать не будут. (Хорошие новости: если вы завели магазин на Эквиде позже весны 2018 года, новая витрина у вас уже включена).
Чтобы добавить лейбл к товару:
Вот и всё! Товар готов к продвижению.
Важно: Если вы используете в магазине функцию «Сравнить с ценой», настроенные лейблы заменят автоматический ярлык «Распродажа». После удаления настроенных лейблов ярлык «Распродажа» будет отображаться снова. То же касается автоматических ярлыков «Распродано» на товарах, которых нет в наличии.
Подробнее о добавлении, удалении и настройке товарных лейблов читайте в нашем Центре поддержки.
Ещё больше вариантов лейблов
Товарные лейблы — отличный способ привлечь посетителей и показать им ваши лучшие предложения. Новая функция подойдёт магазину с любыми товарами. Но если вы захотите оформить лейблы нестандартно — выбрать индивидуальную форму, размер и положение или показать сразу несколько лейблов на одном товаре — используйте специальное приложение Product Labels. С ним вы сможете создать любые варианты лейблов для вашего магазина.
Используйте функции Эквида по максимуму, чтобы быть во всеоружии к началу праздничного сезона. Попробуйте наши 20 советов по настройке к распродажам.
Virtuemart 2. Как добавить к товару ярлыки «скидка», «новинка» и т. д.(Кейс #4).
Часто, для привлечения внимания к определенным товарам интернет-магазина, на них добавляются ярлыки. Это может быть «Новинка», «Скидка», «Акция» и другие. Данных трюк позволяет быстрее продавать товары, или, как минимум, заинтересовать пользователей. Все любят скидки, даже если это просто рекламный ход. Virtuemart 2 позволяет достаточно легко реализовать данную функцию, но почему-то в Интернете описаны лишь способы требующие хаков ядра, либо оплаты за дополнительное расширение. В этой статье я расскажу, как самостоятельно, быстро и бесплатно добавить любые ярлыки к товарам Virtuemart 2 не используя дополнительных расширений и не прибегая к хакам.
Добавление ярлыков в Virtuemart 2. Планирование.
Прежде, чем приступать к реализации, было бы неплохо все спланировать. Весь процесс добавления ярлыков будет состоять из следующих этапов:
Здесь этапы описаны кратко, но дают возможность понять, что именно требуется сделать. Ниже разберем каждый этап подробно и с примерами.
Добавление ярлыков в Virtuemart 2. Выбор и подготовка изображений ярлыков.
Во-первых, нужно определиться, сколько мы хотим добавить ярлыков, подобрать подходящие изображения и привести их к единому стилю и размерам. Предположим, нам нужно создать три различных ярлыка с возможностью добавлять любой из них к любому товару. Пусть это будет «Скидка», «Новинка» и «Акция». На самом деле ярлыков может быть сколько угодно. Добавить их позже также не составит большого труда.
Они представляют собой три картинки формата PNG размеров 48×48 px. Если вы планируете поместить ярлыки непосредственно на изображения товаров, то картинки ярлыков обязательно должны иметь прозрачный фон, а соответственно быть форматов PNG или GIF.
После того, как ярлыки подготовлены, необходимо загрузить их на сайт. Проще всего сделать так:
Файлы ярлыков должны появиться в списке:
Когда ярлыки готовы и загружены на сайт можно переходить к следующему этапу.
Добавление ярлыков в Virtuemart 2. Создание дополнительного поля Virtuemart 2 для ярлыков.
Добавлять ярлыки к товарам мы будем с помощью дополнительного поля Virtuemart 2. Причем поле потребуется только одно. Переходим в менеджер дополнительных полей Virtuemart 2 и создаем новые поле типа «Изображение» с настройками, как показано на рисунке ниже:
Не забудьте указать позицию макета. Она должна быть уникальной и использоваться только для этого поля.
После того, как дополнительное поле создано, переходим к добавлению его кода вызова для товаров.
Добавление ярлыков в Virtuemart 2. Добавление кода вызова дополнительного поля Virtuemart 2 в макетах категории и товара.
Предполагается, что ярлыки будут показаться в категории товаров на некоторых товарах категории и в карточке товара. Ниже привожу коды отдельно для макета категории и товара.
Код вызова дополнительного поля ярлыков на странице категории товаров.
components/com_virtuemart/views/category/tmpl/default.php
templates/[ваш_шаблон]/html/com_virtuemart/category/
Если каких-то каталогов не хватает, создаем их самостоятельно. Если файл уже присутствует в конечной папке, то заменять его не нужно.
2. В скопированном файле (который находится в папке с шаблоном), находим код вызова основного изображения и добавляем после него приведенный код:
Код вызова дополнительного поля ярлыков на странице товара.
components/com_virtuemart/views/productdetails/tmpl/default_images.php
templates/[ваш_шаблон]/html/com_virtuemart/productdetails/
Если каких-то каталогов не хватает, создаем их самостоятельно. Если файл уже присутствует в конечной папке, то заменять его не нужно.
2. В скопированном файле (который находится в папке с шаблоном), находим код вызова основного изображения и добавляем после него приведенный код:
Перед правкой кода мы переопределяем макеты категории и страницы товара в используемый шаблон Joomla, что предотвратит исчезновение правок в случае обновления Virtuemart 2.
На этом правки кода закончены. Переходим к добавлению ярлыков для определенных товаров.
Добавление ярлыков в Virtuemart 2. Добавление дополнительного поля ярлыков для определенных товаров.
Здесь все очень просто. Выбираем в админке товар, к которому нужно добавить ярлык. Переходим в его настройки. Во вкладке «Настраиваемые поля» выбираем тип поля «Ярлык» и указываем для него необходимое изображение ярлыка.
Сохраняем. Если все сделано правильно, то после этого действия на сайте, в категории и товаре, появится наше изображение. После этого останется лишь красиво его оформить.
Добавление ярлыков в Virtuemart 2. Оформление ярлыка в контексте товара.
Всё, что касалось работы с данными, мы сделали. Осталось исключительно оформление (верстка). Поскольку в коде мы задали уникальные классы, то остается только оформить ярлык с помощью CSS. Ниже я привожу CSS-код, который подходит для стандартного шаблон Virtuemart 2. Его использовать необязательно. Можно все оформить по-своему, но для примера привожу:
После этого наши ярлыки выглядят так:
Таким образом, мы получили функционал добавления неограниченного количества ярлыков для товаров без каких-либо дополнительных расширений и хаков. Подобным способом можно добавлять и выводить не только ярлыки, но и любые другие данные в любом месте макетов. Всё удивительное просто :-).
Значки, скидки, акции на товары Woocommerce, супер плагин
Продолжаем освещать самые интересные и полезные плагины wordpress для онлайн магазина Woocommerce. Сегодня вы узнаете как добавлять на изображения товаров значки со скидками и акциями, для привлечения внимания. Вы сможете сами создавать значки, сможете выбрать цвет значка, цвет текста значка, расположение значка. Можно будет выбирать на каком товаре показывать значок с акцией, а на каком не показывать.
— Text Options, укажите здесь текст, который будет отображаться в значке и выберите цвет текста.
— Style Options, укажите здесь цвет и размер значка.
— Position, выберите расположение значка.
На вкладке Image Badge можно выбрать уже готовые значки.
Далее, после создания и сохранения значка, перейдите на страницу редактирования товара, в который вы хотите добавить значок. На странице товара, справа, у вас появится новый виджет, где вам нужно будет выбрать, какой значок должен отображаться на данном товаре. После выбора значка обновите товар.
После добавления значка и обновления товара, перейдите в Магазин и любуйтесь результатами.
Персональные ярлыки (бейджи) на товары WooCommerce
Ярлык/бейдж размещается на картинке товара в каталоге и на картинке в карточке товара. Можно указать свои % скидок, различные надписи и т.д.
Для реализации этих возможностей сущестуют бесплатные и платные плагины. Рассмотрим некоторые их них.
YITH WooCommerce Badge Management
После установки плагина появляется два раздела: Badges и YIT Plugins (а в нем подраздел Badge Management с общими настройками плагина).
Базовые возможности плагина:
— Создание текстовых ярлыков (можно указать свой текст или цифры, задать расположение ярылка на картинке товара, указать размер и цвет ярылка)
— Создание графических ярлыков. Есть 4 готовых графических ярлыка.
— В настройках плагина есть возможность скрыть ярлыки в сайдбаре, а также скрыть ярлыки по умолчанию и использовать только ярлыки плагина WooCommerce Badge Management.
В настройках товара (после установки плагина) появляется опция выбора ярлыка для товара.
Существует платная премиум-версия плагина, в которой возможности плагина значительно расширены (большой выбор графических ярлыков и больше настроек).
Нашел другой, почти идентичный вышеописанному плагин: Badge Management for WooCommerce
WooCommerce Simple Product Badge
Позволяет выводить свой текст в ярлыке и задать ярлыку свои стили.
После установки плагина в настройках товара, в блоке «Данные товара» во вкладке Общие появится 2 поля «Badge Title» (Название)
и «Badge Class» (Класс стилей). В последнем поле мы можем задать свои стили для ярлыка (размер, цвет, отступы, расположение и т.д.).
У меня плагин не захотел на сайте работать.
WooCommerce Product Badge
Плагин добавляет свои стили для уже существующих ярлыков по умолчанию.
После активации плагина в разделе WooCommerce появится подраздел Product Badge со своими настройками.
Сами ярлыки отображаются на странице каталога (на картинке товара) и на странице отдельного товара (расположение можно задать в настройках плагина). Для ярлыка «Новый» можно задать количество дней, на основании которых плагин определяет насколько товар является новым.
WooCommerce New Product Badge
Плагин добавляет свои стили для уже существующих ярлыков по умолчанию. Единственная настройка находится в разделе WooCommerce — Настройки — Товары — Отображение — New Badge. В этой настройке задаем новизну товара в виде дней.
WooCommerce Smart Sale Badge
Плагин оформляет ярлык «Скидка» и выводит число скидки в цветном блоке. Настройки отсутствуют.
Improved Sale Badges
Плагин оформляет ярлык «Скидка» и выводит число скидки в стильной иконке на картинке товара. Настройки отсутствуют.
Существует премиум-версия плагина.
WooCommerce Advanced Product Labels
Примечание
Некоторые коммерческие премиум-темы уже имеют из коробки функционал персональных ярлыков для товаров. Перед установкой плагина, уточните, возможно в вашей теме уже присутствует эта функция. Например, персональные ярлыки для товаров можно задать в теме Flatsome (от издателя Themeforest).
Выводы
Из бесплатных плагинов, наиболее функциональным и полезным мне показался плагин YITH WooCommerce Badge Management.
Если вам нужно просто выделить скидки на сайте, то подойдут WooCommerce Smart Sale Badge и Improved Sale Badges.
Есть еще плагины, которые не описаны в обзоре? Напишите о них в комментариях.
В 2011 г. я впервые познакомился с CMS WordPress. Еще тогда я увидел в ней перспективу для себя. И не ошибся. Это знакомство изменило мою жизнь.
Сегодня я занимаюсь разработкой сайтов для малого и среднего бизнеса.
Веду свой Youtube-канал на котором рассказываю как можно использовать WordPress в персональных проектах, а также для онлайн-бизнеса.
Кроме этого, я активно изучаю SEO, чтобы расширить сферу своих услуг.
Меняем стили и название ярлыка «Распродажа», кнопки «Добавить в корзину» и полей страницы корзины
Слова на русском «Добавить в корзину» и «Распродажа» в некоторых шаблонах смотрятся слишком громоздко. Внешний вид Woocommerce изначально заточен под английский язык. Слова Sale, New или Add to cart занимают немного места на кнопках и ярлыках. Но для других языков есть простые решения. Можно, конечно, создать свой локальный файл перевода. Но это не совсем удобно, так как Woocommerce постоянно дорабатывается и после обновлений легко забыть синхронизировать шаблон с кастомным переводом. Поэтому лучше поменять название кнопок и ярлыков Woocommerce при помощи очень удобного конструктора ярлыков или вручную с помощью кода.
Данные функции можно применить и на мультиязычном сайте, так как мы создадим поле для перевода. Вставлять их надо в файл functions.php.
Изменим слово «Распродажа» на «Скидка» на бейдже в Woocommerce
Если мы снижаем цену на товар, то на карточке товара выводится стандартный ярлык (бейдж) со словом «Распродажа». Его можно сменить на любое удобное слово, например, «Акция» или «Скидка».
Процент вместо слова «Распродажа»
Эта функция заменит слово «Распродажа» на процент скидки. Процент рассчитается автоматически. Вы можете изменить слово Sale на любой другое слово или символ.
Если используете сгруппированные товары, то воспользуйтесь этой функцией.
Сумма скидки вместо «Распродажа»
С помощью этого кода замените стандартный текст ярлыка на сумму скидки.
Изображение вместо фона ярлыка «Распродажа»
Используйте CSS для очистки фона ярлыка.
Стили для ярлыка
Также мы можем задать свой стиль ярлыкам Woocommerce. Например, сделаем анимированный значок. Он будет слегка пульсировать, тем самым привлекая внимание посетителей.
Удалить ярлык «Распродажа»
Если вы не хотите акцентировать внимание покупателей на скидках, то просто удалите ярлык. Скопируйте и вставьте следующий код в ваш файл function.php.
Изменим название кнопки «Добавить в корзину»
Чтобы сменить название кнопки на страницах одиночного товара, вставьте этот код в function.php:
Для смены названия кнопки на всех остальных страницах Woocommerce, примените этот код:
Или объединим обе функции в одну, если хотим сменить название кнопки Добавить в корзину на всех страницах. Вместо текста можно вставить иконку.
Кастомный CSS для кнопки «Добавить в корзину»
Вы можете задать свой стиль кнопке «В корзину». Это CSS код анимированной кнопки.
Как изменить поля на странице корзины
С помощью этой функции можно изменить слова: «Просмотр корзины», «Обновить корзину» и «Оформить заказ» на странице /cart/.