Как создать динамический шаблон для WooCommerce с кастомным выводом товаров

WooCommerce — мощный плагин для создания интернет-магазинов на WordPress, но стандартные шаблоны часто не подходят для специфических задач. В этой статье мы подробно разберём, как создать динамический шаблон для WooCommerce, который позволит выводить товары с кастомной логикой и дизайном.

Почему нужен собственный динамический шаблон WooCommerce

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

Динамический шаблон позволит:

• Выводить товары с учётом дополнительных метаданных или пользовательских таксономий.
• Реализовать AJAX-подгрузку товаров по фильтрам.
• Изменять структуру и дизайн карточек без правки основных файлов темы.

Для начала разберём, как создать базовый динамический шаблон.

Создание базового динамического шаблона WooCommerce

Для переопределения шаблонов WooCommerce необходимо создать папку woocommerce в используемой теме или дочерней теме. В ней размещаются файлы шаблонов, которые будут заменять стандартные.

Например, чтобы изменить вывод страницы архива товаров (категории), копируем файл archive-product.php из плагина WooCommerce в wp-content/themes/ваша-тема/woocommerce/archive-product.php.

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

Пример кастомного запроса товаров в шаблоне

Вместо стандартного цикла WooCommerce используем WP_Query, чтобы гибко управлять выборкой:

function wptemplates_get_custom_products_query($args = array()) {
    $default_args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        'post_status' => 'publish',
    );
    $query_args = array_merge($default_args, $args);
    return new WP_Query($query_args);
}

В шаблоне вызываем:

$products_query = wptemplates_get_custom_products_query(array(
    'meta_query' => array(
        array(
            'key' => '_price',
            'value' => 1000,
            'compare' => '>=',
            'type' => 'NUMERIC'
        )
    )
));
if ($products_query->have_posts()) {
    while ($products_query->have_posts()) {
        $products_query->the_post();
        wc_get_template_part('content', 'product');
    }
    wp_reset_postdata();
} else {
    echo '<p>Товары не найдены.</p>';
}

Этот код выводит товары с ценой от 1000 и выше. Можно усложнять запрос, добавляя свои метаполя или таксономии.

Реализация AJAX-подгрузки товаров

Чтобы страница не перезагружалась при фильтрации или пагинации, используем AJAX. Создадим обработчик и JS-скрипт.

PHP: AJAX обработчик запросов товаров

add_action('wp_ajax_wptemplates_load_products', 'wptemplates_load_products_ajax');
add_action('wp_ajax_nopriv_wptemplates_load_products', 'wptemplates_load_products_ajax');

function wptemplates_load_products_ajax() {
    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
    $price_min = isset($_POST['price_min']) ? floatval($_POST['price_min']) : 0;

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        'paged' => $paged,
        'meta_query' => array(
            array(
                'key' => '_price',
                'value' => $price_min,
                'compare' => '>=',
                'type' => 'NUMERIC',
            ),
        ),
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
    } else {
        echo '<p>Товары не найдены.</p>';
    }
    wp_die();
}

JavaScript: загрузка товаров по AJAX

Добавим скрипт, который отправляет запрос и обновляет контент:

jQuery(document).ready(function($) {
    $('#load-more-products').on('click', function(e) {
        e.preventDefault();
        var paged = parseInt($(this).data('paged')) + 1;
        var priceMin = $('#filter-price-min').val() || 0;
        $.ajax({
            url: wptemplates_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wptemplates_load_products',
                paged: paged,
                price_min: priceMin
            },
            success: function(response) {
                if(response.trim()) {
                    $('#products-container').append(response);
                    $('#load-more-products').data('paged', paged);
                } else {
                    $('#load-more-products').hide();
                }
            }
        });
    });
});

Не забудьте локализовать скрипт в functions.php:

function wptemplates_enqueue_scripts() {
    wp_enqueue_script('wptemplates-ajax', get_template_directory_uri() . '/js/wptemplates-ajax.js', array('jquery'), null, true);
    wp_localize_script('wptemplates-ajax', 'wptemplates_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wptemplates_enqueue_scripts');

Полезные плагины для расширения функционала динамических шаблонов в WooCommerce

Для упрощения работы с динамическими шаблонами и расширения возможностей можно использовать следующие плагины:

• Clearfy Pro — оптимизация и отключение ненужных функций WooCommerce для ускорения шаблонов.
• WPRemark — расширенные возможности по отзывам и рейтингам товаров, что часто требуется в кастомных шаблонах.
• Тема Reboot — современный базовый шаблон с хорошей структурой для WooCommerce, который пригодится для быстрого старта.

Использование этих плагинов и тем поможет сделать шаблон более функциональным и удобным для пользователей.

Советы по оптимизации динамических шаблонов WooCommerce

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

• Используйте кэширование результатов запросов, например, с помощью Transients API или плагинов кэширования.
• Ограничивайте количество товаров на странице и применяйте пагинацию.
• Минимизируйте количество AJAX-запросов и группируйте фильтрацию.
• Оптимизируйте изображения товаров, чтобы страница загружалась быстрее.

Также полезно профилировать сайт с помощью Query Monitor или аналогичных инструментов.

Заключение

Создание динамического шаблона для WooCommerce позволяет значительно расширить возможности магазина и повысить удобство пользователей. С помощью кастомных запросов, AJAX-подгрузки и правильного кэширования можно реализовать любые задачи по выводу товаров. Рекомендуется использовать современные темы и плагины, например, Clearfy Pro или тему Reboot, чтобы ускорить разработку и улучшить производительность.