Розбираємося з налаштуванням тем WooCommerce під WordPress

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

Перед початком читання переконайтеся, що:

1. У вас встановлені WordPress та WooCommerce на сайті.
2. Ви знаєте, як створювати теми для WordPress та вмієте працювати з HTML та CSS.
3. Ви знаєте, як працювати із засобами розробки Chrome Developer Tools та з такими інструментами, як Firebug.

Дивіться також:

• 13 корисних плагінів та розширень для магазинів на WooCommerce
• WPStore - багатофункціональна WooCommerce тема для створення інтернет-магазинів
• Створюємо магазин на WordPress за допомогою WooCommerce
• 17 безкоштовних WordPress-плагінів для фреймворку WooCommerce
• 14 безкоштовних тем WordPress для інтернет-магазину на WooCommerce

Налаштування WooCommerce CSS

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

Тому у нас є 2 шляхи для редагування CSS у темі оформлення WooCommerce:

1. Можна використовувати базові стилі та переписати їх поверх існуючих.
2. Можна вимкнути стилі за замовчуванням та замість них почати з нуля.

Пам'ятайте, що WooCommerce додає клас "WooCommerceдо всіх своїх сторінок.

Відключаємо стилі за замовчуванням

Запис нових стилів поверх тих, що запропоновані за замовчуванням, - це найпростіший і найшвидший спосіб, який підійде більшості користувачів.

Скопіюйте вміст всього файлу WooCommerce CSS, він розташований за адресою:

wp-contentpluginswoocommerceassetscsswoocommerce.css або woocommerce.less

Видаліть звідти все непотрібне і внесіть свої правки. Щоправда, це може зайняти чимало часу та призвести до повторення коду у таблиці стилів.

Рекомендую використовувати наступний підхід:

1. Знайдіть на сайті всі стилі, які потрібно замінити.
2. Потім використовуйте Chrome Developer Tools (або аналогічний інструментарій) для ідентифікації класів і внесення правок в браузері, щоб бачити, що і як виглядатиме після редагування. Зробити це можна правим кліком на сторінці і вибравши інспектування елементів у меню, що випадає.
3. Скопіюйте отриманий код CSS із Chrome Developer Tools у файл вашої теми з таблицею стилів.
4. Не забудьте змінити значення змінних, щоб зберегти цілісність таблиці стилів та зв'язок стилів та контенту для різних браузерів.
5. Якщо ви знайдете щось, що не змінюється в кастомізованому файлі, можете видалити це значення: якщо воно не змінюється, немає сенсу включати його в кастомний файл CSS.

Такий підхід добре заощаджує вам час.

У Google Chrome можна клацнути правою кнопкою миші на елементі у вікні Developer Tools для перевірки різних станів елемента. Так ви побачите всі стани елементів без необхідності шукати їх у файлі таблиці стилів.

Відключаємо рідну таблицю стилів і починаємо з нуля

Вимкнути таблицю стилів за промовчанням можна додаванням короткого рядка у файлі functions.php:

define('WOOCOMMERCE_USE_CSS', false);

Найпростіший і найшвидший спосіб створення всіх класів - скопіювати їх з існуючого оригінального файлу WooCommerce CSS в новий, а потім внести там всі необхідні редагування та зміни.

Включаємо підтримку WooCommerce у своїй темі

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

Якщо не вказати підтримку WooCommerce у вашій темі, користувачі стикаються з помилкою під час встановлення на WooCommerce. На щастя, вирішити цю проблему допоможе маленький фрагмент коду, доданий у файл functions.php:

add_theme_support( 'woocommerce' );

Редагуємо шаблони

Редагування CSS у WooCommerce може забрати чимало часу. Але є спосіб зробити цю рутинну довгу роботу не такою нудною.

Плагін WooCommerce поставляється з набором шаблонів front-end на HTML, так само як із набором шаблонів для листів. Замість прямого редагування всіх цих файлів у плагіні (не дуже хороша ідея, тому що будь-яке оновлення плагіна призведе до того, що всі ваші зміни будуть видалені), ви можете скопіювати їх у свою тему, що настроюється:

1. У папці з темою створюємо вкладену папку під назвою "WooCommerce".
2. Переходимо до папки з плагіном WooCommerce і відкриваємо папку "ШаблониТут багато вкладених папок, в яких зберігаються шаблони, що використовуються в WooCommerce. На щастя, структура тут порівняно проста і візуально зрозуміла.
3. У новій папці "WooCommerceпомістимо всі файли шаблонів, скопійовані з першоджерела, які ми хочемо відредагувати. Не забудьте зберегти ту ж структуру папок, що і в першоджерелі.
4. Після редагування всіх необхідних файлів та папок зберігаємо зміни у папці "WooCommerce".

практичний приклад

Наприклад, нам потрібно змінити код у розділі із замовленими товарами у WooCommerce.

Спочатку визначимо потрібний нам шаблон. СекціяМої замовлення" знаходиться в "Мій аккаунтСтруктура шляху до файлу виглядає так:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Робимо вкладену папку "WooCommerce", а в ній - другу вкладену з назвою "MyAccount". Копіюємо туди файл my-orders.php.

У вас повинен вийти шлях:

/wp-content/themes/вашатема/woocommerce/myaccount/my-orders.php

Тепер усі зроблені зміни будуть переписувати налаштування за замовчуванням.

WooCommerce та цикли

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

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

Створення шаблону відбувається за кілька кроків:

• Робимо дублікат файлу теми page.php і перейменовуємо його в woocommerce.php
• Знаходимо цикл WordPress у файлі woocommerce.php. Він виглядає приблизно так:

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php the_title(); ?
  <?php the_content(); ?>
  <?php endwhile; endif; ?>

• Замінюємо ваш цикл на цикл WooCommerce:

  <?php woocommerce_content(); ?>

• Тепер можна робити будь-які бажані зміни.

Висновок

Тепер ви знаєте основи роботи з підключенням та налаштуванням тем для торгової платформи WooCommerce на WordPress.

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

Джерело: code.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/