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, то результат определённо вас порадует, ну а вот что получилось у нас:

   

   upd: 11.2018

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

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