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

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

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

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

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

Я думаю, выпадающий список — не лучший способ выбора вариаций на странице магазина WooCommerce. Как минимум, пользователю приходится делать дополнительное действие для просмотра доступных значений атрибутов, плюс не все смогут сходу сообразить куда нужно кликать и т.п. Поэтому решение с чекбоксами (Radio Buttons) выглядит куда более юзерфрендли.

В сети найдете разные хаки по данной задаче. Однако мне больше всего нравится реализация с помощью модуля — внедряется она максимально просто и быстро. Наибольшее доверие из имеющихся плагинов вызывает WC Variations Radio Buttons.

На момент написания статьи последняя версия модуля имела чуть более 3 тысяч загрузок и хорошую оценку. В некоторых шаблонах решение может работать сразу после установки и активации. Если же разработчики внесли свои правки в файл WooCommerce магазина single-product/add-to-cart/variable.php, то вам нужно будет:

1. Создать дочернюю тему (если ее нет).
2. Скопировать файл из директории модуля plugins/wc-variations-radio-buttons/templates/single-product/add-to-cart/variable.php в ваш шаблон сюда — themes/ИМЯ_ТЕМЫ/woocommerce/single-product/add-to-cart/variable.php. Если там уже есть такой файл, замените его.

Как правило, в шаблонах магазинов WooCommerce все реализуется через дочерние темы, поэтому с первым пунктом сложностей возникнуть не должно. В дальнейшем я постараюсь этот момент рассмотреть более детально.

Если у вас имеются вопросы по теме поста как вывести вариации товара в WooCommerce, пишите ниже.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

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

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

Загрузка...

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