Здравствуйте, друзья! Сегодня мы с Вами поговорим о том, как добавить возможность сравнения товаров в интернет магазине созданном с помощью плагина WooCommerce.
Возможность сравнивать товары есть практически на всех сайтах интернет магазинов, и если Вы захотели добавить такую возможность на свой сайт, данный урок будет очень полезным.
Сравнение товаров в интернет магазине WooCommerce
Добавлять возможность сравнения товаров мы с Вами будем с помощью плагина YITH Woocommerce Compare. Итак, приступим!
1. Устанавливаем плагин YITH Woocommerce Compare.
2. Активируем плагин. После активации кнопка сравнения появится на всех товарах магазина.
Как видите, кнопка появилась, но на английском языке. Теперь нам нужно перевести название кнопки да и в целом почти весь плагин на русский язык.
Перевод плагина YITH Woocommerce Compare на русский язык
Перед созданием этого урока я перевел на русский язык часть плагина, которой будет вполне достаточно. При желании Вы сами можете любым удобным вам способом изменить мой вариант перевода. И так, начнем!
1. Скачайте архив с файлами перевода.
2. Разархивируйте содержимое архива (в архиве два файла).
3. Скопируйте файлы yit-ru_RU.po и yit-ru_RU.mo и вставьте их в папку languages, которая находится в папке плагина YITH Woocommerce Compare (wp-content\plugins\yith-woocommerce-compare\languages).
4. Теперь перейдите в WooCommerce -> Настройки -> Products Compare и введите на русском языке текст кнопки и название таблицы сравнения. Для сохранения изменений не забудьте нажать кнопку «Сохранить изменения».
После этого можно сказать что плагин переведен, и готов к работе.
Вот такую таблицу сравнения товаров мы получим в результате:
Добавление виджета сравнения товаров
С помощью плагина YITH Woocommerce Compare можно добавить виджет, который будет отображать товары добавленные к сравнению. Для добавления виджета перейдите в Внешний вид -> Виджеты и установите виджет на любой сайдбар:
Друзья, если у Вас возникают вопросы — пишите в комментариях, и я постараюсь Вам помочь.
А как сделать кнопку в произвольном месте? Точнее сказать как кнопку то сделать я знаю, а как вот ей добавить функционал плагина?
Кнопку оставляем ту же, а в стилях CSS для этой кнопки прописываем абсолютное позиционирование — position: absolute (спозиционируйте в любое место, куда нужно). Ну и чтобы правильно спозиционироть, не забудьте родительское блоку прописать position: relative. Это самый простой вариант.
надеюсь, что за 6 лет вы поумнели и узнали про хуки
Можно подробнее как это сделать ?
А в какой css файле можно отредактировать эту кнопку? а то уже все перерыл и ни как не могу найти этот файлик
Можете добавить свой стиль просто, не обязательно искать файл со стилями плагина (который находится в папке с плагином). При просмотре кода элемента посмотрите класс, и добавьте нужные стили в любой CSS файл.
Небольшое дополнение. у меня не сработал перевод плагина.
после того как имена файлов изменил с
yit-ru_RU.po и
yit-ru_RU.mo
на
yith-woocommerce-compare-ru_RU.po и
yith-woocommerce-compare-ru_RU.mo все заработало.
Спасибо, Артур, помогло
Привет! Почему то при попытке удаления товара в окне сравнения ничего не происходит. Нажимаешь на крестик, проходит индикация — товар должен удаляться, а он продолжает на месте стоять. У кого-то была подобная ситуация?
Плагин установил, но кнопка не появилась. Что делать?