Як влаштований WooCommerce: products, cart і checkout

Кошеня працює над інтернет-магазином WooCommerce на ноутбуці

WooCommerce — plugin для WordPress, який додає моделі товарів і замовлень, кошик, checkout та інструменти керування магазином. Він використовує WordPress database, users, templates і hooks, але додає власні правила для ціни, залишків, доставки та оплати.

Product як центральна сутність

Товар має назву, опис, ціну, статус, зображення й дані про запас. Простий товар має один набір параметрів. Variable product об’єднує variations, наприклад розміри або кольори. Grouped і external products вирішують інші сценарії, але початківцю варто спершу зрозуміти simple та variable.

Cart, session і персоналізований стан

Що відбувається при додаванні в cart

  1. Користувач обирає товар і кількість.
  2. WooCommerce перевіряє product та variation.
  3. Cart item отримує ключ і дані.
  4. Перераховуються totals, taxes і можливі discounts.
  5. Стан кошика зберігається для наступного запиту.

Кошик — не просто список ID. Його результат залежить від кількості, варіації, купонів, доставки та налаштувань податків.

Checkout, payment та order

Checkout

Checkout збирає billing і shipping data, перевіряє поля, обирає доставку й payment gateway. Після успішної перевірки створюється order. Оплата може підтвердитися одразу або пізніше через callback/webhook, тому статус замовлення важливіший за показ сторінки «Дякуємо».

Orders і статуси

Order зберігає items, суми, адреси та історію стану. Processing, completed, failed чи refunded мають різні наслідки. Інтеграція не повинна вважати замовлення оплаченим лише через факт його створення.

Classic templates, Blocks і точки розширення

Classic Cart/Checkout переважно формуються PHP templates і традиційними WooCommerce hooks. Cart та Checkout Blocks працюють через block architecture і Store API, тому не кожен classic PHP hook має відповідник у block flow. Перед customization визначте, які pages і blocks використовує магазин.

Template override дає контроль над markup, але його потрібно підтримувати після updates. Для невеликої зміни частіше достатньо documented action, filter або extension point для Blocks. Практичні відмінності продовжує стаття про WooCommerce hooks.

Високорівневий потік даних

Каталог читає products → cart збирає вибір → checkout перевіряє customer data → order фіксує snapshot покупки → payment і shipping integrations оновлюють стан. Debugging варто проводити саме вздовж цього ланцюжка.

Практична вправа

Створіть simple і variable product, додайте їх у cart та простежте, які дані видно на checkout і в order admin. Змініть лише текст через filter, не торкаючись plugin core.

Ціна, податки та доставка

Displayed product price ще не завжди є фінальною сумою. Cart і checkout можуть враховувати customer location, tax settings, shipping class, coupon та обраний метод доставки. Кастомізація повинна працювати з WooCommerce totals, а не повторно рахувати їх у JavaScript.

Customer session

Cart має переживати переходи між сторінками. WooCommerce пов’язує його із session, а для авторизованого user може відновлювати збережені дані. Через це bug іноді залежить від cookies, cache або попереднього стану — тестуйте у чистій session.

Payment gateway та асинхронність

Після переходу до платіжної системи результат може повернутися redirect або webhook. Webhook має перевіряти підпис і бути idempotent: повторне повідомлення не повинно двічі змінювати stock чи запускати fulfillment.

Cache і персоналізовані дані

Catalog pages добре кешуються, але cart і checkout залежать від користувача. Неправильний full-page cache може показати чужий або застарілий стан. Перед оптимізацією визначте, які fragments персональні.

Де зберігати кастомні дані

Якщо buyer додає engraving або інший параметр, його часто потрібно провести від product form до cart item, order item та admin. Додавання поля лише в HTML недостатньо. На кожному етапі потрібні validation, sanitization і зрозумілий display.

Checklist тестового замовлення

  • Simple і variable product.
  • Guest та registered customer.
  • Coupon і різні shipping methods.
  • Успішна й відхилена оплата.
  • Повторний webhook.
  • Email та order admin.
  • Mobile checkout.

Цей сценарій дає системніше розуміння магазину, ніж перевірка однієї кнопки на product page.

HPOS без заглиблення в database

Сучасний WooCommerce може зберігати orders через High-Performance Order Storage. Тому custom code не повинен припускати, що order завжди є звичайним WordPress post, або напряму читати його таблиці. Для orders використовуйте WooCommerce CRUD API та documented functions — це зберігає сумісність із HPOS.

Наступний крок

WooCommerce Development розглядає products, templates, hooks, checkout та integrations як пов’язану систему, а не набір випадкових snippets.

Хочете перейти від читання до практики?

Оберіть курс або спробуйте безкоштовне перше заняття.