Как кастомизировать страницы товаров в WooCommerce?

Как кастомизировать страницы товаров в 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:

function get_custom_post_type_template($single_template) {
 global $post;

 if ($post->post_type == 'product') {
 $single_template = dirname( __FILE__ ) . '/single-template.php';
 }
 return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_template' );

as well as following code include in template _include
add_filter( 'template_include', 'portfolio_page_template', 99 );

function portfolio_page_template( $template ) {

 if ( is_page( 'slug' )  ) {
 $new_template = locate_template( array( 'single-template.php' ) );
 if ( '' != $new_template ) {
 return $new_template ;
 }
 }

 return $template;
}

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

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

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

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

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

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

woocommerce_get_template_part( 'content', 'single-product' );

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


global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( 'YOURCATEGORY', $categories ) ) {
 woocommerce_get_template_part( 'content', 'single-product-YOURCATEGORY' );
} else {
 woocommerce_get_template_part( 'content', 'single-product' );
}

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

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( 'books', $categories ) ) {
 woocommerce_get_template_part( 'content', 'single-product-books' );
} else {
 woocommerce_get_template_part( 'content', 'single-product' );
} 

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

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

Заключение

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

Автор: Muhammad Owais Alam

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

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

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

Интернет-магазин на WooCommerce

Создание магазина с уникальным шаблоном на CMS 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