Woocommerce товары таблицей или как изменить шаблон категории товаров

На просторах интернета встречается несколько способов изменения вывода шаблона категории товаров в 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">&nbsp;</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(т.е от нас)

Подготовка

  1. Скопируйте файл из «/wp-content/plugins/woocommerce/templates/content-product.php» в  «/Ваш_Шаблон/woocommerce/content-product.php»
  2. Создайте файл «/Ваш_Шаблон/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», при этом значение записывается в куки — что бы выбранный шаблон отображался у пользователя всегда пока есть куки сайта.

Так же вам может понадобиться подключить дополнительные стили:

  1. Для отображения «пиктограм» здесь используется библиотека «font awesome» — если вам не нужны эти значки, вы можете прописать свой стиль или оставить просто текст.
  2. В любом случаем вам потребуется «допилить» стиль отображения под себя, не забывайте подключить дополнительный файл стилей для «комфортной» правки. Например свой файл стилей можно подключить через хук в файле function.php
    add_action('wp_enqueue_scripts', 'jsThemeInclude');
    
    function jsThemeInclude() {
          wp_enqueue_style('pruduct-customize', get_stylesheet_directory_uri() . '/css/product-table.css');
    }

     

    Если вы всё сделали верно для создания шаблона табличного вывода товаров в Woocommerce, то результат определённо вас порадует, ну а вот что получилось у нас:

    Woocommerce табличный вывод товаров

    upd: 11.2018

    Важно, если ваш шаблон сайта содержит в корне файл «woocommerce.php» тогда любые изменения файла «/Ваш_Шаблон/woocommerce/archive-product.php» игнорируются и этот способ вам не поможет пока вы не модифицируете свой шаблон что бы он работал без файла «woocommerce.php»

О наличие этот файла в вашем шаблоне вам сообщит Woocommerce из админки сайта. Пример на скриншоте ниже:

Woocommerce товары таблицей или как изменить шаблон категории товаров: 36 комментариев

    1. Добрый день! В условиях «} else {
      $VIEW_TEMPLATE = ‘table’;

      Пропишите нужный вам шаблон — например «list»

  1. Подскажите пожалуйста, а можно как нибудь настроить стиль например для размера изображений, чтоб он подкачивал их не с основного файла Темы например: «themes/storefront/style.css» а «themes/storefront/woocommerce/style.css»
    Очень хотелось бы для этой таблички отдельную тему сделать!
    Спасибо вам большое полезная статья! 🙂

    1. Здесь есть несколько путей. Если вы с кодом на «Вы», то можно установить плагина который позволяет писать стили css прям в админке сайта.
      Если вы с кодом на «Ты», тогда можно создать отдельный файл стилей и подключать его на отдельной странице через add_action.

  2. Еще хотелось бы понять как вывести вес товара например после имени! В заранее больше спасибо!!!

    1. Всё зависит от того в каком поле у вас хранится вес. Но любые кастомные поля в WP в принципе можно выводить через функцию WP «get_post_meta()»

  3. Утро доброе. Подскажите пожалуйста, а как сделать чтобы в категориях товара были такие же иконки. А то у меня на странице магазина (где выводятся все товары) есть иконки, а на отдельный страницах товара (которые вывел через шорткод, категорию отдельную) их нет.

  4. Вообще прикольная задумка, например на главной выходят не все товары, а только с одной категории, предположим распродажа! Djo подскажите пожалуйста как можно реализовать, я так понимаю надо В файле «/Ваш_Шаблон/woocommerce/archive-product.php что-то поменять ?

    1. В этом случае создаёте файл шаблона для главной странице(по всем требованиям WordPress). Затем в админке сайта создаёте страницу с этим шаблоном и делайете в настройках её главной. Далее переходите в код данного шаблона и делаете в нём запрос на получение товаров с нужной категории. Подобным образом реализована главная этого сайта http://teplodiskont.ru/

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

    Еще раз благодарю!

  6. Сделал всё по вашей инструкции, но чудо не произошло…
    Пихтограммы не отобразились, попробовал установить значения $VIEW_TEMPLATE = ‘table’ или $VIEW_TEMPLATE = ‘list’ результат нулевой

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

  7. Добрый день,
    как сделать обновления через ajax и в табличной форме не переходит на след страница

  8. Добрый день,
    а есть описание настройки шаблона страницы с категориями как на этом сайте http://teplodiskont.ru/ ?
    нужно вывести так же Категории, с под категориями. Буду очень благодарен если покажите.

  9. Здравствуйте. Спасибо большое за труды — действительно помогает сделать безопасный вывод товаров таблицей.
    Но мне нужна еще более «глубокая переделка». Мне нужен такой же вывод категорий: чтобы в две колонки выводились: изображение категории (слева), заголовок категории (справа). И еще подкатегории должны быть не прямыми ссылками, а средством навигации по общей таблице товаров. А названия подкатегорий должны быть заголовками в таблице товаров.

    Заголовок подкатегории 1
    (Изображение 1) Товар 1 —————— Перейти
    (Изображение 2) Товар 2 —————— Перейти
    (Изображение 3) Товар 3 —————— Перейти
    Заголовок подкатегории 2
    (Изображение 4) Товар 4 —————— Перейти
    (Изображение 5) Товар 5 —————— Перейти
    (Изображение 6) Товар 6 —————— Перейти

    И при нажатии на подкатегории (в сайдбаре слева) пользователя должно перенести в нужную часть общей таблицы товаров…
    и так далее.
    Скажите пожалуйста, можно ли внеся правки в Ваш код реализовать что-то подобное?

  10. Добрый день!
    Подскажите почему используете setcookie, а не wc_setcookie?
    Плагин Query Monitor ругается на использование setcookie.
    Заранее спасибо за ответ.

  11. Добрый день! у меня тема «STOREFRONT» уже залил на хостинг, хотелось бы сделать категорию товаров чтобы отображалось в табличном виде, кто может помочь более подробнее рассказать или помочь:)

  12. Всё супер! Жаль только не переключается(не работает кнопка) в стандартный вид… Только табличка при нажатии на любой из значков

    1. А ещё пропал выбор страниц внизу. То есть отображается 50 товаров из 9210 на 1 странице, на 2 никак не переключить пользователю.

      1. Хотя на вашем скрине страницы есть и всё ок. Я уже несколько раз все отменял, загружал копию и повторял все действия по порядку. Нигде не ошибся. До этих изменений страницы есть, после нет….. Печально, учитывая что я не понимаю что делаю))))

  13. Здравствуйте,. когда переключаю вид магазина с таблицы на плитку или на оборот, возникает вот такая ошибка:
    Warning: Cannot modify header information — headers already sent by (output started at….

  14. 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

    вроде как ругается на куки..

  15. Здравствуйте. А как прикрутить плагин быстрого просмотра товара в табличном виде? при стандартном отображении товаров в категории, быстрый просмотр товара работает, а при табличном виде не срабатывает. Подскажите решение, кто сталкивался с данной проблемой. Спасибо.

  16. Спасибо большое за статью, очень помогла!!!! Подскажите пожалуйста, как можно сделать что бы вместо кнопки добавить в корзину была кнопка подробнее и при ее нажатии человек попадал не в корзину, а на карточку товара

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *