Авг

Хаки для вариаций товаров в WooCommerce

Ранее я уже рассматривал создание вариативного товара в WooCommerce, когда пользователю доступен выбор разных значений атрибутов (цвет, вес) для продукции интернет-магазина. Добавить подобную фишку на сайт можно с помощью базовых функций модуля. Тем не менее, в ходе работы иногда возникают нюансы и задачи, когда придется внедрять дополнительные хаки. Именно об этих решениях для WooCommerce вариаций товаров мы сегодня и поговорим.

По аналогии с постом про кнопку добавить в корзину соберу несколько сниппетов в рамках одной заметки. Пока что здесь будет рассмотрено только 5 вопросов, в дальнейшем список пополнится:

Вывод только минимальной стоимости (в разделах).
Показ цены по умолчанию (в разделах).
Глюк с одинаковой стоимостью вариантов.
Вариации без выпадающего списка (с чекбоксами).
Выбор вариантов продукции на странице каталога (другой пост).

Отображение только минимальной цены

Некоторые заказчики хотят реализовать в своем магазина фишку, когда на странице каталога настроен вывод вариаций товара 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, пишите ниже.

Оцените статью:

(голосов - 6, средний балл: 7,00 из 7)

Загрузка...

Категории: WooCommerce; Хаки и секреты;

Теги: WooCommerce товары, вордпресс веб-разработка, интернет-магазин, сниппеты, электронная коммерция.

комментариев 60 к статье “Хаки для вариаций товаров в WooCommerce”

← Ранее 1 2

DiZeR 12.10.2018
День добрый.

В вариативных товарах Woo, есть возможность в каждой карточке товара задавать стартовый вариант отображения.
Пример: Так если товаром является одежда с размерами S, M, L, XL — можно выбрать какой размер будет отображен при первом посещении страницы пользователем.
Если принудительный выбор не делать (в зависимости от плагина или его отсутствия) будет выводиться надпись: «выберете…» «размер…» или что-то подобное.

Вопрос: Есть ли способ\фикс\плагин\решение — которое позволит принудительно выставлять первый вариант (в примере это размер S) — всем товарам без принудительной настройки в каждой карточке товара Woo?

P.S: кроме того, если определенный размер заканчивается на складе\был отключён (закончился размер S). Выбранным размером по умолчанию становиться M.

