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

24 июня 2019 | Qudrat Qodirov | WooCommerce Wordpress Wordpress темы | 77

На просторах интернета встречается несколько способов изменения вывода шаблона категории товаров в 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>
1
2
3
4
5
6
7
8
9
10
<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 } ?>
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 после строки
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
1
<?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>
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>
Данные решения будут работать, но возможно вы запутаетесь, что и где править или что делать если нужно будет расширить данные возможности табличного отображения, например кнопкой выбора шаблона для пользователей, как это сделано в популярных интернет магазинах.
Подготовка
Скопируйте файл из «/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-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>
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
26
27
<?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-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'); ?>
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<?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'; } } }
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
26
27
28
29
30
31
32
33
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>
1
2
3
4
    <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'); }
1
2
3
4
5
add_action('wp_enqueue_scripts', 'jsThemeInclude');

function jsThemeInclude() {
      wp_enqueue_style('pruduct-customize', get_stylesheet_directory_uri() . '/css/product-table.css');
}
Если вы всё сделали верно для создания шаблона табличного вывода товаров в Woocommerce, то результат определённо вас порадует:
Важно, если ваш шаблон сайта содержит в корне файл «woocommerce.php» тогда любые изменения файла «/Ваш_Шаблон/woocommerce/archive-product.php» игнорируются и этот способ вам не поможет пока вы не модифицируете свой шаблон что бы он работал без файла «woocommerce.php»
О наличие этот файла в вашем шаблоне вам сообщит Woocommerce из админки сайта. Пример на скриншоте ниже:

Обсуждение закрыто.