Вывод атрибутов товара WooCommerce

Описанные здесь примеры позволяют вывести атрибуты товара WooCommerce в произвольном месте и при необходимости сделать их кликабельными.

Начнем с простого вывода на странице товаров, но важно понять, как вывести их именно там, где этого требует поставленная задача. Будь то, страница товара или страница магазина.

Вывод имени заданного атрибута и его значений на странице товара

/**
* Вывод атрибутов на странице товара
*/
// Функция вывода атрибута
function productShoes() {
global $product;
// Получаем элементы таксономии атрибута shoes
$attribute_names = get_the_terms($product->get_id(), 'pa_shoes');
$attribute_name = "pa_shoes";
if ($attribute_names) {
// Вывод имени атрибута shoes 
echo wc_attribute_label($attribute_name);
// Выборка значения заданного атрибута
foreach ($attribute_names as $attribute_name):
// Вывод значений атрибута shoes
echo $attribute_name->name;
endforeach;
}
}
// Определяем место вывода атрибута
add_action('woocommerce_single_product_summary', 'productShoes', 61);

Этот сниппет выведет под кнопкой «Добавить в корзину» имя атрибута shoes и его значения.

Вывод атрибутов в HTML таблице

Отлично, атрибуты выведены, но выглядит не очень красиво, было бы неплохо заключить их в таблицу.

/**
* Вывод атрибутов в таблице на странице товара
*/
// Открываем таблицу для атрибутов
function startTableAttribute() {
echo '<table><tbody>';
}
add_action('woocommerce_single_product_summary', 'startTableAttribute', 61);
// Функция вывода атрибута
function productShoes() {
global $product;
// Получаем элементы таксономии атрибута shoes
$attribute_names = get_the_terms($product->get_id(), 'pa_shoes');
$attribute_name = "pa_shoes";
if ($attribute_names) {
// Вывод имени атрибута shoes
echo '<tr><td><span>' . wc_attribute_label($attribute_name) . ':</span> </td>';
// Выборка значения заданного атрибута
foreach ($attribute_names as $attribute_name):
// Вывод значений атрибута shoes
echo '<td>' . $attribute_name->name . '</td></tr>';
endforeach;
}
}
// Определяем место вывода атрибута
add_action('woocommerce_single_product_summary', 'productShoes', 62);
// Закрываем таблицу для атрибутов
function endTableAttribute() {
echo '</tbody></table>';
}
add_action('woocommerce_single_product_summary', 'endTableAttribute', 63);

При должном оформлении стилями это будет выглядеть достаточно хорошо.

Вывод кликабельных атрибутов в таблице на странице товара

Теперь, можно добавить функциональности сделав значения атрибутов кликабельными и таким образом посетитель получит возможность переходить на страницу с отфильтрованными по выбранному атрибуту товарами.

/**
* Вывод кликабельных атрибутов в таблице на странице товара
*/
// Открываем таблицу для атрибутов
function startTableAttribute() {
echo '<table><tbody>';
}
add_action('woocommerce_single_product_summary', 'startTableAttribute', 61);
// Функция вывода атрибута
function productShoes() {
global $product;
// Получаем элементы таксономии атрибута shoes
$attribute_names = get_the_terms($product->get_id(), 'pa_shoes');
$attribute_name = "pa_shoes";
if ($attribute_names) {
// Вывод имени атрибута shoes
echo '<tr><td><span>' . wc_attribute_label($attribute_name) . ':</span> </td>';
// Выборка значения заданного атрибута
foreach ($attribute_names as $attribute_name):
// Вывод значений атрибута shoes
echo '<td><a href="' . get_site_url() . '/shop/?pa_shoes=' . $attribute_name->slug . '">' . $attribute_name->name . '</a></td></tr>';
endforeach;
}
}
// Определяем место вывода атрибута
add_action('woocommerce_single_product_summary', 'productShoes', 62);
// Закрываем таблицу для атрибутов
function endTableAttribute() {
echo '</tbody></table>';
}
add_action('woocommerce_single_product_summary', 'endTableAttribute', 63);

Внимание! В этом примере необходимо обратить внимание на следующую строку:

// Вывод значений атрибута shoes
echo '<td><a href="' . get_site_url() . '/shop/?pa_shoes=' . $attribute_name->slug . '">' . $attribute_name->name . '</a></td></tr>';

а именно на значение в url /shop/?pa_shoes=, его необходимо будет заменить на свое.

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

Выбор места для вывода атрибутов

Осталось понять, что нужно знать для вывода атрибутов в произвольном месте. Разумеется, всегда есть возможность вывести функцию с помощью echo шаблоне:

echo productShoes();

Но, правильней будет использовать средства WooCommerce. Смотрим на строку:

// Определяем место вывода атрибута
add_action('woocommerce_single_product_summary', 'productShoes', 62);

Здесь мы имеем:

woocommerce_single_product_summary хук WooCommerce определяющий вывод заголовка, рейтинга, цены, описания, кнопки «Добавить в корзину, мета данных и кнопок для расшаривания в соц. сетях.

productShoes функция выводящая заданные атрибуты.

62 приоритет определяющий расположение вывода.

Хук woocommerce_single_product_summary находится в шаблоне:

/wp-content/plugins/woocommerce/templates/content-single-product.php

или, если вы копировали содержимое папки

/wp-content/plugins/woocommerce/templates/

в свою тему, то здесь:

/wp-content/themes/ВАША_ТЕМА/woocommerce/content-single-product.php

Имеет следующий вид:

/**
* woocommerce_single_product_summary hook.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );

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

Этот же принцип работает и для других хуков. Выбираем нужный хук в шаблонах WooCommerce и задаем вывод там где это нужно. Пример вывода в цикле:

add_action('woocommerce_after_shop_loop_item_title', 'productShoes', 15);

Хук woocommerce_after_shop_loop_item_title находится в шаблоне /wp-content/themes/ВАША_ТЕМА/woocommerce/content-product.php

Так, атрибут будет выведен под заголовком товара.

Надеюсь, суть ясна. Если, остались вопросы по существу, пишите в комментариях и по возможности, постараюсь на них ответить.