Мар

Вывод вариаций на странице каталога товаров WooCommerce (в категориях/тегах)

В посте про создание вариативного товара спрашивали как сделать отображение доступных опций на архивной странице каталога (категории/теге). В принципе, фишка интересная, может сэкономить время пользователю, когда у вас на сайте не особо много позиций и все они с возможностью выбора (например, сфера доставки еды/пиццы). По теме я нашел парочку решений. Изначально хотел добавить их в пост с хаками для вариаций, дабы не плодить лишние записи, но в сниппетах слишком много кода, поэтому они тут.

Если будете гуглить данный вопрос, то ищите что-то вроде «woocommerce show variations shop page» (или заменив последние 2 слова на «in archive»). Вполне возможно, что спустя некоторое время появится доступное и работающее решение в виде плагина. Хотя, если быть точным, они уже есть — несколько модулей «всплывали» в Гугле, но, к сожалению, только платные.

Хак №1 от James Kemp

Из всех найденных хаков 100% рабочим оказался только один. Автор выпустил его в 2017 году, однако недавно информация была обновлена! Это значит, что он следит за апдейтами движка и вносит правки в сниппет. Кстати, параллельно Джеймс создал другой плагин под данную задачу, но что-то демка мне лично не совсем зашла.

Вот как в идеале должен работать выбор вариации:

Код ниже добавляете в файл functions.php темы или используйте плагин Code Snippets.

/**
 * Replace add to cart button in the loop.
 */
function iconic_change_loop_add_to_cart() {
	remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
	add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );
}
 
add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );
 
/**
 * Use single add to cart button for variable products.
 */
function iconic_template_loop_add_to_cart() {
	global $product;
 
	if ( ! $product->is_type( 'variable' ) ) {
		woocommerce_template_loop_add_to_cart();
		return;
	}
 
	remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
	add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );
 
	woocommerce_template_single_add_to_cart();
}
 
/**
 * Customise variable add to cart button for loop.
 *
 * Remove qty selector and simplify.
 */
function iconic_loop_variation_add_to_cart_button() {
	global $product;
 
	?>
	<div class="woocommerce-variation-add-to-cart variations_button">
		<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
		<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="variation_id" class="variation_id" value="0" />
	</div>
	<?php
}

В оригинальной статье есть пояснение каждого шага сниппета (они отделены закомментированными строками). Если вкратце, то суть следующая:

Сначала вы меняете стандартную кнопку добавить в корзину на свою функцию. Это применится и к обычной продукции, но позже мы все исправим.
Далее проверяем если объект не вариативный, то подгружаем стандартную функцию, в противном случае будем использовать свой код.
На финальном этапе создаем свой вид блока покупки, где будет поле выбора доступных вариантов.

Вот что у меня в итоге вышло на одном из сайтов:

Понятно, что все оформление кнопок/надписей задается в CSS стилях вашего текущего шаблона. Автор решения предлагает использовать дополнительное оформление, которое следует добавить в настройки макета или style.css.

.products .variations {
    border: 1px solid #eee;
    position: relative;
    margin-bottom: 50px;
}
 
.products .variations td {
    display: block;
    padding: 10px 20px 18px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
 
.products .variations td:first-child {
    padding-bottom: 0;
    border: none;
}
 
.products .variations td:last-child {
    padding-top: 5px;
}
 
.products .variations tr:last-child td {
    border: none;
}
 
.products .variations td label {
    font-weight: 600;
}
 
.products .variations td select {
    width: 100%;
}
 
.products .variations .reset_variations {
    margin: 10px 0 0;
    position: absolute;
    bottom: -35px;
    left: 0;
    right: 0;
}

В моем случае это мало что изменило — по крайней мере вы увидите для каких элементов следует прописать свои стили.

Важные нюансы (недостатки?) метода:

Джеймс говорит, что пользователи не поймут, что перед ними вариативная продукция, с чем я не согласен (в крайнем случае можно дописать свой текст в блоке товара).
Он может повлиять на внешний вид макета. Ну, это, в принципе, логично — более того вам придется подправить оформление элемента и привести его к виду всего сайта.
Если вы используете какие-то дополнительные Woocommerce модули и сниппеты, то следует проверить их совместимость между собой после внедрения.
Нет выбора количества товаров.

Хак №2 от Rémi Corson

Решение, описанное тут, позволяет исправить последний недостаток предыдущего. После его внедрения страница каталога должна выглядеть приблизительно так:

Код для вставки в functions.php:

К сожалению, интеграция прошла не так гладко, как в прошлом случае. После внедрения пропала кнопка добавления в корзину, хотя все остальное есть — и вариации, и количество. Поэтому метод требует доработки!

Итого. Что же делать? В идеале вам нужно взять первый хак и дополнить его недостающим куском кода из второго, где реализуется задание количества товаров для покупки. После этого подправьте CSS-стили под внешний вид своего макета и все.

Если честно, я пока что не сталкивался с данной задачей лично, выполнил что-то вроде предварительного изучения вопроса… поэтому общего кода нет. Кстати, если знаете модули по теме — присылайте названия.

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

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

Загрузка...

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

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

комментариев 19 к статье “Вывод вариаций на странице каталога товаров WooCommerce (в категориях/тегах)”

Павел 07.04.2019
Первое решение оч простое и крутое, спасибо за него!
Есть возможность в нем реализовать ajax добавление в корзину? Потому что сейчас просто переходит на карточку товара, выбрасывая из каталога.
Tod 08.04.2019
Павел, в настройках модуля WooCommerce во вкладке товары есть опция «Включить Ajax для кнопки добавления в корзину» — можете попробовать ее… по идее должно работать с текущим решением.
Радим 15.04.2019
Есть большая проблема. Эти функции просто передают в каталог функционал из карточки товара с id атрибута. Поэтому в archive будут повторятся id для атрибутов, что критично для сайта
Tod 15.04.2019
Радим, странно, я тестил первый вариант, и все было неплохо — нужный товар добавлялся в корзину. Не совсем понял в чем там именно критичность проблемы?
Грига 06.07.2019
Как отобразить картинки(основные) всех вариации на странице каталога (списка товаров), инфы вообще нигде нет
Tod 07.07.2019
Грига, в базовой комплектации такой функции нет, нужно искать какой-то дополнительный плагин.
Доброжелатель 11.08.2019
Привет всем, крч тема такая
Я использовал первый вариант, и мне надо было сделать добавление в корзину без перехода на страницу товара, убил двое суток на это, что бы больше никто не тратил время как — оставляю код взятый из комментариев https://iconicwp.com/blog/show-variations-shop-page-woocommerce/
function iconic_add_to_cart_form_action( $redirect ) { if ( ! is_archive() ) { return $redirect; }
return ''; } add_filter( 'woocommerce_add_to_cart_form_action', 'iconic_add_to_cart_form_action' );
Автору спасибо)
Tod 12.08.2019
Доброжелатель, спасибо за дополнение статьи.
Serii366 25.11.2019
Добрый день.
Я создал 3 атрибута для вариативного товара: цвет, тип(взрослый, десткий) и размер.
Для размера я создал несколько единиц(xl, sm, l) и еще один размер ‘персональные мерки’
Так вот, я хочу, чтобы когда покупатель выбрал этот селект, то появились бы 20 инпутов для размеров.

Я уже реализовал с помощью javascript, но, как быть с данными? Куда сохранять? Может есть готовое решение в виде плагина?

Заранее благодарен.
Tod 26.11.2019
Serii366, к сожалению, с такой задачей не сталкивался, сложно сказать… но если гуглить woocommerce input field product page, то видно, что кое-какие решения есть (причем даже в виде плагинов).
Артур 07.02.2020
Привет! У меня такой вопрос можно ли сделать так что бы ВууКоммерс брал вариации из уже существующией таблицы и не надо было постоянно самому вбивать расчеты в каждую из них.

Допустим Цена 1 кг. колбасы в таблице за 1 шт. указана как 1000 р.
Если человек допустим выбирает вариацию что ему нужно 500 гр. то систему сама делит ее на 2 части и выдает соответствующую сумму ?

Ну, это же очевидно что многие товары конфигурируются исходя из составных частей — в целом такая автоматизация вариаций (сложение, деление, вычетание и т.д.)
Tod 10.02.2020
Артур, мне кажется, так сделать не получится.. чтобы считалось автоматически клиент должен просто заказывать 2 колбасы по 500гр. и получит 1кг, то есть это не вопрос вариации, а количество товара (объем заказа). Если же делать все через варианты компоновки 500гр, 1кг, 2кг, то тут каждой записи придется прописывать цену.. система не может предугадать какие именно вараинты заказа у вас будут. Я не видел решений под вашу задачу и не думаю, что они есть.
А вот если речь идет об импорте информации из таблицы, например excel, то тут должны быть какие-то плагины.. придется заполнять excel-таблицу, а потом импортировать все на сайт.
Доброжелатель 10.02.2020
Здравствуйте, Артур
Данный функционал можно сделать, например через js изменять какое-то доп поле которое потом идёт в заказы
Но это геморрой и непрактичность
Лучше сделать вариации 100 г, 200 г, 500г … И добавлять отдельно каждому товару , выставляя ценник
Данила 06.05.2020
Подскажите, как настроить стили для вариаций? И у меня не получается соединить два кода чтобы были и вариации и поле выбора кол-ва
Tod 07.05.2020
Данила, к сожалению, я эти два кода не соединял, поэтому не подскажу, что должно получится в итоге. Статья — что-то вроде «заметки для себя», когда в следующий раз будет такая задача, то начну копать код глубже. Кстати, с момента публикации прошло около года, возможно, за это время появились сниппеты/модули, решающие данную задачу.
Андрей 09.11.2020
Добрый вечер. ) Сделал вывод вариаций на архив товаров. Да, клиенту удобней. Вопрос поставил в левый сайдбар фильтр, по атрибутам., конкретно по размерам. Как привязать фильтр, подскажите плиз ecoson.by
Tod 10.11.2020
Андрей, не совсем понял куда и что привязать. Единственное, насколько я помню, по вариациям и фильтрам раньше были какие-то нюансы что-то типа фильтр считывал информацию по товару полностью и не отсекал лишние вариации, а просто показывал товар, если у него есть вариации, которые попадают под выбранный фильтр.
Дмитрий 21.10.2021
Подскажите как сделать чтобы при выборе опции менялась и цена?
Tod 26.10.2021
Дмитрий, если приведенный коды не срабатывают, то нужно поискать какие-то другие или попытаться подправить текущие. Судя по первому видео в статье, цена будет отображаться диапазоном, а ниже показывается цены выбранной вариации. Можно как-то сделать событие, чтобы верхняя цена скрывалась при выборке.