WP-Dev

Не секрет, что на данный момент подавляющее большинство тем WordPress можно использовать вместе с замечательным плагином WooCommerce, который с легкостью дополняет ваш сайт полноценным интернет-магазином. Причем многие темы предлагают свои варианты вывода товаров, цветовое оформление и т.д.

Но однажды я столкнулся с проблемой: мне понадобилось вывести очень много товаров без фотографий и с различными таксономиями (типом товара, производителем, совместимостью и т.д.). Я решил, что лучший вариант — сделать отображение товара в табличном виде.

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

Все распишу по пунктам, чтобы было интуитивно понятно.

1.  Убедитесь, что вы установили и активировали плагин WooCommerce на вашем сайте. После этого подключитесь через ftp-соединение или файловый менеджер к сайту. Зайдите в папку с используемой темой.
2. Создайте папку с именем «woocommerce» в корне темы (возможно, она уже есть) и скопируйте в нее файл «content-product», который находится по пути «wp-content/plugins/woocommerce/templates/». Это делается для того, чтобы при обновлении плагина ваши изменения сохранились.
3. Откройте для редактирования файл «function.php», который находится в корневом каталоге темы. В конце файла дописываем:
   
   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 } ?>

   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">&nbsp;</th>         </tr>     </thead>     <tbody> <?php } add_action('woocommerce_after_shop_loop', 'table_loop_closetag',9); function table_loop_closetag( ) { ?> </tbody></table> <?php } ?>

4.  Теперь открываем ранее скопированный файл «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>

   
   Весь ниже идущий код нужно удалить (или закомментировать).

В итоге мы получаем красивую таблицу товаров с нужными нам полями, которые можем менять по своему усмотрению. Так же можно использовать классы «product_table» для изменения стиля отображения (а еще можно для каждого элемента изменить класс и сделать его уникальным).