Версия Woo — последняя.
DiZeR 13.10.2018
Решение нашел сам — плагин — WooCommerce Force Default Variant
Tod 13.10.2018
DiZeR, если честно я думал, что в Woo будет автоматические выводить вариации, но, насколько я помню, пришлось задавать базовое значение вручную. Вероятно, сложность в том, что система не знает какая именно у вас очередность подразумевается — для нее понять какой из «S, M, L» или «красный / белый / синий» должен быть первым, вторым и т.п. не так просто как человеку. Если бы я искал хак для задачи, то гугли бы что-то по типу «вывод/сортировка вариаций по ID или number (номеру в списке). Может когда-то в будущих версиях эту опцию добавят по умолчанию.
Tod 13.10.2018
DiZeR, спасибо за наводку!)
gari 21.11.2018
как вывести только доступные вариации(если выбрать один параметр то остальные не активные где нет вариации с данным фильтром)
Tod 23.11.2018
gari, нужно гуглить, я не встречал такую задачу, не смогу подсказать.
Евг 26.01.2019
Можно как-то сделать, чтобы при выборе разной вариации пользователю отправлялись разные сообщения на емайл? Продаю виртуальные товары и для каждой вариации у меня разный набор высылаемых текстов и ссылок. Как вариант — сделать вместо вариации самостоятельный продукт, но не хотелось бы их плодить лишний раз.
Tod 26.01.2019
Евг, если честно, с такой задачей не сталкивался.. да и вообще с виртуальными товарами пока что не работал. Тут нужно оценивать затраты времени/денег — если нет готовых модулей и придется нанимать программиста, то возможно на первых порах запуска проекта эффективнее сделать самостоятельные продукты и для каждого разные картинки-превью. Я у одного разработчика такое видел (по 3 товара для одной темы) — не скажу, что меня сильно это напрягало как покупателя.
Алена 10.02.2019
Здравствуйте, может кто подскажет в чем проблема, при создании вариативного товара в Вукомерсе на сайте отображается только оптовая цена
Tod 12.02.2019
Алена, не совсем понимаю, что значит «оптовая цена». Вообще формат того, что будет показано на сайте, задается в шаблоне (или маловероятно — в дополнительных модулях). Можете попробовать переключиться на Вордпресс тему по умолчанию и глянуть как в магазине отображается ценник там. Если он выгляди по-другому, нужно разбираться в каком месте своего шаблона меняется данный формат цен.
Денис 16.02.2019
Здравствуйте. Столкнулся с проблемой вариативных товаров — как сделать неактивной вариацию при ее отсутствии в продаже (например зачеркнуть). Товаров много, вариаций много, посетителей много, каждый щелкает по вариациям, расходуются ресурсы сайта на загрузку, и, во-вторых, так было бы удобнее покупателям. Спасибо за помощь!
Tod 16.02.2019
Денис, учитывая то, что я во всех сайтах использую вариации списком, то взял бы за основу решения модуль WC Variations Radio Buttons и в его коде в том месте где формируется список вариаций добавил проверку «если она в наличии, то выводить в списке, иначе — нет». Если используется другой плагин для вывода, то редактировал бы его код. Можно еще погуглить, вдруг есть какой-то фильтр под эту задачу, но я пока что, увы, такого не встречал.
Александр 24.05.2019
Добрый день! Данный код выводит для всех вариативных товаров без товара по умолчанию максимальную цену и только там, где выбран товар по умолчанию выводится его цена. Есть ли какой-то вариант с выводом диапазона цен там, где по умолчанию товар не задан и одной цены где задан? Либо выводить в каталоге цену только вариантов в наличии (диапазон при нескольких вариантах) и не выводить товаров под заказ?
У меня в магазине будут как простые, так и вариативные товары. Считаю более правильным и удобным для покупателя показывать именно диапазон цен для вариативных. Но у некоторых товаров есть еще возможность покупки со склада или под заказ. Естественно, под заказ с длительным ожиданием, без ограничения в количестве единиц и цена на 15-20% ниже чем со склада. Если единственной вариативностью товара оказывается наличие, то диапазон цен в каталоге может вызвать ложные ожидания и негатив. Отказаться от вариаций кроме наличия и выводить максимальную цену не хорошая идея, т.к. у части вариативных товаров вариации обозначают комплектность и некорректно делать карточки товара по комплектности.
Tod 24.05.2019
Александр, к сожалению, я встречал только такую реализацию задачи… помнится приходилось для всех товаров ставить цену по умолчанию. Дополнительные улучшения можно сделать разве что подправив этот код с помощью стороннего программиста или найти решение в онлайне.
Олег 15.08.2019
День добрый!
Извините если не в тему. Ищу вот такой хак акции — «при покупке двух товаров, третий бесплатно». Причем бесплатно самый дешевый.
Не подскажете где найти готовый или если самому написать это дело, то откуда хотя бы начать.
Спасибо!
Tod 17.08.2019
Олег, слишком специфичная функция — тут либо платный модуль, либо заказывать у разработчика.
Павел К 22.09.2019
у меня на товаре лейбл с процентом скидки. и скидка указывается максимальная (из вариаций).
можно ли сделать чтобы она была как цена — из вариации по умолчанию?
спасибо
Tod 23.09.2019
Павел К, можно посмотреть пример с кодом цены по умолчанию и как-то видоизменить для своей задачи, точное решение, увы, не подскажу.
Павел К 26.09.2019
Тод, спасибо.

