Мар
7
4

Вывод вариаций на странице каталога товаров 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
}

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

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

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

Вариации на странице каталога товаров

Понятно, что все оформление кнопок/надписей задается в 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-стили под внешний вид своего макета и все.

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 6, средний балл: 4,67 из 7)
Загрузка...

категория Категории: WooCommerce; Хаки и секреты;
теги Теги: , , , , .

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

  • Павел   07.04.2019

    Первое решение оч простое и крутое, спасибо за него!
    Есть возможность в нем реализовать ajax добавление в корзину? Потому что сейчас просто переходит на карточку товара, выбрасывая из каталога.

  • Tod   08.04.2019

    Павел, в настройках модуля WooCommerce во вкладке товары есть опция «Включить Ajax для кнопки добавления в корзину» — можете попробовать ее… по идее должно работать с текущим решением.

  • Радим   15.04.2019

    Есть большая проблема. Эти функции просто передают в каталог функционал из карточки товара с id атрибута. Поэтому в archive будут повторятся id для атрибутов, что критично для сайта

  • Tod   15.04.2019

    Радим, странно, я тестил первый вариант, и все было неплохо — нужный товар добавлялся в корзину. Не совсем понял в чем там именно критичность проблемы?

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости