Головна сторінка/Знання/WordPress/Детальна інформація про зміст.

Посібник з розробки тем для WordPress Commerce: створення вашого інтернет-магазину з нуля

Читання за 3 хвилини.
2026-03-15
2026-06-04
2,618
Я заробляю комісію, коли ви робите покупки за посиланнями нижче, без додаткових витрат для вас.

Якщо ви вже знайомі з розробкою тем для WordPress, створення теми для WooCommerce стане для вас природним наступним кроком. WooCommerce є електронно-комерційним плагіном для WordPress, і його основні функції реалізуються за допомогою набору налаштованих шаблонів сторінок, циклів та коротких кодів. Тема для WooCommerce має правильно використовувати ці шаблони та забезпечувати безперешкодну інтеграцію всіх стилів та скриптів.

Розробка теми для WooCommerce починається з наявності базової теми для WordPress. Це може бути підтема, створена вами з нуля, або ж тема, яка була розроблена на основі існуючої структури (наприклад, Underscores чи Storefront). Важливо, щоб ваша тема явно підтримувала функціонал WooCommerce – тільки тоді плагіни зможуть вставляти свої шаблони у структуру вашої теми.

Увесь процес включає кілька ключових етапів: створення середовища розробки, розуміння ієрархії шаблонів WooCommerce, написання необхідних файлів теми, налаштування функцій за допомогою дій (actions) та фільтрів (filters), а також остаточне тестування та оптимізація продукту. Далі ми розглянемо кожен з цих етапів детальніше.

Рекомендуємо до прочитання. Посібник з розробки тем для WordPress: створіть свою першу тему з нуля。

Створення розробницького середовища та структури теми

Перш ніж починати писати будь-який код, надзвичайно важливо мати надійне локальне середовище для розробки. Рекомендується використовувати такі інструменти, як Local, XAMPP чи Docker, щоб швидко налаштувати середовище, яке включає PHP, MySQL та сервери Apache/Nginx. Переконайтеся, що ваша версія PHP відповідає останнім вимогам для роботи з WooCommerce (зазвичай це PHP 7.4 або вище), а також встановіть WordPress та відповідні плагіни для WooCommerce.

