Шорткоди WooCommerce: повний посібник для початківців

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

Плагін WooCommerce обслуговує значну частину всіх онлайн-магазинів — за різними даними, ним користуються понад 4,6 мільйона діючих сайтів по всьому світу. З огляду на таку широку популярність, розуміння шорткодів стає важливим для всіх користувачів цієї платформи.

У цьому посібнику для ecommerce-маркетологів ми пояснимо все, що потрібно знати, щоб впевнено працювати з шорткодами WooCommerce. Ми розберемо, що це таке, як вони функціонують, і наведемо список ключових шорткодів, необхідних для будь-якого магазину на WooCommerce.

Що таке шорткоди WooCommerce?

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

Ідея шорткодів — не нова. Вони вже давно є частиною WordPress, дозволяючи користувачам впроваджувати складні функції. WooCommerce розширює цю функціональність, адаптуючи її спеціально під потреби інтернет-магазинів. Ось кілька популярних способів їх використання:

• Демонстрація товарів у будь-якому місці, а не лише на стандартній сторінці магазину, за допомогою [products], [featured_products] або [sale_products].
• Доступ до повного кошика та всієї його функціональності за допомогою [woocommerce_cart].
• Розміщення процесу оформлення замовлення на будь-якій сторінці за допомогою [woocommerce_checkout].
• Можливість для користувачів переглядати свої замовлення та керувати даними через [woocommerce_my_account].
• Відображення кнопки “додати в кошик” для одного товару за допомогою [add_to_cart] — і не тільки.

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

Як насправді працюють шорткоди WooCommerce?

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

Щойно WooCommerce виявляє шорткод, він запускає заздалегідь прописану PHP-функцію, пов'язану з цією командою. Ця функція виконує всю основну роботу — витягує дані про товари, розраховує підсумки кошика або формує інформацію про акаунт — і генерує HTML-код, який відображається в інтерфейсі вашого магазину.

Шорткоди WooCommerce можна налаштовувати за допомогою атрибутів або параметрів. Це додаткові інструкції всередині дужок шорткода, які змінюють його поведінку. Наприклад, у шорткоді [products] ви можете використовувати атрибут limit="4", щоб відобразити лише чотири товари, або columns="2", щоб розташувати їх у дві колонки.

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

Основні шорткоди WooCommerce для ефективного управління інтернет-магазином

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

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

Шорткоди для ключових сторінок WooCommerce

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

• Сторінка кошика: [woocommerce_cart]

Шорткод [woocommerce_cart], який часто називають woocommerce cart page shortcode або просто woocommerce cart shortcode, відображає вміст кошика покупця, включно з доданими товарами, їх кількістю, цінами і, що особливо важливо, кнопкою “Перейти до оформлення” (Proceed to Checkout).

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

Як використовувати: Просто вставте [woocommerce_cart] на призначену сторінку кошика.

• Сторінка оформлення замовлення: [woocommerce_checkout]

Коли покупці готові здійснити покупку, у гру вступає код оформлення замовлення — [woocommerce_checkout]. Він формує повноцінну сторінку оформлення, де клієнти вводять платіжні та адресні дані, обирають спосіб доставки та бажаний метод оплати. Саме тут завершується продаж.

Як використовувати: Додайте [woocommerce_checkout] на сторінку, яку ви призначили як сторінку оформлення замовлення.

• Сторінка “Мій акаунт”: [woocommerce_my_account]

Використовуйте [woocommerce_my_account], щоб надати клієнтам окремий простір для керування своєю інформацією. Цей шорткод відображає панель керування акаунтом, де користувачі можуть переглядати історію замовлень, керувати адресами та оновлювати дані облікового запису.

Як використовувати: Додайте [woocommerce_my_account] на сторінку, яку ви хочете використовувати як “Мій акаунт”.

• Відстеження замовлення: [woocommerce_order_tracking]

Шорткод [woocommerce_order_tracking] дозволяє покупцям перевіряти статус своїх замовлень, вводячи номер замовлення та адресу електронної пошти — без потреби входити в акаунт.

Як використовувати: Розмістіть [woocommerce_order_tracking] на окремій сторінці відстеження замовлень, наприклад “Відстежити замовлення”. Також можна додати його на сторінку “Мій акаунт”.

Шорткоди відображення товарів у WooCommerce

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

• Загальне відображення товарів: [products]

Шорткод [products] — мабуть, найчастіше використовуваний серед товарних шорткодів WooCommerce. Це основний інструмент для виведення товарів у різних форматах за допомогою атрибутів. Список параметрів для цього шорткода досить широкий, включно з такими:

• ids або skus — відображення конкретних товарів.
• limit — кількість товарів для відображення (наприклад, limit="6").
• columns — кількість колонок у сітці (наприклад, columns="3").
• orderby — сортування товарів (наприклад: date, title, popularity, rating, rand). Часто використовуються orderby="date" або orderby="popularity".
• order — порядок сортування (ASC — за зростанням, DESC — за спаданням).
• category — відображення товарів із визначених категорій (за slug).
• tag — відображення товарів із визначеними тегами.
• on_sale="true" — показати лише товари за акцією.
• best_selling="true" — вивести найбільш продавані товари.
• top_rated="true" — відобразити товари з найвищим рейтингом.
• visibility — керування видимістю товару (visible, catalog, search, hidden).

Приклади:

[products limit="4" columns="4" category="apparel" orderby="date" order="DESC"] — відображає 4 найновіші товари з категорії "apparel" у 4 колонках.

[products ids="25, 30, 42" columns="3" orderby="title"] — виводить три конкретні товари, відсортовані за назвою.

• Визначені типи товарів:

Хоча основний шорткод [products] може впоратися з більшістю завдань за допомогою атрибутів, WooCommerce також пропонує низку застарілих або більш прямолінійних шорткодів для типових потреб:

• • [featured_products limit="3" columns="3"] — швидко показує ваші обрані товари.
  • [sale_products per_page="6" columns="2"] — відображає 6 товарів зі знижкою у 2 колонках.
  • [best_selling_products limit="5" columns="5"] — підкреслює 5 найбільш продаваних товарів.
  • [top_rated_products per_page="4" columns="4"] — демонструє 4 товари з найвищою оцінкою.
  • [recent_products limit="8" columns="4"] — зручно для розділу “Новинки”.
  • [related_products limit="3" columns="3"] — зазвичай використовується на сторінці окремого товару, відображаючи супутні товари.

• Категорії та теги товарів:

• [product_category category="your-category-slug" per_page="6" columns="3"] — відображає товари з однієї заданої категорії.
• [product_categories number="0" parent="0"] — виводить список усіх категорій верхнього рівня. Чудово підходить для окремої сторінки “Покупки за категоріями” або бічної панелі.
• Щоб відобразити товари за тегом, зазвичай використовують атрибут tag в основному шорткоді [products], наприклад: [products tag="summer-specials" columns="4"].

Шорткоди WooCommerce, орієнтовані на дії

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

• Кнопка/посилання додавання в кошик: [add_to_cart] і [add_to_cart_url]

Шорткод [add_to_cart] у WooCommerce корисний для створення можливостей прямої покупки поза межами стандартних сторінок магазину чи продукту.

[add_to_cart id="99"] — відобразить кнопку “Додати в кошик” для товару з ID 99. Можна додати атрибути, такі як show_price="true" або style=";".

[add_to_cart_url id="99"] — не відображає кнопку, а виводить посилання, яке додає товар з ID 99 у кошик. Корисно для кастомних кнопок або посилань.

Як використовувати: вставляйте ці шорткоди в блоги з оглядами товарів, на кастомні лендинги з акціями або навіть в email-розсилки (використовуючи URL-посилання).

• Повідомлення магазину: [shop_messages]

Цей шорткод використовується для відображення системних повідомлень WooCommerce (наприклад: “Товар додано в кошик”, “Купон успішно застосовано” тощо) на сторінках, які не є стандартними сторінками WooCommerce. Використовується під час створення магазинів із високим ступенем персоналізації.

5 порад щодо використання шорткодів WooCommerce

Знати доступні шорткоди WooCommerce — недостатньо. Потрібно ще вміти правильно їх застосовувати. Щоб отримати максимум користі від цих зручних інструментів і уникнути можливих проблем, ось кілька практичних порад:

Вставляйте шорткоди коректно. Незалежно від того, чи використовуєте ви WordPress Classic Editor, чи новіший редактор блоків Gutenberg, вставляти шорткоди WooCommerce доволі нескладно. У Classic Editor шорткод просто вставляється в текстову область. У Gutenberg краще використовувати спеціальний блок “Shortcode” — це гарантує, що система правильно його розпізнає і обробить.

Слідкуйте за синтаксисом атрибутів. Сила багатьох шорткодів WooCommerce полягає саме в атрибутах (наприклад, limit="5", category="apparel"). Будьте особливо уважні до синтаксису. Завжди беріть значення атрибутів у прямі лапки ("), а не у фігурні (“ ”), які іноді непомітно з'являються під час копіювання тексту. Також обов'язково перевіряйте, що ви використовуєте допустимі значення для кожного атрибута, як зазначено в офіційній документації WooCommerce.

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

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

В ecommerce навіть затримка в одну секунду може вплинути на конверсії, знижуючи їх до 7%. Для складних макетів або вузькоспеціалізованого функціоналу ефективнішим рішенням можуть стати спеціальні конструктори сторінок або навіть індивідуальна розробка.

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

Вище базового рівня: покращте досвід роботи з WooCommerce за допомогою eSputnik

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

eSputnik — це платформа управління клієнтськими даними (CDP), створена для того, щоб допомогти власникам інтернет-магазинів максимально ефективно використовувати дані про клієнтів і збільшувати продажі. Тепер ви можете інтегрувати eSputnik у свій магазин без зайвих зусиль за допомогою нашого безкоштовного плагіна для WooCommerce. Встановіть плагін, синхронізуйте дані магазину з нашою системою — і почніть використовувати потужні нові можливості, включно з:

Рекомендації товарів на основі ШІ: Коли вбудованої опції “Супутні товари” недостатньо, на допомогу приходять товарні рекомендації від eSputnik на основі штучного інтелекту. Система аналізує поведінку клієнтів, історію покупок і навіть приховані закономірності, щоб показати найбільш релевантні товари — збільшуючи можливості для крос-продажів і апсейлу.

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

Залучайте клієнтів за допомогою інтерактивних віджетів на сайті: Привертайте увагу і спонукайте до дії через інтерактивні віджети на своєму сайті. З їхньою допомогою ви можете збирати контактні дані, інформувати користувачів про останні пропозиції, пропонувати знижки або навіть додавати ігри прямо на сайт. Жодного додаткового кодингу не знадобиться!

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

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

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

Special Request Inline