такой ещё вопрос: мне нужно, чтобы на странице категории кроме цены, была ещё цена до скидки (перечёркнутая). может, у кого-нибудь есть фрагмент кода?
Tod 28.09.2019
Павел К, можно погуглить что-то типа woocommerce get price before discount и др. В одном месте нашел какие-то намеки на решение, мол сначала считываешь объект продукта через:
$_product = wc_get_product( $product_id )
Но надо знать ID. А дальше уже реально выводить разные цены:
$_product->get_regular_price(); $_product->get_sale_price(); $_product->get_price();
Анастасия 11.11.2019
Здравствуйте. С вуу я на Вы) Подскажите, пожалуйста. Для карточки пиццы мне нужно сделать возможность заказчику добавлять ингредиенты из списка. Скажите, смогу ли я использовать вариативные товары или мне нужен плагин? Пока поняла, что вариативные товары предлагают мне или\или. А мне нужно и\и. Спасибо за ответ.
Tod 12.11.2019
Анастасия, вам нужно гуглить плагины что-то типа «Composite Products WooCommerce» или «Bundles Product WooCommerce» или комбинированные (составные) товары — эти решения позволяют делать заказ, включая в него разные компоненты. Пока в блоге статей по этой теме не было.
Андрей 28.02.2020
Добрый день, такой вопрос как реализовать чтобы на странице магазина под карточкой отображалась информация к примеру количество стоимость, или вариация 1 кг сумма при выборе 1.2 кг другая сумма
Tod 03.03.2020
Андрей, готовое решение не подскажу, но тут либо самом кодить с выводом всей этой информации из базы, либо поискать уже готовые сниппеты (а может даже модули имеются). Я с такой задачей не сталкивался, поэтому затрудняюсь ответить.
Артем 09.04.2020
Здравствуйте. Вопрос про вариации. Товар весовой и продается по 50-100-200 гр в виде вариаций.Общий вес к примеру 2кг. Есть возможность чтоб при покупки к примеру 100 гр сайт вычитал из наличия эти граммы и после покупки было в наличии 1.9 кг? Есть настройки запасов каждой вариации но они не зависят друг от друга что не удовлетворяет потребность.
Tod 09.04.2020
Артем, возможно, есть специальный плагин для этого, но я не встречал. Теоретически, можно было сделать 1 товара по 100гр. (без вариаций) и ставить в наличии его 20шт, т.е. 2кг. А если человеку надо 200-500, то он просто берет нужное количество товара. Не уверен, что можно изменить логику работы вариации, чтобы она была связана с общим весом…
Sergey 06.05.2020
Подскажите пожалуйста. Как вывести все доступные цвета по размеру вариации. Например товар с размерами X, L, M и цвета розовый, белый, синий Получается для вариации X получить все цвета, например их два. Для размера L например три цвета
Tod 07.05.2020
Sergey, так в Wocommerce по умолчанию обладает данной функцией. По крайней мере в последнем магазине, который я делал, все работало автоматически. Например, есть 3 размера и 4 цвета, то в итоге максимально у вас может получится 12 вариаций. Если каких-то цветов для опредленного размера нет, то вариация не создается. После этого когда пользователь выберет, допустим, M-размер, на странице отобразатся только те цвета, которые для него доступны. В общем, надо тестировать — вы уже создавали вариации и вас какая-то ошибка или еще не пробовали? Повторюсь, мне кажется, данная фишка есть в модуле магазина изначально.
Ольга 19.06.2020
Как сделать вывод вариации в таком виде? randewoo.ru/product/escentric-molecules-escentric-01
чтобы они были с картинкой, названием и ценой и возможностью купить?
Tod 20.06.2020
Ольга, если нет готового плагина, то лько написанием своей функции. Взять за основу выбор вариации в виде чекбоксов (последний плагин) и подправить его так чтобы информация выводилась в одну строку, причем не только цена, но и все данные по товару — название, фото и т.п.