Авг

Хаки для вариаций товаров в 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, пишите ниже.

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

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

Загрузка...

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

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

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

Михаил 04.04.2017
Пытался делать Радиобатоны в ценах через хаки, которые нашел в сети. Один из трех сработал, но пришлось повозиться. Похоже, что с модулем оно попроще будет.
Tod 04.04.2017
Михаил, с плагином WC Variations Radio Buttons оно не то что проще, а элементарно. Активировал модуль, скопировал файл шаблона в дочернюю тему, и все заработало.
Елена 24.08.2017
Добрый день, подскажите как можно переработать этот код, чтобы в категории отображалась базовая цена товара, а не наименьшая?
Tod 24.08.2017
Елена, базовая цена — это какая?
Елена 24.08.2017
Извините, некорректно выразилась. Значение цены в категории = значению атрибута по умолчанию, выставленного в вариациях. Скриншот — http://s019.radikal.ru/i605/1708/73/ef0cd5496ea9.jpg
Tod 29.08.2017
Елена, дополнил статью нужным вам хаком. Если вы еще не нашли решение, попробуйте код из заметки.
Елена 30.08.2017
Спасибо!
Роман 01.11.2017
Здравствуйте! Подскажите, пожалуйста, как реализовать подмен функции кнопки «Выбрать опции» для вариативного товара на «Добавить в корзину», чтоб в корзину падал товар с вариацией по-умолчанию со страницы магазина?
Tod 01.11.2017
Роман, так «выбрать опцию» это не кнопка, а просто текст в выпадающем списке вариаций, не совсем понятно зачем его менять (он служит подсказкой для посетителя). Вы можете установить нужный вариант по умолчанию в настройках товара — заходите в пункт «Вариации», там будет поле «Значения форм по умолчанию». Если его задать, то на сайте сразу же будет отображаться данное значение, а сам текст «выбрать опцию» не покажется. Надеюсь, ответил либо я неправильно понял вопрос.
Роман 01.11.2017
Tod, нет, я не об этом, текст поменять не проблема. Я хочу чтоб пользователь имел возможность добавления вариативного товара в корзину со страницы магазина(архива). То есть, на странице с товарами есть простые и вариативные, простые сразу добавляются в корзину с этой страницы, а вот чтоб добавить вариативный надо зайти на страницу товара, и только от туда его добавить. У товаров немного опций, мне нужно чтоб вариативные товары с опцией по-умолчанию так же добавлялись в корзину как и простые со страницы магазина. Уже давно бьюсь над этой проблемой…
Tod 02.11.2017
Роман, понял, такое к сожалению, не встречал. Я бы погулил что-то типа quick order woocommerce для вариаций.
Роман 02.11.2017
Tod, я уже как только не гуглил… =) Где только не писал, в Stackowerflow, в Toster, еще где-то.
Я и сам примерно понимаю, что в шаблонах через хуки надо подменить функции, но конкретно какие я не знаю. Видимо придется глубже изучать Woocommerce.
Tod 02.11.2017
Роман, видимо, задача весьма слишком нестандартная и без изучения тут никак не получится.
Артем 28.12.2017
Роман, хотел бы узнать, нашли ли решение вашей задачи? Я тоже искал, так и не нашел.
Дмитрий 02.01.2018
Здравствуйте! А не подскажете, как можно вывести изображения вариаций?
Tod 02.01.2018
Дмитрий, если вы говорите про то, то фотки должны меняться при смене вариаций товаров, то по идее это базовая фишка модуля и достаточно просто в админке задать для каждого вида продукции свое изображение. На ранних версиях плагина (как лично у меня ана 2.6.х) с этой функциональность могут быть проблем, но скорее всего в 3.х их пофиксили.
Если нужна какая-то другая функциональность, то тут советую поискать соответствующий модуль, возможно, она есть в Booster for WooCommerce.
Анна 21.01.2018
Подскажите, пожалуйста, а как поместить товары без цены в конец
при сортировке по возрастанию цены
Tod 22.01.2018
Анна, у меня был посто про товары нет в наличии в конце списка, возможно получится как-то модифицировать код. К сожалению, готовое решение подсказать не смогу.
Андрей 30.01.2018
Здравствуйте, подскажите как вывести цены списком в категории (каталоге) ?
например
100г — 100руб
200г — 200руб
300г — 300руб
сейчас выводится 100руб-300руб
нашел код который выводит так как надо, но отображается только цена… а там где Вес пусто
там автор пишет что : echo $variation_name[«KEY»] Key — ключ выводимой вариации
подскажите что здесь надо прописать?
Tod 30.01.2018
Андрей, мне сложно сходу подсказать по вашему вопросу. Надо гуглить что за key имелся ввиду.
Андрей 30.01.2018
вот весь код целиком

$args = array(
‘post_type’ => ‘product_variation’,
‘post_status’ => array( ‘private’, ‘publish’ ),
‘numberposts’ => -1,
‘orderby’ => ‘menu_order’,
‘order’ => ‘ASC’,
‘post_parent’ => get_the_ID() // get parent post-ID
);
$variations = get_posts( $args );

foreach ( $variations as $variation ) {

// get variation ID
$variation_ID = $variation->ID;

// get variations meta
$product_variation = new WC_Product_Variation( $variation_ID );

// get variation featured image
$variation_image = $product_variation->get_image();

// get variation price
$variation_price = $product_variation->get_price_html();
//get variation name
$variation_name = $product_variation->get_variation_attributes();
echo «»;
echo $variation_name[«KEY»].»: «;
echo ($variation_price);
echo «»;
}
Tod 31.01.2018
Андрей, возможно это значение slug для атрибута, из которого и создаются варианты. Ничего больше на ум не приходит. Нужно смотреть синтаксис функции get_variation_attributes что она там выводит. Я с такой задачей не сталкивался.
Антон 24.04.2018
Здравствуйте. А как вывести все цены вариативного товара ( как это делает плагин WC Variations Radio Buttons.) в каталоге товаров, что бы под названием товара были такие же чекбоксы с вариантами цен
Tod 24.04.2018
Антон, без дополнительного программирования никак. Я в коде модуля не копался, но вполне вероятно, что там для вставки цен на страницу товара используется какой-то фильтр/хук. Если так, то теоретически, можно попробовать поменять его на тот вариант, который выводит информацию непосредственно в каталоге товаров. Хотя, мне кажется, что это было бы слишком просто и, вряд ли, замена одной строчки кода решит вашу задачу. Вообще подобных реализаций каталога, признаться, еще не встречал.
Артур 28.05.2018
Час добрый!
Воспользовался вашим хаком Отображение цены вариации по умолчанию, всё работает, спасибо.
Однако есть момент. На странице вариативного товара по умолчанию выводится две позиции цены. Одна та что стоит по умолчанию, вторая тоже по умолчанию. Потом когда начинаете выбирать товар по вариациям, одна позиция цены меняется согласно выбранного товара, а вторая всё так же показывает цену по умолчанию, что вносит сумятицу. Пример:

https://pro-artlife.ru/shop/formula-men/

Можно как-то сделать, чтобы выводилась только одна позиция товара (та что внизу), а та что сверху убрать?
Tod 29.05.2018
Артур, нужно смотреть каким образом в том месте шаблона выводится вторая цена и для нее также применить фильтр. Либо вообще убрать лишнюю запись. В любом случае придется вникать в файлы шаблона и заниматься его правкой.
Влад 01.06.2018
В карточке товара при выборе атрибута не появляется цена для этого атрибута, то есть только вверху цена от и до и все и ничего не меняется, но при покупке конечно в корзине товар с нужной ценой но как сделать чтобы в карточке товара она менялась при выборе того или иного атрибута, все правильно настроил а она вообще не появляется.
Tod 01.06.2018
Влад, я бы попробовал работу модуля в «чистой среде» — со стандартной темой и без доп.плагинов и посмотрел как ведет себя цена. Нужно понять что именно вызывает данный глюк, т.к. это поведение ненормально. Возможно какой-то модуль или сниппеты в теме негативно сказываются на данной функции.