На просторах интернета встречается несколько способов изменения вывода шаблона категории товаров в Woocommerce. По умолчанию интернет магазина на базе Woocommerce и шаблона Storefront отображает товары в категории в виде плитки, количество блоков плитки можно менять через соответствующие хуки в файле функций шаблона.
В первую очередь, что бы править шаблоны вывода, не забудьте из папки плагина Woocommerce/templates скопировать необходимые для редактирования файлы в папку «ваша тема»/woocommerce/. Если папки «woocommerce» в папке с вашей темой нет, тогда создайте её. Все файлы переносить не нужно, берите только те что вы будете править, если не знаете какой файл за что отвечает, перенесите все — потом методом «нучного тыка» определите ваш, а остальные — удалите.
Итак как же изменить вывод товаров в категории от привычного что есть в шаблонах Woo.
Например — на «Тостере» советуют:
Начальные тэг таблиц:
12345678910 <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 прописать следующий код:
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 |
<?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 после строки
1 |
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?> |
вставить
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Здесь мы меняем вывод информации о товаре в табличный вид, согласно заголовкам, записанным в 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» и скопируйте в него следующий код:
123456789101112131415161718192021222324252627<?php/*** Шаблон табличного отображения товаров в категории*/if (!defined('ABSPATH')) {exit; // Exit if accessed directly}global $product;// Ensure visibilityif (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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123<?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(); ?><?phpglobal $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» и дописывам хук + функцию
123456789101112131415161718192021222324252627282930313233add_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ходит определение того, какой файл шаблона подключить(табличный или стандартный). Так же данный файл дополнен блоком
1234<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
12345add_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/
Возможно вам не нужны вызовы некоторых функций, что бы всё заработало как надо.
Например <td class="product-table-quantity"><?php custom_quantity_field_archive($product); ?></td>
Добрый день,
как сделать обновления через 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 никак не переключить пользователю.
Хотя на вашем скрине страницы есть и всё ок. Я уже несколько раз все отменял, загружал копию и повторял все действия по порядку. Нигде не ошибся. До этих изменений страницы есть, после нет….. Печально, учитывая что я не понимаю что делаю))))