Хаки для вариаций товаров в WooCommerce
Ранее я уже рассматривал создание вариативного товара в WooCommerce, когда пользователю доступен выбор разных значений атрибутов (цвет, вес) для продукции интернет-магазина. Добавить подобную фишку на сайт можно с помощью базовых функций модуля. Тем не менее, в ходе работы иногда возникают нюансы и задачи, когда придется внедрять дополнительные хаки. Именно об этих решениях для WooCommerce вариаций товаров мы сегодня и поговорим.
По аналогии с постом про кнопку добавить в корзину соберу несколько сниппетов в рамках одной заметки. Пока что здесь будет рассмотрено только 4 вопроса, в дальнейшем список пополнится:
- Вывод только минимальной стоимости (в разделах).
- Показ цены по умолчанию (в разделах).
- Глюк с одинаковой стоимостью вариантов.
- Вариации без выпадающего списка (с чекбоксами).
Отображение только минимальной цены
Некоторые заказчики хотят реализовать в своем магазина фишку, когда на странице каталога настроен вывод вариаций товара WooCommerce только с минимальной ценой. Во-первых, это маркетинговый ход дабы показывать наименьшую стоимость. Во-вторых, сможете сэкономить немного места в шаблоне, отображая лишь одну цену.
Для реализации задачи добавляете в файл функций темы function.php (либо в custom-function.php) следующий код:
add_filter('woocommerce_variable_price_html', 'mycustom_variation_price', 10, 2); add_filter('woocommerce_variable_sale_price_html', 'mycustom_variation_price', 10, 2 ); function mycustom_variation_price( $price, $product ) { if ( ! is_admin() && ((is_shop() || is_product_category() || is_page()))) { $price = ''; $price .= woocommerce_price($product->get_price()); } return $price; } |
Здесь вы с помощью хуков заменяете стандартные функции отображения вариаций товара WooCommerce на свою. Также добавляем условие показа только в каталоге (главная, архив, отдельные страницы — is_shop, is_product_category, is_page).
К сожалению, у метода есть ряд «особенностей», на которые следует обратить внимание. Сам сниппет работает корректно, но он вносит определенную «неточность» при восприятии информации на сайте. Например:
- У вас есть вариативный товар стоимостью $10-$30, и посетитель выбирает в фильтрах значение «от $20 и выше». Данная позиция будет отображена на странице в любом случае, но вместо диапазона в цене позывается минимальное знание — $10.
- Может перестать работать «перечеркивание» для скидок на странице товара. Это не точно, но в каком-то из случаев акционная стоимость не хотела отображаться. Чуть позже добавил в условие is_single, и все заработало нормально. Если глюк останется, то теоретически можно дополнительно реализовать правильную обработку этого случая и подставить функцию в хук woocommerce_variable_sale_price_html. Если не использовать is_single (а оставить как в примере выше), то в блоке похожей продукции увидите диапазон цен, а не минимальную.
- В админке, кстати, хак тоже срабатывает, что немного неудобно для редакторов — поэтому добавляем !is_admin.
Все это, в принципе, логично, т.к. вы вносите коррективы в логику работы магазина. Однако некоторые заказчики готовы закрыть глаза на такие нюансы ради решения задачи. Часть «недостатков» можно подправить за счет дополнительного кода.
Отображение цены вариации по умолчанию
Есть еще один способ вывода одной цены вместо диапазона на страницах категорий. Вы можете показывать для вариаций WooCommerce стоимость товара, выбранного по умолчанию. Соответствующая настройка задается в закладке «Вариации»:
Я, в принципе, стараюсь всегда указывать этот параметр дабы не возникало никаких «случайных несостыковок» на странице описания продукции магазина. Чтобы выводить данное значение в разделах добавьте в function.php следующие строки:
add_filter('woocommerce_variable_price_html', 'custom_variation_price_default', 10, 2); add_filter('woocommerce_variable_sale_price_html', 'custom_variation_price_default', 10, 2 ); function custom_variation_price_default( $price, $product ) { foreach($product->get_available_variations() as $pav){ $def=true; foreach($product->get_variation_default_attributes() as $defkey=>$defval){ if($pav['attributes']['attribute_'.$defkey]!=$defval){ $def=false; } } if($def){ $price = $pav['display_price']; } } return woocommerce_price($price); } |
Решение найдено тут. По сравнению с предыдущим методом здесь чуть больше кода, но, к сожалению, «неточности» возникают такие же: с фильтрами, отображением товара «не в наличии», показом стоимости в админке. Единственное преимущество, делающее такой подход гибче — возможность выбора вручную какую цену выводить.
Вариации товара с одинаковыми ценами
Не знаю как в новых Woocommerce 3.x, но в предыдущей ветке точно закрался один странный глюк. Если у вас имеется товар с несколькими вариациями, для которых установлена одинаковая стоимость, то на странице с его описанием поле цены будет скрыто.
Чтобы это исправить в файл функций добавляем:
add_filter('woocommerce_available_variation', function ($value, $object = null, $variation = null) { if ($value['price_html'] == '') { $value['price_html'] = '<span class="price">' . $variation->get_price_html() . '</span>'; } return $value; }, 10, 3); |
Повторюсь, у меня этот косяк появляется в Woocommerce 2.6.x, возможно, в следующей версии он уже исправлен. Дополнительно советую глянуть плагин скидок и оптовых цен в WooCommerce.
Вариации товара в WooCommerce без выпадающего списка
Я думаю, выпадающий список — не лучший способ выбора вариаций на странице магазина WooCommerce. Как минимум, пользователю приходится делать дополнительное действие для просмотра доступных значений атрибутов, плюс не все смогут сходу сообразить куда нужно кликать и т.п. Поэтому решение с чекбоксами (Radio Buttons) выглядит куда более юзерфрендли.
В сети найдете разные хаки по данной задаче. Однако мне больше всего нравится реализация с помощью модуля — внедряется она максимально просто и быстро. Наибольшее доверие из имеющихся плагинов вызывает WC Variations Radio Buttons.
На момент написания статьи последняя версия модуля имела чуть более 3 тысяч загрузок и хорошую оценку. В некоторых шаблонах решение может работать сразу после установки и активации. Если же разработчики внесли свои правки в файл WooCommerce магазина single-product/add-to-cart/variable.php, то вам нужно будет:
- Создать дочернюю тему (если ее нет).
- Скопировать файл из директории модуля plugins/wc-variations-radio-buttons/templates/single-product/add-to-cart/variable.php в ваш шаблон сюда — themes/ИМЯ_ТЕМЫ/woocommerce/single-product/add-to-cart/variable.php. Если там уже есть такой файл, замените его.
Как правило, в шаблонах магазинов WooCommerce все реализуется через дочерние темы, поэтому с первым пунктом сложностей возникнуть не должно. В дальнейшем я постараюсь этот момент рассмотреть более детально.
Если у вас имеются вопросы по теме поста как вывести вариации товара в WooCommerce, пишите ниже.
комментария 42 к статье “Хаки для вариаций товаров в WooCommerce”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Media Cleaner — для удаления неиспользуемых изображений WordPress
- VpsUP.ru — рейтинг VPS/VDS хостеров и помощь с выбором сервера
- OptiPic – оптимизация изображений для сайтов на WordPress и не только
- Как убрать Google Maps API на сайте с WordPress?
- Finteza Analytics — сервис для комплексного анализа трафика + бесплатный плагин
- WPShop — 4 функциональных премиум темы на любой вкус + плагин Clearfy Pro
- Duplicator — лучший плагин переноса WordPress, алгоритм клонирования сайта
- WooCommerce (30)
- Безопасность (10)
- Видео (6)
- Виджеты (24)
- Возможности (124)
- Вопрос-ответ (2)
- Начинающим (44)
- Новости (42)
- Оптимизация (20)
- Плагины (216)
- Сервисы (73)
- Хаки и секреты (79)
- Шаблоны (42)

- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- WordpressPlugins.ru
- Majordomo - выгодные цены на виртуальный хостинг
- Игра в казино Вулкан — сплошное удовольствие (обзор + турниры)
- Работаем с удаленным сотрудником
- Заголовки, как способ привлечения внимания
- Играем в Автоматы 777 — разновидности слотов и приятные бонусы
- Замена раковины в ванной комнате или на кухне
- Как быстро найти работу: 9 советов соискателю
- Продвижение в Инстаграм: как подготовить свой аккаунт к массфолловингу
День добрый.
В вариативных товарах Woo, есть возможность в каждой карточке товара задавать стартовый вариант отображения.
Пример: Так если товаром является одежда с размерами S, M, L, XL — можно выбрать какой размер будет отображен при первом посещении страницы пользователем.
Если принудительный выбор не делать (в зависимости от плагина или его отсутствия) будет выводиться надпись: «выберете…» «размер…» или что-то подобное.
Вопрос: Есть ли способ\фикс\плагин\решение — которое позволит принудительно выставлять первый вариант (в примере это размер S) — всем товарам без принудительной настройки в каждой карточке товара Woo?
P.S: кроме того, если определенный размер заканчивается на складе\был отключён (закончился размер S). Выбранным размером по умолчанию становиться M.
Версия Woo — последняя.
Решение нашел сам — плагин — WooCommerce Force Default Variant
DiZeR, если честно я думал, что в Woo будет автоматические выводить вариации, но, насколько я помню, пришлось задавать базовое значение вручную. Вероятно, сложность в том, что система не знает какая именно у вас очередность подразумевается — для нее понять какой из «S, M, L» или «красный / белый / синий» должен быть первым, вторым и т.п. не так просто как человеку. Если бы я искал хак для задачи, то гугли бы что-то по типу «вывод/сортировка вариаций по ID или number (номеру в списке). Может когда-то в будущих версиях эту опцию добавят по умолчанию.
DiZeR, спасибо за наводку!)
как вывести только доступные вариации(если выбрать один параметр то остальные не активные где нет вариации с данным фильтром)
gari, нужно гуглить, я не встречал такую задачу, не смогу подсказать.
Можно как-то сделать, чтобы при выборе разной вариации пользователю отправлялись разные сообщения на емайл? Продаю виртуальные товары и для каждой вариации у меня разный набор высылаемых текстов и ссылок. Как вариант — сделать вместо вариации самостоятельный продукт, но не хотелось бы их плодить лишний раз.
Евг, если честно, с такой задачей не сталкивался.. да и вообще с виртуальными товарами пока что не работал. Тут нужно оценивать затраты времени/денег — если нет готовых модулей и придется нанимать программиста, то возможно на первых порах запуска проекта эффективнее сделать самостоятельные продукты и для каждого разные картинки-превью. Я у одного разработчика такое видел (по 3 товара для одной темы) — не скажу, что меня сильно это напрягало как покупателя.
Здравствуйте, может кто подскажет в чем проблема, при создании вариативного товара в Вукомерсе на сайте отображается только оптовая цена
Алена, не совсем понимаю, что значит «оптовая цена». Вообще формат того, что будет показано на сайте, задается в шаблоне (или маловероятно — в дополнительных модулях). Можете попробовать переключиться на Вордпресс тему по умолчанию и глянуть как в магазине отображается ценник там. Если он выгляди по-другому, нужно разбираться в каком месте своего шаблона меняется данный формат цен.
Здравствуйте. Столкнулся с проблемой вариативных товаров — как сделать неактивной вариацию при ее отсутствии в продаже (например зачеркнуть). Товаров много, вариаций много, посетителей много, каждый щелкает по вариациям, расходуются ресурсы сайта на загрузку, и, во-вторых, так было бы удобнее покупателям. Спасибо за помощь!
Денис, учитывая то, что я во всех сайтах использую вариации списком, то взял бы за основу решения модуль WC Variations Radio Buttons и в его коде в том месте где формируется список вариаций добавил проверку «если она в наличии, то выводить в списке, иначе — нет». Если используется другой плагин для вывода, то редактировал бы его код. Можно еще погуглить, вдруг есть какой-то фильтр под эту задачу, но я пока что, увы, такого не встречал.