Как улучшить видимость атрибутов товаров в WooCommerce

Как улучшить видимость атрибутов товаров в WooCommerce

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

Как улучшить видимость атрибутов товаров в WooCommerce

Что вам понадобится

Для выполнения урока вам понадобится:

Установка WordPress

Редактор кода

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

Установленный и активированный WooCommerce

Добавленные товары – я импортировала шаблонные товары из WooCommerce

Один или более атрибутов товаров (встроенный атрибут color с шаблонными данными не работает)

Активированная тема, совместимая с WooCommerce – я использую Storefront

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

Создать пустой плагин, и активировать его

Найти в исходниках WooCommerce фильтр, отвечающий за вставку атрибутов товаров на вкладки в нижней части страницы

Добавить функцию и прикрепить ее к этому фильтру, чтобы удалить вкладку для атрибутов

Найти в исходниках WooCommerce хук, который вытягивает контент для верхней части страницы

Прикрепить к нему свою функцию

Сначала давайте рассмотрим, как атрибуты товаров отображаются по умолчанию. Я создала атрибут size и добавила ему 3 значения: small, medium и large. Вот так этот атрибут отображается в разделе additional information в нижней части страницы товара:

Как улучшить видимость атрибутов товаров в WooCommerce

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

Создание плагина

В папке wp-content/plugins создайте новый файл. Я назову его woocommerce-prominent-product-attributes.php. Откройте его и вставьте следующий код:

<?php
 
/**
 * Plugin Name: WooCommerce Prominent Product Attributes
 * Plugin URI: http://code.tutsplus.com/tutorials/making-woocommerce-product-attributes-more-prominent--cms-25438
 * Description: Make WooCommerce product attributes more prominent by moving them out of the "more information" tab onto the top of the page on single product pages (requires WooCommerce to be activated).
 * Version: 1.0.0
 * Author: Rachel McCollin
 * Author URI: http://rachelmccollin.co.uk
 * License: GPL-3.0+
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 * Domain Path: /lang
 * Text Domain: tutsplus
 */

Сохраните файл и перейдите на экран plugins в панели администратора WordPress. Активируйте плагин.

Исходный код WooCommerce: отображение атрибутов товара

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

Шаблон страницы товара woocommerce/templates/single-product.php

В этом файле есть функция get_template_part(), вызывающая файл content-single-product.php

В этом файле есть экшен woocommerce_after_single_product_summary, к нему прикреплено 3 функции (нам нужна woocommerce_output_product_data_tabs())

Функция woocommerce_output_product_data_tabs() лежит в файле woocommerce/includes/wc-template-functions.php

Эта функция с помощью wc_get_template() получает другую часть шаблона из файла wooocommerce/templates/single-product/tabs/tabs.php

В этом файле (почти добрались, обещаю!) есть переменная $tabs, которая задается через apply_filters( ‘woocommerce_product_tabs’, array() );

Для удаления вкладки атрибутов нам необходимо создать функцию удаления этой вкладки и прикрепить ее к фильтру woocommerce_product_tabs

Фух! Добрались.

Удаление атрибутов товара с вкладок с помощью фильтра

Нам повезло: в документации WooCommerce есть руководство по удалению вкладок с помощью этого фильтра. Это упростит нам жизнь. Вставьте этот код в файл плагина:

/**
 * Removes the "Additional Information" tab that displays the product attributes.
 * 
 * @param array $tabs WooCommerce tabs to display.
 * 
 * @return array WooCommerce tabs to display, minus "Additional Information".
 */
function tutsplus_remove_product_attributes_tab( $tabs ) {
 
 unset( $tabs['additional_information'] );
 
 return $tabs;
 
}
 
