Отображение товаров в таблице WooCommerce — это отличный способ улучшить пользовательский опыт, особенно если вы продаете оптовые товары или хотите предоставить клиентам удобный способ сравнения и выбора. WooCommerce по умолчанию выводит товары в сетке, но вы можете легко настроить вывод в таблице с помощью плагинов или кастомного кода. 1. Плагины для отображения товаров в таблице Существует несколько плагинов, которые позволяют вывести товары в виде таблицы без необходимости написания кода. WooCommerce Product Table (платный) Этот плагин позволяет отображать товары в виде таблицы, где можно добавлять такие поля, как изображение товара, цена, количество, SKU, атрибуты и кнопка «Добавить в корзину». Вы можете создать таблицу с фильтрацией, сортировкой и поиском. Основные возможности: Добавление товаров в корзину непосредственно из таблицы Поддержка вариативных товаров и фильтров Сортировка по цене, категории и другим параметрам Встроенный поиск товаров Ссылка на плагин Woo Product Table Lite (бесплатный) Более простое решение для отображения таблицы товаров Позволяет выводить таблицы с основными характеристиками товаров Поддерживает отображение вариативных товаров Ссылка на плагин WC Product Table (бесплатный и платный) Еще один плагин для создания таблиц с товарами Поддерживает фильтры, сортировку и добавление товаров в корзину прямо из таблицы Ссылка на плагин 2. Вывод товаров в таблице с использованием шорткодов Вы можете использовать шорткод для создания таблицы с товарами. Для этого нужно комбинировать HTML и стандартные шорткоды WooCommerce. Пример шорткода для отображения товаров в таблице: <table class="shop_table"> <thead> <tr> <th>Изображение</th> <th>Название</th> <th>Цена</th> <th>Количество</th> <th>Купить</th> </tr> </thead> <tbody> <?php $args = array( 'post_type' => 'product', 'posts_per_page' => 10, ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?> <tr> <td><?php echo woocommerce_get_product_thumbnail(); ?></td> <td><?php the_title(); ?></td> <td><?php echo $product->get_price_html(); ?></td> <td> <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" method="post" enctype="multipart/form-data"> <input type="number" name="quantity" value="1" min="1" max="<?php echo $product->get_stock_quantity(); ?>"> <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>"> </td> <td> <button type="submit" class="button">Добавить в корзину</button> </form> </td> </tr> <?php endwhile; wp_reset_query(); ?> </tbody> </table> Этот код создаст таблицу с изображениями, названиями товаров, ценой, полем для ввода количества и кнопкой «Добавить в корзину». Вы можете настроить таблицу по своему усмотрению, изменяя стиль или добавляя дополнительные данные. Пример того, как может выглядеть таблица: Изображение Название Цена Количество Купить [Изображение товара] Пример товара 1 450 грн Добавить в корзину [Изображение товара] Пример товара 2 320 грн Добавить в корзину 3. Программный вывод таблицы товаров через кастомные функции Если вам нужно более сложное решение для вывода таблицы, вы можете использовать кастомный код для создания таблиц товаров. Пример вывода таблицы товаров с использованием PHP: Добавьте этот код в файл functions.php вашей темы: function woocommerce_product_table() { // Настройка запроса продуктов $args = array( 'post_type' => 'product', 'posts_per_page' => 10, ); $loop = new WP_Query( $args ); // Создаем HTML таблицу echo '<table class="woocommerce-product-table">'; echo '<thead> <tr> <th>Изображение</th> <th>Название товара</th> <th>Цена</th> <th>Количество</th> <th>Добавить в корзину</th> </tr> </thead>'; echo '<tbody>'; while ( $loop->have_posts() ) : $loop->the_post(); global $product; echo '<tr>'; echo '<td>' . woocommerce_get_product_thumbnail() . '</td>'; echo '<td><a href="' . get_permalink() . '">' . get_the_title() . '</a></td>'; echo '<td>' . $product->get_price_html() . '</td>'; echo '<td> <form action="' . esc_url( $product->add_to_cart_url() ) . '" method="post" enctype="multipart/form-data"> <input type="number" name="quantity" value="1" min="1" max="' . $product->get_stock_quantity() . '"> </td>'; echo '<td><button type="submit" class="button">Добавить в корзину</button></form></td>'; echo '</tr>'; endwhile; echo '</tbody></table>'; wp_reset_query(); } // Вывод функции на страницу с использованием шорткода add_shortcode( 'product_table', 'woocommerce_product_table' ); Теперь вы можете использовать шорткод [product_table] для вывода таблицы товаров на любой странице сайта. 4. Кастомизация стилей таблицы товаров После того, как вы настроили таблицу, вы можете добавить кастомные стили для улучшения отображения с помощью CSS. Пример простого оформления таблицы: .woocommerce-product-table { width: 100%; border-collapse: collapse; } .woocommerce-product-table th, .woocommerce-product-table td { padding: 10px; border: 1px solid #ddd; text-align: left; } .woocommerce-product-table th { background-color: #f4f4f4; } .woocommerce-product-table td img { max-width: 80px; height: auto; } Этот код стилизует таблицу для лучшего отображения, добавляя границы и настраивая размеры изображений. 5. Переадресация после добавления товара в корзину из таблицы Если вы хотите, чтобы после добавления товара в корзину из таблицы пользователь оставался на странице или был переадресован на корзину, можно использовать следующий код: add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_to_cart_after_add_to_cart' ); function redirect_to_cart_after_add_to_cart() { return wc_get_cart_url(); // Переадресация на корзину после добавления товара } Если вы не хотите перенаправлять на корзину, просто уберите этот код. Вывод товаров в таблице WooCommerce можно реализовать как с помощью плагинов, так и через кастомные решения с использованием PHP и шорткодов. Плагины предоставляют более гибкие и продвинутые функции, такие как сортировка, фильтрация и добавление товаров в корзину без перезагрузки страницы, в то время как кастомные решения позволяют точно настроить таблицу под ваши нужды.