Отображение товаров в виде списка в WooCommerce

Отображение товаров в виде списка в WooCommerce может значительно улучшить удобство использования интернет-магазина, особенно для пользователей, которым важна компактность и структурированность. Это особенно полезно для магазинов, где покупатели могут сравнивать товары, просматривать большое количество продуктов на одной странице или быстро добавлять товары в корзину.

1. Плагины для вывода товаров в виде списка

Самый простой способ отобразить товары списком в WooCommerce — использовать специальные плагины. Такие плагины позволяют легко переключаться между видом списка и сетки, а также могут добавить другие функции, такие как фильтрация и сортировка товаров.

Популярные плагины:

1. Grid/List View for WooCommerce (бесплатный)

• ? Плагин позволяет покупателям переключаться между видом сетки и списка на страницах магазина и категории.
• ? Добавляет кнопки для переключения видов отображения (сетка/список), что улучшает UX.

Основные возможности:

• > Переключение между сеткой и списком.
• > Простая настройка и активация.

2. WooCommerce Product Table (платный)

• ? Этот плагин позволяет выводить товары в виде таблицы или списка с возможностью выбора количества, добавления в корзину, фильтрации и сортировки товаров.
• ? Отлично подходит для магазинов с оптовыми продажами, ресторанов или каталогов продуктов.

Основные возможности:

• > Полностью настраиваемая таблица товаров.
• > Возможность добавления нескольких товаров в корзину одновременно.
• > Поддержка вариативных товаров.

3. Woo Product Table Lite (бесплатный и платный)

• ? Этот плагин выводит товары в виде таблицы с изображениями, ценами, краткими описаниями и кнопкой "Добавить в корзину".
• ? Поддерживает вариативные товары и удобен для больших каталогов.

2. Кастомизация вывода товаров в виде списка через код

Если вы не хотите использовать плагины и предпочитаете кастомные решения, вы можете изменить шаблон WooCommerce, чтобы товары отображались в виде списка.

Шаги для настройки товаров списком через код:

1. Копирование шаблона WooCommerce

WooCommerce использует шаблоны для отображения товаров. Чтобы изменить стандартный вывод товаров (сетка), нужно создать свой кастомный шаблон.

• > Перейдите в папку вашей темы: wp-content/themes/your-theme.
• > Создайте папку woocommerce, если она ещё не существует.
• > Скопируйте шаблон вывода товаров: wp-content/plugins/woocommerce/templates/content-product.php.
• > Вставьте этот файл в папку вашей темы: wp-content/themes/your-theme/woocommerce/content-product.php.

2. Редактирование шаблона для вывода списка

Теперь можно изменить HTML-код внутри файла content-product.php, чтобы товары отображались в виде списка.

Пример кода для отображения товаров в виде списка:

<li <?php wc_product_class( '', $product ); ?>>
    <div class="product-list-item">
        <div class="product-thumbnail">
            <?php echo woocommerce_get_product_thumbnail(); ?>
        </div>
        <div class="product-info">
            <h2 class="product-title"><?php the_title(); ?></h2>
            <div class="product-description">
                <?php the_excerpt(); ?>
            </div>
            <span class="price"><?php echo $product->get_price_html(); ?></span>
            <?php woocommerce_template_loop_add_to_cart(); ?>
        </div>
    </div>
</li>

Этот код создаёт простую структуру для отображения товаров в виде списка. Вы можете выводить миниатюру, название, краткое описание, цену и кнопку "Добавить в корзину".

3. Стилизация товаров в виде списка

После изменения шаблона нужно настроить стили, чтобы товары выглядели как список.

Пример CSS для вывода товаров в виде списка:

.product-list-item {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 20px;
}

.product-thumbnail {
    margin-right: 20px;
}

.product-thumbnail img {
    width: 120px;
    height: auto;
}

.product-info {
    flex: 1;
}

.product-title {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.product-description {
    margin-bottom: 10px;
}

.price {
    font-size: 16px;
    color: #333;
}

.button {
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
}

Этот стиль создаст структуру списка, где изображение будет слева, а информация о товаре — справа.

3. Добавление переключателя между сеткой и списком

Если вы хотите дать покупателям возможность выбора между сеткой и списком, можно добавить кнопку для переключения режимов отображения.

Пример переключателя между сеткой и списком:

Добавьте следующий код в файл functions.php вашей темы:

// Добавляем переключатель между сеткой и списком
add_action( 'woocommerce_before_shop_loop', 'add_grid_list_toggle', 20 );
function add_grid_list_toggle() {
    ?>
    <div class="view-toggle">
        <a href="#" id="grid-view" class="active">Сетка</a>
        <a href="#" id="list-view">Список</a>
    </div>
    <?php
}

// Добавляем класс для переключения между видами
add_filter( 'body_class', 'add_body_class_for_list_view' );
function add_body_class_for_list_view( $classes ) {
    if ( isset( $_COOKIE['shop_view'] ) && $_COOKIE['shop_view'] == 'list' ) {
        $classes[] = 'list-view';
    } else {
        $classes[] = 'grid-view';
    }
    return $classes;
}

// Добавляем JavaScript для переключения между видами
add_action( 'wp_footer', 'toggle_grid_list_view' );
function toggle_grid_list_view() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('#list-view').click(function(e) {
            e.preventDefault();
            $('body').removeClass('grid-view').addClass('list-view');
            document.cookie = "shop_view=list";
        });
        $('#grid-view').click(function(e) {
            e.preventDefault();
            $('body').removeClass('list-view').addClass('grid-view');
            document.cookie = "shop_view=grid";
        });
    });
    </script>
    <?php
}

Этот код добавляет возможность переключаться между сеткой и списком.

Стилизация переключателя:

.view-toggle {
    margin-bottom: 20px;
}

.view-toggle a {
    padding: 10px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #0073aa;
    margin-right: 10px;
}

.view-toggle a.active {
    background-color: #0073aa;
    color: #fff;
}

Теперь пользователи смогут выбирать между выводом товаров в виде сетки или списка.

4. Настройка фильтрации товаров в списке

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

Плагины для фильтрации товаров:

1. WOOF – WooCommerce Products Filter (бесплатный и платный)

• ? Плагин позволяет добавлять фильтры по категориям, атрибутам, ценам и другим параметрам.
• ? Поддерживает создание фильтров на основе атрибутов товаров, таких как размер, цвет и т.д.

2. YITH WooCommerce Ajax Product Filter (бесплатный и платный)

• ? Плагин добавляет AJAX-фильтрацию для страниц магазина, что улучшает UX.
• ? Поддерживает фильтрацию по ценам, цветам, размерам и другим атрибутам.

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