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