Розробка кастомної теми WooCommerce
Стандартна тема Storefront не дає гнучкості під унікальний дизайн інтернет-магазину. Кожен другий клієнт приходить з питанням: «Як прибрати зайві поля з кошика?» або «Як додати бейдж на картку товару?». Відповідь одна — кастомна тема WooCommerce. Ми беремо дизайн-макет і перетворюємо його на повністю працюючий шаблон, не чіпаючи ядро плагіна. Наш досвід — понад 30 проєктів на WooCommerce, гарантія сумісності з останніми версіями.
Завдяки кастомній розробці середній час завантаження сторінки скорочується на 30-40%, конверсія зростає на 15-20%. Це безпосередньо пов'язано з оптимізацією Core Web Vitals: LCP < 1.5 с, CLS < 0.1. За нашими даними, 70% магазинів на готових темах мають LCP > 3 с, що негативно позначається на ранжуванні.
Чому кастомна тема вигідніша за готову?
Готова тема (Storefront, Flatsome, Astra) економить час на старті, але дає обмеження: зайвий CSS, складні перевизначення через хуки, втрата продуктивності. Кастомна тема з нуля в 2-3 рази швидше завантажується завдяки відсутності мертвого коду та чистим шаблонам. Середній проєкт на кастомній темі окупається за 2-3 місяці за рахунок зростання конверсії.
| Параметр | Готова тема | Кастомна тема |
|---|---|---|
| Продуктивність | Багато зайвих стилів і скриптів | Тільки потрібний код |
| Гнучкість дизайну | Обмежена структурою | Будь-яка верстка |
| Час доопрацювань | Довго через перевизначення | Швидка кастомізація |
| Адаптивність | Часто костилі | Відразу під всі екрани |
| Сумісність з оновленнями | Вимагає перевірки | Гарантована |
Крім того, кастомна тема не містить мертвого коду, що зменшує об'єм CSS і JS на 40–60%. Це позитивно впливає на ранжування. Зв'яжіться з нами для аналізу вашого проєкту.
Як перевизначити шаблон у WooCommerce?
WooCommerce шукає шаблони в папці woocommerce/ всередині активної теми. Якщо файл знайдено — він перекриває оригінальний з плагіна. Ось покрокова інструкція:
- Визначте, які шаблони потрібно змінити (каталог, картка, кошик тощо).
- Скопіюйте їх з
/wp-content/plugins/woocommerce/templates/. - Розмістіть копії в папку
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
Повний список шаблонів — в офіційній документації WooCommerce.
Перевизначення шаблону картки товару
Замість копіювання 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>
<?php if ($product->get_short_description()) : ?>
<p class="product-card__desc"><?= wp_kses_post(wp_trim_words($product->get_short_description(), 12)) ?></p>
<?php endif; ?>
<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);
// Додаємо кастомну секцію після опису
add_action('woocommerce_single_product_summary', function () {
global $product;
$benefits = get_post_meta($product->get_id(), '_product_benefits', true);
if ($benefits) {
echo '<div class="product-benefits">' . wp_kses_post($benefits) . '</div>';
}
}, 25);
Хуки дозволяють уникнути копіювання шаблонів і прискорюють розробку. Наприклад, за допомогою хука woocommerce_before_shop_loop_item_title можна вивести кастомний бейдж без правки content-product.php.
Які файли найчастіше перевизначають?
- archive-product.php - single-product.php - cart/cart.php - checkout/form-checkout.php - myaccount/dashboard.php - content-product.phpЩо дає кастомна галерея товару?
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">';
echo '<div class="product-gallery__main">';
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>';
if (count($all_image_ids) > 1) {
echo '<div class="product-gallery__thumbs">';
foreach ($all_image_ids as $idx => $image_id) {
$thumb = wp_get_attachment_image_url($image_id, 'thumbnail');
printf(
'<button class="product-gallery__thumb%s" data-index="%d" aria-label="Фото %d">
<img src="%s" alt="" loading="lazy">
</button>',
$idx === 0 ? ' product-gallery__thumb--active' : '',
$idx,
$idx + 1,
esc_url($thumb)
);
}
echo '</div>';
}
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,
],
]);
add_theme_support('wc-product-gallery-zoom');
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');
});
Процес роботи та що входить
Після отримання дизайн-макету ми проводимо аналіз і визначаємо список перевизначуваних файлів. Потім проектуємо структуру папок woocommerce/, налаштовуємо хуки та фільтри. На етапі реалізації пишемо шаблони каталогу, картки, кошика, оформлення замовлення та особистого кабінету. Додаємо кастомні елементи — галерею, бейджі, додаткові поля. Після верстки тестуємо на всіх пристроях і браузерах, заміряємо Core Web Vitals. В кінці передаємо документацію по хуках, доступи та інструкцію з оновлення.
Терміни залежно від складності:
| Рівень кастомізації | Терміни |
|---|---|
| Базова (основні шаблони) | 5-7 днів |
| Середня (галерея, фільтри) | 12-18 днів |
| Повна (всі сторінки, AJAX) | 20-30 днів |
Вартість розраховується індивідуально — оцінка проєкту безкоштовно. Отримайте консультацію по вашому проєкту — ми допоможемо визначити оптимальний склад робіт і терміни. Замовте розробку кастомної теми — отримайте унікальний магазин з високою продуктивністю та конверсією.
Ми реалізували понад 30 проєктів на WooCommerce, кожен зі своєю архітектурою. Використовуємо тільки актуальні версії PHP і WordPress. Гарантуємо сумісність з плагінами та оновленнями. Пишемо чистий код без зайвих залежностей, що знижує навантаження на сервер і прискорює завантаження. Кастомна тема не вимагає ліцензійних відрахувань — економія на ліцензіях. Зв'яжіться з нами, щоб ми могли проаналізувати ваш дизайн і запропонувати оптимальне рішення.