Как изменить шаблон страницы товара woocommerce

От автора: при планировании WooCommerce-магазина вам придется ответить на много вопросов, которые серьезно повлияют на будущий успех сайта. Настройка магазина — серьезный вызов. После завершения этого процесса уже сложно внести какие-то правки в настройки и дизайн. Для кастомизации страниц товаров в Woocommerce вам потребуется рассмотреть доступные варианты, о которых я и расскажу в этом посте.

И вот, магазин создан. Следующий вызов — беспорядок на страницах товаров. На странице WooCommerce Single Product есть множество элементов, которые не напрямую могут помочь с кастомизацией дизайна и настройкой магазина. Два главных виновника беспорядка — категории товаров и звезды рейтинга. Не каждому магазину нужны эти элементы на странице Single Product. Так же и другие элементы необходимо передвинуть, чтобы они вписывались в кастомный дизайн магазина.

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

Кастомизируйте страницы товаров в WooCommerce

Первое, что вы должны хотеть — это сменить шаблон отображения товаров. Для этого необходимо загрузить файл single-product.php, который контролирует файлы шаблонов, которые, в свою очередь, отображают информацию о товарах на frontend’е.

Самый распространенный совет при настройке шаблонных страниц родительских тем и плагинов — делайте копии шаблонов темы. Все изменения делайте с копией. Такой подход гарантирует вам сохранность ваших изменений в случае обновления тем и плагинов.

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

С помощью single-product.php я буду вызывать файлы шаблона, которые отвечают за информацию о товаре и формат ее отображения на странице. Файл content-single-product.php — шаблон товара. Именно этот файл необходимо редактировать, чтобы изменить информацию и стили страницы товаров.

А теперь откройте single_template и вставьте следующий код, чтобы изменить шаблон страницы Single Product:

Создайте кастомные товары/категории в WooCommerce

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

Настройте файлы шаблонов в WooCommerce

При работе с файлом content-single-product.php необходимо помнить следующее: любые добавленные товары и категории должны вставляться в конец файла. Еще одна хорошая практика — назовите файл так, чтобы он выделялся и был легко узнаваем. Например, если у вас есть категория «Books», назовите файл content-single-product-books.php. Такая небольшая правка гарантирует, что вы моментально определите файл для определенной категории. Этот файл отвечает за все изменения, которые необходимы, чтобы страницы товаров и категорий выглядели ровно так, как вы хотели (добавление или удаление сайдбара, изменение в цикле и т.д.).

Далее необходимо изменить файл single-product.php. В файле есть цикл, который отвечает за то, какие шаблоны необходимо загрузить для отображения товаров.

Я добавлю условие if, которое будет проверять принадлежность товара к определенной категории, после чего загружать связанный single-product.php в кастомный шаблон. Этот файл можно не переименовывать. Перед вставкой кода найдите в этом файле следующую строку:

Ее необходимо заменить на следующий код:

В этом коде найдите YOURCATEGORY и замените на свое сокращение категории. Также вы можете переименовать файл content-single-product.php. На примере с категорией выше «Books» файл single-product.php был переименован в content-single-product-books.php. Сейчас код такой:

К данному этапу все файлы успешно отредактированы и/или переименованы. Следующий шаг — загрузить их в WooCommerce-магазин. Чтобы все прошло гладко, создайте в директории темы папку /woocommerce/. Не забывайте, что оба файла (content-single-product.php и single-product.php) необходимо поместить в одну папку. Хорошая практика — изменять элементы кода в этой папке темы, чтобы предотвратить сложные для дебага ошибки при перезаписи оригинальных файлов WooCommerce.

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

Заключение

Кастомизация страниц товаров и категорий WooCommerce — это добавление и изменение хуков. Вот и вся наука. Важно понять, что все изменения напрямую влияют на рендеринг этих двух страниц на frontend’е магазина. Если вам необходимо помочь с кодом или с чем-либо еще, пишите в комментариях, и я отвечу вам.

Автор: Muhammad Owais Alam

Источник: //www.sitepoint.com/

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

Страница товара разбита на несколько файлов. Каждый файл отвечает за вывод определенного контента.

• ---

  • 
    Отключение всех функций с хука

  • 
    Замена надписи «Добавить в корзину»

  • 
    Управление вкладками на странице товара

  ---

Структура файлов страницы товара

Вся структура дана от основной папки /templates/

• 
  templates/
• single-product.php
  • content-single-product.php
    • single-product/
      • sale-flash.php — вывод фразы «Распродажа»
      • product-image.php — вывод изображения и галереи товара
      • title.php — вывод заголовка товара
      • rating.php — вывод рейтинга товара
      • price.php — вывод цены товара
      • short-description.php — вывод краткого товара
      • meta.php — вывод метаданных (категория, теги и тд) товара
      • share.php — вывод кнопок поделиться (технически пустой файл, можно использовать для вывода любого контента)
      • add-to-cart/
        • external.php — кнопка «Добавить в корзину» для внешних товаров
        • grouped.php — кнопка «Добавить в корзину» для сгруппированных товаров
        • simple.php — кнопка «Добавить в корзину» для простых товаров
        • variation-add-to-cart-button.php — кнопка «Добавить в корзину» для вариативных товаров
        • variation.php — вывод значения выбранной вариации
        • variable.php — вывод вариаций
      • tabs/
        • tabs.php — вывод вкладок
        • description.php — вывод полного описания товара
        • additional-information.php — вывод деталей товара (вес, габариты, атрибуты)

к содержанию

Визуализация хуков страницы товара

к содержанию

Примеры использования хуков для страницы товара

Отключение всех функций с хука

/**
 * @snippet       Удаление всех функций с хука
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @author        Artem Abramovich
 * @testedwith    WooCommerce 3.6
 */
remove_all_actions( 'woocommerce_single_product_summary' );

Замена надписи «Добавить в корзину»

/**
 * @snippet       Замена надписи на кнопке Добавить в корзину
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @author        Artem Abramovich
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocust_change_label_button_add_to_cart_single' );
function woocust_change_label_button_add_to_cart_single( $label ) {

	$label = 'Просто купить';

	return $label;
}

Управление вкладками на странице товара

Удаление вкладок

/**
 * @snippet       Удаление вкладок
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_remove_product_tabs', 99 );
function wdm_remove_product_tabs( $tabs ) {

	unset( $tabs['description'] ); // Удаление вкладки Описание
	unset( $tabs['reviews'] ); // Удаление вкладки Отзывы
	unset( $tabs['additional_information'] ); // Удаление вкладки Детали

	return $tabs;

}

Переименование вкладок

/**
 * @snippet       Переименование вкладок
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_rename_tabs', 98 );
function woocust_rename_tabs( $tabs ) {

	$tabs['description']['title']            = 'Другое Описание'; // Переименование вкладки Описание
	$tabs['reviews']['title']                = 'Другие Отзывы'; // Переименование вкладки Отзывы
	$tabs['additional_information']['title'] = 'Другие детали'; // Переименование вкладки Детали

	return $tabs;

}

Упорядочивание вкладок

/**
 * @snippet       Упорядочивание вкладок
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_reorder_tabs', 98 );
function woocust_reorder_tabs( $tabs ) {

	$tabs['reviews']['priority']                = 5; // Отзывы первые
	$tabs['description']['priority']            = 10; // Описание вторые
	$tabs['additional_information']['priority'] = 15; // Детали третьи

	return $tabs;
}

Кастомизация вкладок

/**
 * @snippet       Кастомизация вкладок
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_custom_description_tab', 98 );
function woocust_custom_description_tab( $tabs ) {

	$tabs['description']['callback'] = 'woocust_custom_description_tab_content';

	return $tabs;
}

function woocust_custom_description_tab_content() {

	echo '<h2>Произвольное описание</h2>';
	echo '<p>Тут можно добавить произвольное описание</p>';
}

Добавление вкладок

/**
 * @snippet       Добавление произвольной вкладки
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_product_tabs', 'woocust_new_product_tab' );
function woocust_new_product_tab( $tabs ) {

	$tabs['custom_tab'] = array(
		'title'    => 'Новая вкладка',
		'priority' => 50,
		'callback' => 'woocust_new_product_tab_content',
	);

	return $tabs;

}

function woocust_new_product_tab_content() {

	echo '<h2>Новая вкладка</h2>';
	echo '<p>Тут контент новой вкладки</p>';

}

к содержанию

Заключение

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

В данной статье будет рассмотрен метод изменения шаблонов плагина Woocommerce.

Разделение шаблонов категории и товара

Первым делом надо разделить общий шаблон woocommerce.php на woocommerce-product.php и woocommerce-category.php. Делаем это простой проверкой:

<?php get_header(); ?>

<div align="center" class="wrapper">
<div class="wrapper-2">

<div id="main-content">

<?php if ( is_product() ) : ?>

<?php get_template_part( 'woocommerce-product' ); ?>

<?php else: ?>

<?php get_template_part( 'woocommerce-category' ); ?>

<?php endif; ?>

</div> <!-- end main-content -->
</div>
</div>
<?php get_footer(); ?>

Редактирование шаблона WC

В специально созданном include файле для функций woocommerce прописываем и комментируем отключение всех хуков шаблонов WC.

// Отключаем стандартные хуки wordpress (категория товара)

//remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 ); // sale_flash вставлен в сам шаблон + percentage
//remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

//remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

//remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
//remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

//remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );



// Отключаем стандартные хуки wordpress (карточка товара)

//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );  add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_rating', 7 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );



// Добавить хлебные крошки под заголовок
add_action( 'woocommerce_before_shop_loop', 'woocommerce_breadcrumb', 4 ); //В категориях
add_action( 'the_woocommerce_single_title', 'woocommerce_breadcrumb', 6 ); //В карточке товара

Если нужно воздействовать на какой-либо из элементов шаблона — открываем соответствующую строку и чтоб не запутаться следом приписываем «пункт назначения» (если необходимо) и порядковый номер.

Открывающий и закрывающий хуки

• do_action( ‘woocommerce_before_single_product’ );
• do_action( ‘woocommerce_after_single_product’ );

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

Собственный хук для шаблона WC

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

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );  
add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_rating', 7 );

В самом шаблоне в том месте где нужно выводить хук ставим

<?php do_action( 'the_woocommerce_single_title' ); ?>

Изменение стилей Woocommerce

Пользовательские стили для WC лучше подключать НЕ через общее подключение стилей в functions, а в специальном include для WC. В этом случае стили из нашего файла css будут перекрывать стандартные стили WC без !important.

// Добавляем свою таблицу стилей для woocommerce

function wp_enqueue_woocommerce_style(){
	wp_register_style( 'tester-woocommerce', get_template_directory_uri() . '/woocommerce.css' );
	
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'tester-woocommerce' );
	}
}

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

Можно полностью отключить стандартные стили woocommerce

add_filter( 'woocommerce_enqueue_styles', '__return_false' );