Розробка кастомної теми WooCommerce

Розробка користувальницької теми WooCommerce

Стандартний WooCommerce виглядає стандартно. Тема Storefront — відправна точка, але не кінцевий результат. Користувальницька тема WooCommerce — це повний контроль над шаблонами каталогу, карточки товара, кошика та оформлення замовлення без переопалення сотні CSS-правил поверх чужого коду. Розробка користувальницької теми від дизайну до production — від 10 до 20 робочих днів залежно від користувальницьких шаблонів та нестандартних елементів.

Структура теми

WooCommerce шукає шаблони у папці woocommerce/ всередину активної теми. Якщо файл знайдений — він перекриває оригінальний з плагіну:

wp-content/themes/my-theme/
├── woocommerce/
│   ├── archive-product.php         # Сторінка каталогу
│   ├── single-product.php          # Карточка товара
│   ├── cart/
│   │   └── cart.php                # Кошик
│   ├── checkout/
│   │   ├── form-checkout.php       # Форма оформлення
│   │   └── thankyou.php            # Сторінка підтвердження
│   ├── myaccount/
│   │   └── dashboard.php           # Особистий кабінет
│   ├── content-product.php         # Елемент товара (карточка в списку)
│   ├── single-product/
│   │   ├── tabs/
│   │   │   └── tabs.php            # Вкладки товара
│   │   └── related.php             # Рекомендовані товари
│   └── loop/
│       ├── pagination.php
│       └── add-to-cart.php
└── functions.php

Повний список шаблонів: wp-content/plugins/woocommerce/templates/.

Переопредлення карточки товара

Замість копіювання content-product.php з мінімальними змінами — пишемо з нуля під дизайн:

<?php
// woocommerce/content-product.php
defined('ABSPATH') || exit;

global $product;

if (!$product || !$product->is_visible()) return;

$product_id    = $product->get_id();
$permalink     = get_the_permalink();
$thumbnail_url = get_the_post_thumbnail_url($product_id, 'woocommerce_thumbnail');
$badge         = get_post_meta($product_id, '_product_badge', true);
?>

<article <?php wc_product_class('product-card', $product); ?>>

    <a href="<?= esc_url($permalink) ?>" class="product-card__image-wrap" tabindex="-1">
        <?php if ($thumbnail_url) : ?>
            <img
                src="<?= esc_url($thumbnail_url) ?>"
                alt="<?= esc_attr(get_the_title()) ?>"
                loading="lazy"
                class="product-card__image"
            >
        <?php else : ?>
            <div class="product-card__image product-card__image--placeholder"></div>
        <?php endif; ?>

        <?php if ($badge) : ?>
            <span class="product-card__badge"><?= esc_html($badge) ?></span>
        <?php endif; ?>

        <?php if ($product->is_on_sale()) : ?>
            <span class="product-card__sale"><?= esc_html(wc_get_sale_flash()) ?></span>
        <?php endif; ?>
    </a>

    <div class="product-card__body">
        <a href="<?= esc_url($permalink) ?>" class="product-card__title">
            <?= esc_html(get_the_title()) ?>
        </a>

        <div class="product-card__footer">
            <span class="product-card__price"><?= wp_kses_post($product->get_price_html()) ?></span>

            <?php if ($product->is_in_stock()) : ?>
                <?php woocommerce_template_loop_add_to_cart(['class' => 'btn btn--primary btn--sm']); ?>
            <?php else : ?>
                <span class="product-card__outofstock">Немає в наявності</span>
            <?php endif; ?>
        </div>
    </div>

</article>

Хуки для додавання елементів

Багато змін можливі через хуки без модифікації шаблонів:

// Видаляємо рейтинг з карточки каталогу
remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5);

// Додаємо артикул
add_action('woocommerce_after_shop_loop_item_title', function () {
    global $product;
    $sku = $product->get_sku();
    if ($sku) {
        echo '<span class="product-card__sku">Арт: ' . esc_html($sku) . '</span>';
    }
}, 6);

// Переміщуємо ціну до заголовка
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 5);

Користувальницька галерея товара

WooCommerce використовує Flexslider для галереї — важкий та застарілий. Заміна на користувальницьку реалізацію:

// Відключаємо стандартну галерею
remove_action('woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20);
remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);

// Підключаємо свою
add_action('woocommerce_before_single_product_summary', 'my_theme_product_gallery', 20);

function my_theme_product_gallery(): void {
    global $product;

    $main_image_id    = $product->get_image_id();
    $gallery_ids      = $product->get_gallery_image_ids();
    $all_image_ids    = $main_image_id ? array_merge([$main_image_id], $gallery_ids) : $gallery_ids;

    if (empty($all_image_ids)) {
        echo wc_placeholder_img('woocommerce_single');
        return;
    }

    echo '<div class="product-gallery" data-lightbox="product">';
    foreach ($all_image_ids as $idx => $image_id) {
        $full  = wp_get_attachment_image_url($image_id, 'full');
        $large = wp_get_attachment_image_url($image_id, 'woocommerce_single');
        $alt   = get_post_meta($image_id, '_wp_attachment_image_alt', true) ?: get_the_title();
        printf(
            '<a href="%s" class="product-gallery__slide%s" data-index="%d">
                <img src="%s" alt="%s" loading="%s">
            </a>',
            esc_url($full),
            $idx === 0 ? ' product-gallery__slide--active' : '',
            $idx,
            esc_url($large),
            esc_attr($alt),
            $idx === 0 ? 'eager' : 'lazy'
        );
    }
    echo '</div>';
}

Декларація підтримки WooCommerce

Тема повинна явно заявити про підтримку WooCommerce:

add_action('after_setup_theme', function () {
    add_theme_support('woocommerce', [
        'thumbnail_image_width'  => 450,
        'single_image_width'     => 800,
        'product_grid'           => [
            'default_rows'    => 3,
            'min_rows'        => 1,
            'default_columns' => 4,
            'min_columns'     => 2,
            'max_columns'     => 6,
        ],
    ]);
});

Типові терміни: користувальницька тема з переопалення основних шаблонів та базовим CSS — 5–7 днів. Повнофункціональна тема з користувальницькою галереєю, фільтрами, AJAX-кошиком та адаптивністю — 12–18 днів.