add_filter( 'woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100 );

В функции есть объект $tabs – с этой переменной мы и будем работать. Она удаляет вкладку ‘additional information’ из массива значений, хранящихся в переменной $tabs. Обратите внимание, я использовал высокий приоритет 100 при подключении своей функции, чтобы она запускалась после функций, добавляющих вкладки. Сохраните файл и обновите страницу товара:

Как улучшить видимость атрибутов товаров в WooCommerce

Вкладка удалена. Теперь нужно вернуть атрибуты товара в верхнюю часть страницы.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

Поиск места в коде для добавления атрибутов

И опять нам нужно найти место в коде, куда можно вставить функцию отображения атрибутов товара. Другими словами, нам нужно найти экшен хук.

Возвращаемся в файл content-single-product.php. В нем есть хук woocommerce_single_product_summary, который задействован в семи функциях, каждая из которых выводит на экран разные части информации о товаре:

Заголовок

Рейтинг

Цена

Выдержка (краткое описание)

Кнопка Добавить в корзину

Метаданные

Ссылки для социальных сетей

Я хочу добавить атрибуты в секцию с метаданными. Давайте найдем функцию, отвечающую за это. Это функция wc_template_functions.php. С помощью wc_get_template() они подключает другой файл woocommerce/templates/single/product/meta.php.

В файле meta.php есть участок кода, отображающий метаданные товара. Она находится перед хуком woocommerce_product_meta_start и после хука woocommerce_product_meta_end. Один из этих хуков можно задействовать для отображения атрибутов товара. Давайте возьмем последний, так атрибуты будут показываться после категорий и тегов.

Написание функции вывода атрибутов товара

Дублирование кода WooCommerce

Для вывода списка терминов таксономии нашего товара можно использовать WooCommerce функцию list_attributes(). Она лежит в файле templates/single/product/tabs/additional-information.php. Вставьте этот код в файле плагина:

/**
 * Displays product attributes in the top right of the single product page.
 * 
 * @param $product
 */
function tutsplus_list_attributes( $product ) {
 
 global $product;
 
 $product->get_attributes();
 
}
 
add_action( 'woocommerce_product_meta_end', 'tutsplus_list_attributes' );

Заметьте, вам не нужно использовать приоритет, так как в WooCommerce к этому экшен хуку не прикреплено других функций. Обновите страницу товара:

Как улучшить видимость атрибутов товаров в WooCommerce

Атрибуты отображаются. Они размещены в интерфейсе, похожем на вкладку в теме Storefront, так как было задано по умолчанию на вкладке additional information. Выводимый HTML использует таблицу стандартного макета.

Другой подход без таблицы

Таблицы – не лучший способ. Лучше чтобы было 2 списка: список атрибутов товара и список категорий. Давайте переделаем.

WooCommerce хранит атрибуты в виде пользовательских таксономий. Сокращение для каждого значения атрибута задается с префиксом pa_, когда атрибут хранится в базе данных.

Однако эти таксономии не хранятся в таблицах wp_term_taxonomy и wp_terms, как при регистрации обычных пользовательских таксономий в WordPress. Вместо этого WooCommerce создает таблицы для атрибутов, т.е. данные хранятся по-другому. Таким образом, нам придется придумать более сложный способ получения лейблов для каждой таксономии при выводе списка.

Удалите 2 строки в функции tutsplus_list_attributes(). Замените их на этот код:

global $product;
global $post;
 
$attributes = $product->get_attributes();
 
if ( ! $attributes ) {
 
 return;
 
}
 
foreach ( $attributes as $attribute ) {
 
 // Get the taxonomy.
 $terms = wp_get_post_terms( $product->id, $attribute[ 'name' ], 'all' );
 $taxonomy = $terms[ 0 ]->taxonomy;
 
 // Get the taxonomy object.
 $taxonomy_object = get_taxonomy( $taxonomy );
 
 // Get the attribute label.
 $attribute_label = $taxonomy_object->labels->name;
 
 // Display the label followed by a clickable list of terms.
 echo get_the_term_list( $post->ID, $attribute[ 'name' ] , '<div class="attributes">' . $attribute_label . ': ' , ', ', '</div>' );
 
}

Что делает код:

Создается глобальная переменная $product (объект нашей функции)

С помощью $product->get_attributes() вытягиваются все атрибуты товара

Если атрибутов нет, ничего не происходит

Если атрибуты есть, открывается цикл foreach

Чтобы получить лейбл, используются функции wp_get_post_terms() и get_taxonomy(). Так вытягивается массив данных таксономии для этого поста

Затем на экран выводится имя (или label) таксономии (или атрибута), а после список ссылок на архивы для каждого значения с помощью get_the_term_list()

Атрибуты отображаются списком:

Как улучшить видимость атрибутов товаров в WooCommerce

Намного лучше!

Заключение

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

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

Автор: Rachel McCollin

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

WooCommerce: быстрый старт, первые результаты

Создайте свой первый интернет-магазин на WooCommerce с полного нуля!

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree