Розробка кастомної теми WooCommerce під ключ

Розробка кастомної теми 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/ всередині активної теми. Якщо файл знайдено — він перекриває оригінальний з плагіна. Ось покрокова інструкція:

1. Визначте, які шаблони потрібно змінити (каталог, картка, кошик тощо).
2. Скопіюйте їх з /wp-content/plugins/woocommerce/templates/.
3. Розмістіть копії в папку woocommerce/ вашої теми.
4. Змініть файли відповідно до дизайн-макету.
5. Налаштуйте хуки для додаткових функцій, щоб не копіювати зайве.

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.

Що дає кастомна галерея товару?

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. В кінці передаємо документацію по хуках, доступи та інструкцію з оновлення.

Терміни залежно від складності:

Вартість розраховується індивідуально — оцінка проєкту безкоштовно. Отримайте консультацію по вашому проєкту — ми допоможемо визначити оптимальний склад робіт і терміни. Замовте розробку кастомної теми — отримайте унікальний магазин з високою продуктивністю та конверсією.

Ми реалізували понад 30 проєктів на WooCommerce, кожен зі своєю архітектурою. Використовуємо тільки актуальні версії PHP і WordPress. Гарантуємо сумісність з плагінами та оновленнями. Пишемо чистий код без зайвих залежностей, що знижує навантаження на сервер і прискорює завантаження. Кастомна тема не вимагає ліцензійних відрахувань — економія на ліцензіях. Зв'яжіться з нами, щоб ми могли проаналізувати ваш дизайн і запропонувати оптимальне рішення.