UltaHost – хостинг для сайтів, побудованих на платформі WordPress
Гарантія повернення грошей протягом 30 днів, необмежена пропускна здатність мережі та доступ до баз даних, безкоштовний захист від DDoS-атак; знижка 50% при покупці на термін 3 роки (варіанти об’ємів трафіку: 4 ТБ/5
Лоґотип UltaHost. сторінка доступу

Створіть новий каталог тем, наприклад… my-woocommerce-themeІ розмістіть його там. wp-content/themes/ У каталозі. Для підтримки системи WooCommerce найбазовіша тема має містити принаймні наступні ключові файли:

  • style.cssШаблон стилізації теми, який має містити стандартні коментарі для заголовкової частини WordPress-теми.
  • index.phpОсновний шаблон файлу теми.
  • functions.phpЦе основний файл, який використовується для додавання функцій теми, скриптів реєстрації користувачів, стилів, а також для оголошення підтримки платформи WooCommerce.

По-перше, style.css У заголовкових коментарях потрібно чітко визначити інформацію про тему.

/*
Theme Name: My WooCommerce Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Description: 一个为 WooCommerce 定制的现代电商主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-woocommerce-theme
*/

Далі, functions.php У файлі першим і найважливішим кроком є оголошення про підтримку вашого тематичного розширення для системи WooCommerce. Це робиться шляхом… add_action Хвостики та… add_theme_support Функція реалізована за допомогою певних алгоритмів чи програмних модулів.

<?php
/**
 * 主题功能文件
 */
function my_woocommerce_theme_setup() {
    // 声明主题支持 WooCommerce
    add_theme_support( 'woocommerce' );
    // 可选：支持 WooCommerce 的特定功能，如产品画廊缩放、轮播等
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'my_woocommerce_theme_setup' );

// 注册主题的样式和脚本
function my_woocommerce_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入 WooCommerce 样式
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style( 'woocommerce-theme', get_template_directory_uri() . '/css/woocommerce.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_woocommerce_theme_scripts' );
?>

Розуміння та адаптація шаблонів WooCommerce

WooCommerce використовує систему шаблонів, яка дозволяє їх легко замінювати. Усі стандартні шаблони знаходяться у каталозі плагінів. templates/ У папці. Щоб налаштувати ці шаблони у вашому тематичному дизайні, вам потрібно створити файл під назвою… (назва файлу не вказана у оригінальному тексті). woocommerce Знайдіть відповідну папку, а потім скопіюйте та змініть відповідні шаблонні файли, використовуючи ту саму структуру шляхів, що й у додатку.

Рекомендуємо до прочитання. Посібник з розробки тем для WordPress: створіть свою першу власну тему з нуля。

Наприклад, якщо ви хочете змінити шаблон сторінки окремого товару, за замовчуванням у WooCommerce це робиться за такою адресою: plugins/woocommerce/templates/single-product.phpВам потрібно створити наступні елементи у вашій темі:themes/my-woocommerce-theme/woocommerce/single-product.phpЯкщо цей файл існує, WooCommerce буде використовувати версію, яка знаходиться у темі сайту.

Ієрархія шаблонів є ще однією важливою концепцією. WooCommerce досконало інтегрується зі стандартною ієрархією шаблонів WordPress. Наприклад, для сторінки магазину (Shop Page) WordPress шукає шаблони у наступному порядку:archive-product.php > archive.php > index.phpОтже, необхідно створити… archive-product.php Це найпряміший та найефективніший спосіб створення сторінки зі списком магазинів на замовлення.

До поширених основних шаблонних файлів, рекомендованих до перевстановлення на першому місці, належать:
- single-product.phpСторінка деталей окремого продукту.
- archive-product.phpСторінка архіву продуктів (головна сторінка магазину).
- cart/cart.phpСторінка кошика покупок.
- checkout/form-checkout.phpСторінка оформлення платежу.
- myaccount/my-account.phpМоя сторінка облікового запису.

hosting.com Віртуальний хостинг
Висока продуктивність завдяки процесорам AMD EPYC, SSD-накопичувачам NVMe і технології LiteSpeed, цілодобова експертна підтримка, розширені заходи безпеки, включаючи SSL, грубу силу, захист від шкідливих програм і DDoS, економія до 73%.
ЛОГОТИП hosting.com сторінка доступу

При перезаписі шаблонів найкращою практикою є спочатку скопіювання оригінальних файлів шаблонів з плагіна WooCommerce у відповідний каталог вашого тематичного дизайну, а вже потім їх модифікація. Це допоможе уникнути можливих проблем з функціоналом основної системи WordPress.

Використання хуків для налаштування функціоналу

Окрім можливості перевизначення файлів шаблонів, WooCommerce також надає велику кількість додаткових функцій (акцій).action) та фільтри (filterЦі „хвилі“ (hooks) дозволяють вам додавати, видаляти чи змінювати вміст та функції без необхідності модифікації основних файлів шаблонів. Зазвичай цей підхід є більш легким у використанні та простішим у обслуговуванн

Акційні хаки (action hooks) дозволяють виконувати власний код у певних місцях. Наприклад, ви можете додати власний блок інформації після короткого опису продукту.

Рекомендуємо до прочитання. Створення професійного вебсайту: повний керівництво з розробки власної теми WordPress з нуля.。

function my_custom_product_message() {
    echo '<p class="my-custom-notice">🎉 Цей продукт бере участь у обмеженій за часом акції!</p>';
}
add_action( 'woocommerce_single_product_summary', 'my_custom_product_message', 20 );

Тут,woocommerce_single_product_summary Це ім’я хука (hook).20 Це числа, що визначають пріоритет виконання.

Фільтрові хаки дозволяють вам змінювати дані. Наприклад, ви можете змінити текст кнопки “Додати до кошика”.

Міжсерверний віртуальний хостинг
Віртуальний хостинг $2.50 USD на місяць, перший місяць $0.1 USD за промокодом tryinterserver, 461 скрипт хмарних додатків, встановлення в один клік.
ЛОГОТИП InterServer сторінка доступу 
function my_custom_add_to_cart_text( $text ) {
    if ( is_product() ) {
        $text = __( '立即购买', 'my-woocommerce-theme' );
    }
    return $text;
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'my_custom_add_to_cart_text' );

Ще одним потужним інструментом є шаблонні хаки (template hooks). WooCommerce розмістив багато таких механізмів у файлах шаблонів. do_action Завдяки пошуку цих хуків ви можете точно керувати виведенням структури сторінки. Ви можете використовувати… remove_action Щоб видалити непотрібні елементи, або використати… add_action Вставляти нові елементи у певні місця є більш гнучким підходом, ніж пряма редагування файлів шаблонів. Особливо це корисно під час оновлення плагінів WooCommerce, адже ваші зміни менш схильні до перезапису.

Налаштування стилів та реактивний дизайн

WooCommerce має вбудований набір базових стилів, але для того, щоб вони гармоніювали з дизайном вашого тематичного шаблону, необхідно провести детальну налаштування стилів. Рекомендується створити окремий CSS-файл для цілей кастомізації. woocommerce.cssІ… functions.php Завантаження відбувається відповідно до заданих умов, як показано у попередньому прикладі.

Основою налаштування стилів є розуміння HTML-структури та CSS-класів, які генерує система WooCommerce. Використання інструментів розробника в браузері для перевірки елементів, таких як списки товарів чи таблиці кошика, є швидким та ефективним способом ознайомитися з функціоналом системи. WooCommerce надає багато семантичних CSS-класів для майже всіх елементів сайту. .product、.woocommerce-loop-product__link、.onsale Тощо.

Наприклад, щоб змінити стиль знака “Спеціальна ціна”:

/* 在你的 woocommerce.css 中 */
.onsale {
    background-color: #ff3366;
    color: white;
    border-radius: 0;
    padding: 0.5em 1em;
    font-weight: bold;
    top: 10px;
    right: 10px;
    left: auto; /* 覆盖默认的 left: 0 */
}

Реактивний дизайн є надзвичайно важливим для інтернет-магазинів. Ви повинні переконатися, що графічні елементи, які відображають товари (наприклад, мережі товарів, таблиці з інформацією про кошик покупок чи деталями замовлень), правильно відображаються на екранах різних розмірів. Для цього використовуйте медіаквері в CSS, а також технології розташування елементів (Flexbox чи Grid), щоб

@media (max-width: 768px) {
    ul.products li.product {
        width: 48%; /* 在平板设备上每行显示两个产品 */
        margin-right: 4%;
    }
    ul.products li.product:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    ul.products li.product {
        width: 100%; /* 在手机上每行显示一个产品 */
        margin-right: 0;
    }
    /* 调整结账表单的输入框 */
    .woocommerce form .form-row {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

підсумок

Розробка тем для системи WooCommerce – це процес поєднання знань про теми WordPress із специфічними вимогами електронної комерції. Ключовим моментом є розуміння механізму підкріплення шаблонів, а також вміле використання функцій дій (actions) та фіксерів (filters) для створення гнучких налаштувань. Від налаштування середовища роботи, оголошення підтримки потрібних функцій, перезапису ключових шаблонів до використання фіксерів для детальної настройки вигляду сайту – кожен крок є основою для створення професійного, унікального та ефективного інтернет-магазину. Пам’ятайте: розробка слід виконуватися у підтемах (subthemes), а фіксери слід використовувати перед прямою зміною основних шаблонів. Це найкраща практика для підтримки збереження коду та його сумісності з майбутніми версіями системи.

Часті запитання

Як видалити або перерозташувати елементи сторінки з деталями продукту у темі?

Ви можете використовувати ці можливості. remove_action Функція для видалення певного елемента з області опису продукту. Спочатку вам потрібно знати, за допомогою якого хака (hook) був доданий цей елемент, а також його пріоритет.

Наприклад, щоб видалити заголовок продукту, ви можете переглянути… plugins/woocommerce/templates/single-product/title.phpВи помітите, що воно працює за допомогою хуків (hooks). woocommerce_single_product_summary Додайте цей елемент з пріоритетом 5. Отже, у вашій темі… functions.php Для видалення цього коду достатньо додати наступний код:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

Щоб переупорядкувати елементи, спочатку потрібно видалити всі пов’язані з ними елементи, а потім додати їх у бажаному порядку. Або можна використати механізм налаштування їхнього пріоритету – чим менший пріоритет, тим раніше елемент виконається та тим вище він буде розташований у результаті.

Чому зміни, які я зробив у своєму тематичному файлі для сайту, зникли після оновлення платформи WooCommerce?

Якщо ви безпосередньо змінили каталог плагіна WooCommerce…wp-content/plugins/woocommerce/Якщо ви використовуєте шаблонні файли, розташовані під цими директоріями, то щоразу, коли оновлюється плагін, всі зроблені вами зміни будуть перезаписані. Це абсолютно не рекомендується.

Правильний підхід полягає у дотриманні механізму перевизначення шаблонів у WooCommerce: потрібні до зміни файли шаблонів слід скопіювати у каталог вашого тематичного дизайну (theme directory). woocommerce/ Зміни виконуйте у піддиректоріях. Таким чином, WooCommerce буде завантажувати версію вашого тематичного файлу, яка знаходиться у цих піддиректоріях, і оновлення плагінів не вплинуть на ваші власні налаштування.

Як створити власний дизайн для сторінок магазину на платформі WooCommerce?

Найефективніший спосіб створити власний дизайн для сторінки магазину – це перевизначити відповідні елементи коду. archive-product.php Це файл-шаблон. Ви можете повністю переробити його HTML-структуру.

Інший, більш модульний підхід – використання хуків (hooks). Зміст сторінки магазину переважно складається з… woocommerce_before_main_content、woocommerce_archive_description、woocommerce_before_shop_loop、woocommerce_after_shop_loop Керування виконується за допомогою певних „хуків“ (hooks). Ви можете видалити стандартні цикли та вставити між цими хуками власні користувацькі запити та циклічні структури, щоб створити унікальні варіанти візуального оформлення – мережеві (grid), спискові (list) чи моза

Крім того, використовуючи функцію налаштувань (customizer) WordPress або створивши відповідну сторінку з параметрами теми, ви зможете дозволити користувачам змінювати дизайн сайту без необхідності редагування коду.

Як правильно додати користувацький JavaScript до теми WooCommerce?

Для додавання власного JavaScript-коду до теми WooCommerce необхідно дотримуватися найкращих практик відстоювання скриптів у WordPress. functions.php У файлі використовується… wp_enqueue_script Функції для реєстрації та завантаження скриптів.

Переконайтеся, що використовується… wp_enqueue_script Під час використання певних функцій можна встановити залежності за допомогою третього параметра – наприклад, від jQuery. Для скриптів, специфічних для системи WooCommerce, іноді такі залежності є необхідними. wc-add-to-cart-variation(Для продуктів з можливістю змін) або wc-checkout(Використовується на сторінці оформлення платежу). Гаразд. wp_localize_script Функція дозволяє безпечно передавати PHP-змінні (наприклад, URL-адреси для AJAX-запитів, адреси веб-сайтів тощо) у ваш JavaScript-файл.

php
function my_theme_wc_scripts() {
wp_enqueue_script(
'my-woocommerce-script',
`get_template_directory_uri()` . 'https://www.likacloud.com/js/my-woocommerce.js',
array( 'jquery', 'wc-add-to-cart-variation' ), // Залежності
'1.0.0',
true // Завантажується у футерному розділі сторінки
);
`wp_localize_script('my-woocommerce-script', 'myWooParams', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_wc_scripts' );

Наступний крок, що робити далі?

Якщо ви створюєте або оптимізуєте веб-сайт на платформі WordPress, наступним кроком буде продовжити читання про оптимізацію продуктивності, налаштування плагінів і кастомізацію теми.

Для подальшого читання та практичних знань

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

Цитата: Теги: