От автора: атрибуты товара WooCommerce – очень полезная функция, однако по умолчанию они скрыты в нижней части страницы в разделе additional information. В некоторых темах они не видны, пока пользователь не нажмет на вкладку, а значит, множество пользователей не видят их. Иногда бывает полезно размещать атрибуты в верхней части страницы конкретного товара вместе с категориями. В этом уроке я покажу, как передвинуть атрибуты товаров с вкладки additional information в верхнюю часть страницы.
Что вам понадобится
Для выполнения урока вам понадобится:
Установка WordPress
Редактор кода
Установленный и активированный WooCommerce
Добавленные товары – я импортировала шаблонные товары из WooCommerce
Один или более атрибутов товаров (встроенный атрибут color с шаблонными данными не работает)
Активированная тема, совместимая с WooCommerce – я использую Storefront
Чтобы разместить атрибуты ближе к верхней части страницы товара, нам необходимо выполнить следующие шаги:
Создать пустой плагин, и активировать его
Найти в исходниках WooCommerce фильтр, отвечающий за вставку атрибутов товаров на вкладки в нижней части страницы
Добавить функцию и прикрепить ее к этому фильтру, чтобы удалить вкладку для атрибутов
Найти в исходниках WooCommerce хук, который вытягивает контент для верхней части страницы
Прикрепить к нему свою функцию
Сначала давайте рассмотрим, как атрибуты товаров отображаются по умолчанию. Я создала атрибут size и добавила ему 3 значения: small, medium и large. Вот так этот атрибут отображается в разделе additional information в нижней части страницы товара:
Нам нужно передвинуть эти атрибуты из нижней части экрана в верхний левый угол под описание товара.
Создание плагина
В папке wp-content/plugins создайте новый файл. Я назову его woocommerce-prominent-product-attributes.php. Откройте его и вставьте следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php /** * Plugin Name: WooCommerce Prominent Product Attributes * Plugin URI: //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: //rachelmccollin.co.uk * License: GPL-3.0+ * License URI: //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 есть руководство по удалению вкладок с помощью этого фильтра. Это упростит нам жизнь. Вставьте этот код в файл плагина:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * 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 при подключении своей функции, чтобы она запускалась после функций, добавляющих вкладки. Сохраните файл и обновите страницу товара:
Вкладка удалена. Теперь нужно вернуть атрибуты товара в верхнюю часть страницы.
Поиск места в коде для добавления атрибутов
И опять нам нужно найти место в коде, куда можно вставить функцию отображения атрибутов товара. Другими словами, нам нужно найти экшен хук.
Возвращаемся в файл 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. Вставьте этот код в файле плагина:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * 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 к этому экшен хуку не прикреплено других функций. Обновите страницу товара:
Атрибуты отображаются. Они размещены в интерфейсе, похожем на вкладку в теме Storefront, так как было задано по умолчанию на вкладке additional information. Выводимый HTML использует таблицу стандартного макета.
Другой подход без таблицы
Таблицы – не лучший способ. Лучше чтобы было 2 списка: список атрибутов товара и список категорий. Давайте переделаем.
WooCommerce хранит атрибуты в виде пользовательских таксономий. Сокращение для каждого значения атрибута задается с префиксом pa_, когда атрибут хранится в базе данных.
Однако эти таксономии не хранятся в таблицах wp_term_taxonomy и wp_terms, как при регистрации обычных пользовательских таксономий в WordPress. Вместо этого WooCommerce создает таблицы для атрибутов, т.е. данные хранятся по-другому. Таким образом, нам придется придумать более сложный способ получения лейблов для каждой таксономии при выводе списка.
Удалите 2 строки в функции tutsplus_list_attributes(). Замените их на этот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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 и найти шаблонные файлы, хуки и функции, отвечающие за отображение атрибутов товара.
Найдя фильтр, отвечающий за вывод вкладок на экран, мы смогли удалить вкладку additional information вместе с атрибутами. Далее с помощью новой функции, прикрепленной к хуку, расположенному выше на странице, мы вывели атрибуты в нужном месте.
Автор: Rachel McCollin
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (3)