На просторах интернета встречается несколько способов изменения вывода шаблона категории товаров в Woocommerce. По умолчанию интернет магазина на базе Woocommerce и шаблона Storefront отображает товары в категории в виде плитки, количество блоков плитки можно менять через соответствующие хуки в файле функций шаблона.
В первую очередь, что бы править шаблоны вывода, не забудьте из папки плагина Woocommerce/templates скопировать необходимые для редактирования файлы в папку «ваша тема»/woocommerce/. Если папки «woocommerce» в папке с вашей темой нет, тогда создайте её. Все файлы переносить не нужно, берите только те что вы будете править, если не знаете какой файл за что отвечает, перенесите все — потом методом «нучного тыка» определите ваш, а остальные — удалите.
Итак как же изменить вывод товаров в категории от привычного что есть в шаблонах Woo.
Например — на «Тостере» советуют:
Начальные тэг таблиц:
<table class="shop_table cart" cellspacing="0"> <thead> <tr> <th class="product-name"><?php _e( 'Product', 'woocommerce' ); ?></th> <th class="product-price"><?php _e( 'Price', 'woocommerce' ); ?></th> <th class="product-price"></th> </tr> </thead> <tbody>был помещен в другой файл в этом шаблоне — loop/loop-start.php.
Ну и соответственно конечный тэг таблицы был помещен в loop/loop-end.php.
А сам код вывода данных таблицы помещают в «content-product.php»
А ресурс «ИглуЧит» советует в файле шаблона function.php прописать следующий код:
<?php /* Изменяем отображение товара в табличный вид */ add_action('woocommerce_before_shop_loop', 'table_loop_head',40); function table_loop_head( ) { ?> <table class="loop_table loop" cellspacing="0"> /* Вывод заголовков таблицы. Можно добавлять/менять/удалять строки. */ <thead> <tr> <th class="product_table"><?php _e( 'Товар', 'woocommerce' ); ?></th> <th class="product_table"><?php _e( 'Категория', 'woocommerce' ); ?></th> <th class="product_table"><?php _e( 'Тип', 'woocommerce' ); ?></th> <th class="product_table"><?php _e( 'Производитель', 'woocommerce' ); ?></th> <th class="product_table"><?php _e( 'Цена', 'woocommerce' ); ?></th> <th class="product-table"> </th> </tr> </thead> <tbody> <?php } add_action('woocommerce_after_shop_loop', 'table_loop_closetag',9); function table_loop_closetag( ) { ?> </tbody></table> <?php } ?>
и в файле content-product.php после строки
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
вставить
/* Здесь мы меняем вывод информации о товаре в табличный вид, согласно заголовкам, записанным в function.php */ <tr> <td class="product_table"><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></td> // Наименование <td class="product_table"><?php echo ($product->get_attribute( 'cat' )); ?></td> // Категория <td class="product_table"><?php echo ($product->get_attribute( 'type' )); ?></td> // Тип товара <td class="product_table"><?php echo ($product->get_attribute( 'vendor' )); ?></td> // Производитель <td class="product_table"><?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?></td> // Цена <td class="product-table"><?php do_action( 'woocommerce_after_shop_loop_item' ); ?></td> // Кнопка "Добавить в корзину" </tr>
Данные решения будут работать, но возможно вы запутаетесь, что и где править или что делать если нужно будет расширить данные возможности табличного отображения, например кнопкой выбора шаблона для пользователей, как это сделано в популярных интернет магазинах.
Итак, еще одно решение от Zixn.ru(т.е от нас)
Подготовка
- Скопируйте файл из «/wp-content/plugins/woocommerce/templates/content-product.php» в «/Ваш_Шаблон/woocommerce/content-product.php»
- Создайте файл «/Ваш_Шаблон/woocommerce/content-tables.php» и скопируйте в него следующий код:
<?php /** * Шаблон табличного отображения товаров в категории */ if (!defined('ABSPATH')) { exit; // Exit if accessed directly } global $product; // Ensure visibility if (empty($product) || !$product->is_visible()) { return; } if (stripos(woocommerce_get_product_thumbnail(), 'placeholder.png') !== FALSE) { $styleImage = 'product-table-image-no'; } else { $styleImage = 'product-table-image'; } ?> <tr class="productDescription"> <td class="<?php echo $styleImage; ?>"><?php echo woocommerce_get_product_thumbnail(); ?></td> <td class="product-table-title"><a href="<?php the_permalink() ?>" ><?php the_title(); ?></a></td> <!-- <td class="product-table-manufactur"><?php echo ($product->get_attribute('manufacture')); ?></td> --> <td class="product-table-price"><?php do_action('woocommerce_after_shop_loop_item_title'); ?></td> <td class="product-table-button"><?php do_action('woocommerce_after_shop_loop_item'); ?></td> </tr>
3. Создайте файл(но только если у вас его еще там нет) «/Ваш_Шаблон/woocommerce/archive-product.php». Это стандартный файл шаблона Woocommerce, если вы уже его кастомизировали, то рекомендую найти разницу в коде и взять то что вам нужно. Код для этого файла следующий:
<?php /** * The Template for displaying product archives, including the main shop page which is a post type archive * * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @author WooThemes * @package WooCommerce/Templates * @version 2.0.0 */ if (!defined('ABSPATH')) { exit; // Exit if accessed directly } get_header('shop'); ?> <?php /** * woocommerce_before_main_content hook. * * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content) * @hooked woocommerce_breadcrumb - 20 */ do_action('woocommerce_before_main_content'); ?> <?php if (apply_filters('woocommerce_show_page_title', true)) : ?> <h1 class="page-title"><?php woocommerce_page_title(); ?></h1> <?php endif; ?> <?php /** * woocommerce_archive_description hook. * * @hooked woocommerce_taxonomy_archive_description - 10 * @hooked woocommerce_product_archive_description - 10 */ do_action('woocommerce_archive_description'); ?> <?php if (have_posts()) : ?> <?php /** * woocommerce_before_shop_loop hook. * * @hooked woocommerce_result_count - 20 * @hooked woocommerce_catalog_ordering - 30 */ do_action('woocommerce_before_shop_loop'); ?> <div class="templateBlockSelector"> <a href="<?php echo add_query_arg(array('cat_templete' => 'list')); ?>"><i class="fa fa-list fa-2x" aria-hidden="true"></i></a> <a href="<?php echo add_query_arg(array('cat_templete' => 'table')); ?>"><i class="fa fa-table fa-2x" aria-hidden="true"></i></a> </div> <?php woocommerce_product_loop_start(); ?> <?php woocommerce_product_subcategories(); ?> <?php global $VIEW_TEMPLATE; ?> <?php if ($VIEW_TEMPLATE == 'table') { ?> <?php while (have_posts()) : the_post(); ?> <?php wc_get_template_part('content', 'product'); ?> <?php endwhile; // end of the loop. ?> <?php } else { ?> <table class="productTemplateTables"> <?php while (have_posts()) : the_post(); ?> <?php wc_get_template_part('content', 'tables'); ?> <?php endwhile; // end of the loop. ?> </table> <?php } ?> <?php woocommerce_product_loop_end(); ?> <?php /** * woocommerce_after_shop_loop hook. * * @hooked woocommerce_pagination - 10 */ remove_action('woocommerce_after_shop_loop', 'woocommerce_pagination', 10); do_action('woocommerce_after_shop_loop'); ?> <?php elseif (!woocommerce_product_subcategories(array('before' => woocommerce_product_loop_start(false), 'after' => woocommerce_product_loop_end(false)))) : ?> <?php wc_get_template('loop/no-products-found.php'); ?> <?php endif; ?> <?php /** * woocommerce_after_main_content hook. * * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content) */ do_action('woocommerce_after_main_content'); ?> <?php /** * woocommerce_sidebar hook. * * @hooked woocommerce_get_sidebar - 10 */ do_action('woocommerce_sidebar'); ?> <?php get_footer('shop'); ?>
Всё, почва для шаблона готова и теперь маленький штрих для того что бы можно было выбрать между стандартным шаблоном и вашим.
Заходим в файл «»/Ваш_Шаблон/functions.php» и дописывам хук + функцию
add_action('woocommerce_before_shop_loop', 'setTempleteCategory'); /** * Устанавливает режим просмотра категорий товаров * @global type $VIEW_TEMPLATE */ function setTempleteCategory() { global $VIEW_TEMPLATE; if (isset($_REQUEST['cat_templete'])) { if ($_REQUEST['cat_templete'] == 'list') { $VIEW_TEMPLATE = 'list'; setcookie("view_template_product", "", time() - 3600); setcookie('view_template_product', 'list', time() + 60 * 60 * 24 * 30); } elseif ($_REQUEST['cat_templete'] == 'table') { $VIEW_TEMPLATE = 'table'; setcookie("view_template_product", "", time() - 3600); setcookie('view_template_product', 'table', time() + 60 * 60 * 24 * 30); } else { $VIEW_TEMPLATE = 'table'; } } else { if (isset($_COOKIE['view_template_product'])) { if ($_COOKIE['view_template_product'] == 'list') { $VIEW_TEMPLATE = 'list'; } elseif ($_COOKIE['view_template_product'] == 'table') { $VIEW_TEMPLATE = 'table'; } } else { $VIEW_TEMPLATE = 'table'; } } }
Немного поясню: В файле «/Ваш_Шаблон/woocommerce/archive-product.php» при помощи глобальной переменной «VIEW_TEMPLATE» и условия «IF» проиcходит определение того, какой файл шаблона подключить(табличный или стандартный). Так же данный файл дополнен блоком
<div class="templateBlockSelector"> <a href="<?php echo add_query_arg(array('cat_templete' => 'list')); ?>"><i class="fa fa-list fa-2x" aria-hidden="true"></i></a> <a href="<?php echo add_query_arg(array('cat_templete' => 'table')); ?>"><i class="fa fa-table fa-2x" aria-hidden="true"></i></a> </div>
Для отображения двух «пиктограм» выбора шаблона.
Код который мы добавили в файл function.php следит за наличием GET переменных и устанавливает соответсвующее значение в глобальную переменную «VIEW_TEMPLATE», при этом значение записывается в куки — что бы выбранный шаблон отображался у пользователя всегда пока есть куки сайта.
Так же вам может понадобиться подключить дополнительные стили:
- Для отображения «пиктограм» здесь используется библиотека «font awesome» — если вам не нужны эти значки, вы можете прописать свой стиль или оставить просто текст.
- В любом случаем вам потребуется «допилить» стиль отображения под себя, не забывайте подключить дополнительный файл стилей для «комфортной» правки. Например свой файл стилей можно подключить через хук в файле function.php
add_action('wp_enqueue_scripts', 'jsThemeInclude'); function jsThemeInclude() { wp_enqueue_style('pruduct-customize', get_stylesheet_directory_uri() . '/css/product-table.css'); }
Если вы всё сделали верно для создания шаблона табличного вывода товаров в Woocommerce, то результат определённо вас порадует, ну а вот что получилось у нас:
upd: 11.2018
Важно, если ваш шаблон сайта содержит в корне файл «woocommerce.php» тогда любые изменения файла «/Ваш_Шаблон/woocommerce/archive-product.php» игнорируются и этот способ вам не поможет пока вы не модифицируете свой шаблон что бы он работал без файла «woocommerce.php»
О наличие этот файла в вашем шаблоне вам сообщит Woocommerce из админки сайта. Пример на скриншоте ниже:
Спасибо, помогло.
А как по умолчанию сделать в табличном виде?
Спасибо.
Добрый день! В условиях «} else {
$VIEW_TEMPLATE = ‘table’;
}»
Пропишите нужный вам шаблон — например «list»
Подскажите пожалуйста, а можно как нибудь настроить стиль например для размера изображений, чтоб он подкачивал их не с основного файла Темы например: «themes/storefront/style.css» а «themes/storefront/woocommerce/style.css»
Очень хотелось бы для этой таблички отдельную тему сделать!
Спасибо вам большое полезная статья! 🙂
Здесь есть несколько путей. Если вы с кодом на «Вы», то можно установить плагина который позволяет писать стили css прям в админке сайта.
Если вы с кодом на «Ты», тогда можно создать отдельный файл стилей и подключать его на отдельной странице через add_action.
Еще хотелось бы понять как вывести вес товара например после имени! В заранее больше спасибо!!!
Всё зависит от того в каком поле у вас хранится вес. Но любые кастомные поля в WP в принципе можно выводить через функцию WP «get_post_meta()»
Спасибо вам большое!
Утро доброе. Подскажите пожалуйста, а как сделать чтобы в категориях товара были такие же иконки. А то у меня на странице магазина (где выводятся все товары) есть иконки, а на отдельный страницах товара (которые вывел через шорткод, категорию отдельную) их нет.
Да, полезно было бы! 🙂
Вообще прикольная задумка, например на главной выходят не все товары, а только с одной категории, предположим распродажа! Djo подскажите пожалуйста как можно реализовать, я так понимаю надо В файле «/Ваш_Шаблон/woocommerce/archive-product.php что-то поменять ?
В этом случае создаёте файл шаблона для главной странице(по всем требованиям WordPress). Затем в админке сайта создаёте страницу с этим шаблоном и делайете в настройках её главной. Далее переходите в код данного шаблона и делаете в нём запрос на получение товаров с нужной категории. Подобным образом реализована главная этого сайта http://teplodiskont.ru/
Добрый день , поставил всё по инструкции — https://жби.com/product-category/dorozhnoe-stroitelstvo/dorozhnaya-plita-s-nenapryagaemoj-armaturoj/
почему то не так работает ?*
https://жби.com/product-category/dorozhnoe-stroitelstvo/dorozhnaya-plita-s-nenapryagaemoj-armaturoj/
как сделать вывод таких полей как размер товара \ атрибут \ ну и других ? у меня только картинка и название выходит
Впервые оставляю комментарий на чьем-либо блоге. Не могу ни сказать спасибо. Только ваш способ оказался действенным и без всяких там ошибок и подводных камней. Все работает на ура.
Еще раз благодарю!
Сделал всё по вашей инструкции, но чудо не произошло…
Пихтограммы не отобразились, попробовал установить значения $VIEW_TEMPLATE = ‘table’ или $VIEW_TEMPLATE = ‘list’ результат нулевой
Если что тему использовал: https://wordpress.org/themes/istore/
Возможно вам не нужны вызовы некоторых функций, что бы всё заработало как надо.
Например
Добрый день,
как сделать обновления через ajax и в табличной форме не переходит на след страница
Добрый день,
а есть описание настройки шаблона страницы с категориями как на этом сайте http://teplodiskont.ru/ ?
нужно вывести так же Категории, с под категориями. Буду очень благодарен если покажите.
Здравствуйте. Спасибо большое за труды — действительно помогает сделать безопасный вывод товаров таблицей.
Но мне нужна еще более «глубокая переделка». Мне нужен такой же вывод категорий: чтобы в две колонки выводились: изображение категории (слева), заголовок категории (справа). И еще подкатегории должны быть не прямыми ссылками, а средством навигации по общей таблице товаров. А названия подкатегорий должны быть заголовками в таблице товаров.
Заголовок подкатегории 1
(Изображение 1) Товар 1 —————— Перейти
(Изображение 2) Товар 2 —————— Перейти
(Изображение 3) Товар 3 —————— Перейти
Заголовок подкатегории 2
(Изображение 4) Товар 4 —————— Перейти
(Изображение 5) Товар 5 —————— Перейти
(Изображение 6) Товар 6 —————— Перейти
И при нажатии на подкатегории (в сайдбаре слева) пользователя должно перенести в нужную часть общей таблицы товаров…
и так далее.
Скажите пожалуйста, можно ли внеся правки в Ваш код реализовать что-то подобное?
Возможно ли сделать переход к товару при нажатии на фотографию?
Добрый день!
Подскажите почему используете setcookie, а не wc_setcookie?
Плагин Query Monitor ругается на использование setcookie.
Заранее спасибо за ответ.
Добрый день. Спасибо, пригодилось. А можно ли зааяксить все это делао?
Добрый день. А как вставить шапку для таблицы товаров?
Добрый день! у меня тема «STOREFRONT» уже залил на хостинг, хотелось бы сделать категорию товаров чтобы отображалось в табличном виде, кто может помочь более подробнее рассказать или помочь:)
Спасибо! Невероятно полезно.
Единственное, в «list» у вас вырезается пагинация
Всё супер! Жаль только не переключается(не работает кнопка) в стандартный вид… Только табличка при нажатии на любой из значков
А ещё пропал выбор страниц внизу. То есть отображается 50 товаров из 9210 на 1 странице, на 2 никак не переключить пользователю.
Хотя на вашем скрине страницы есть и всё ок. Я уже несколько раз все отменял, загружал копию и повторял все действия по порядку. Нигде не ошибся. До этих изменений страницы есть, после нет….. Печально, учитывая что я не понимаю что делаю))))
Здравствуйте,. когда переключаю вид магазина с таблицы на плитку или на оборот, возникает вот такая ошибка:
Warning: Cannot modify header information — headers already sent by (output started at….
Warning: Cannot modify header information — headers already sent by (output started at C:\Server\domains\shop.ru\wp-content\themes\storefront\header.php:9) in C:\Server\domains\shop.ru\wp-content\themes\storefront\functions.php on line 82
Warning: Cannot modify header information — headers already sent by (output started at C:\Server\domains\shop.ru\wp-content\themes\storefront\header.php:9) in C:\Server\domains\shop.ru\wp-content\themes\storefront\functions.php on line 83
вроде как ругается на куки..
Здравствуйте. А как прикрутить плагин быстрого просмотра товара в табличном виде? при стандартном отображении товаров в категории, быстрый просмотр товара работает, а при табличном виде не срабатывает. Подскажите решение, кто сталкивался с данной проблемой. Спасибо.
Спасибо большое за статью, очень помогла!!!! Подскажите пожалуйста, как можно сделать что бы вместо кнопки добавить в корзину была кнопка подробнее и при ее нажатии человек попадал не в корзину, а на карточку товара
файл content-tables.php
<a href="» >Подробнее
файл content-tables.php
[code]<a href="» >Подробнее [/code]
файл content-tables.php
[crayon lang=»php»] <a href="» >Подробнее [/crayon]